作者:hfy2409553 | 来源:互联网 | 2023-06-03 21:25
微软的microsoftwebMatrix是一个免费的开发工具,我们可以使用它进行node开发并利用iisnode模块进行iis的nodejs网站的维护,还是比较方便的。一个简单的nod
微软的microsoft webMatrix是一个免费的开发工具,我们可以使用它进行node 开发并利用iisnode 模块进行iis 的nodejs网站的维护,还是比较方便的。
一个简单的node 站点开发如下(开发工具就不用介绍了):
1.直接使用microsoft webMatrix 创建node express 入门站点
项目的结构如下:
这是我们网站的结构,其中好多事express 框架默认为我们创建的。
2.设计代码:
routes 中index.js 的代码如下:
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('index', { title: 'Express',userlist:[{username:'dalong',userage:33},{username:'dalonsg',userage:373},{username:'dalaaaong',userage:333}]});
};
exports.userinfo = function (req, res) {
var username = req.query.username;
var userage = req.query.userage;
res.render('userinfo', {title: 'Express','userinfo':{username:username,userage:userage}});
}
代码比较简单就是进行请求模块的处理,
exports.index 是起始页的模板渲染,数据传递
exports.userinfo 是进行模拟请求的数据处理。
3.配置我们请求的模块在server.js 中配置如下:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
app.get('/users', user.list);
app.get('/userinfo', routes.userinfo);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
4.view 中userinfo.jade 以及index.jade 代码
index.jade
extends layout
block content
h1= title
div#content
p Welcome to #{title}
ul
each val in userlist
li=val.username + val.userage
input#username(type="text",value=val.username)
input#userage(type="text",value=val.userage)
a(href="/userinfo?username="+val.username+"&userage="+val.userage) link
这是使用jade 模板进行的页面设计就是进行显示,比较简单
userinfo.jade
// Jade
extends layout
block content
div#content
label(for="username") username
input#username(type="text",value=userinfo.username)
label(for="userage") userage
input#userage(type="text",value=userinfo.userage)
同上就是数据的显示。
5.为了界面的稍好看些
css 样式如下:
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
#content {
margin: 0 auto;
width: 80%;
height: 200px;
background-color: #2b6d40;
}
a {
color: #00B7FF;
}
6.测试界面
a.起始页面
b.link 的页面进行传递参数
以上就是进行简单的测试。