赞
踩
好了,准备了一周的理论知识和开发方案,nodeJS中间层搭建项目从今天就开始了。作为项目的负责人和初次尝试者,我会把开发的过程中用到的技术、碰到的壁一个个用文章记录下来。
express框架是nodeJS出来不久就诞生的webServer构建框架,目前的版本是 4.x。项目时间紧迫,这次就不从零开始搞了,站在巨人的肩膀上解决问题,可以帮我们节省些底层工作。
@ express API官方网站 http://www.expressjs.com.cn
如果你还没有安装node,先把它安装好。然后用npm 全局安装express和express-generator。
$ npm install exprss -g --save
$ npm install express-generator -g --save
通过express-generator生成器工具 express 可以快速创建一个应用的骨架:(我的项目名是 node_hk)
$ express node_hk
默认生成的目录是这样的:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
因为我的前端项目用的是artTemplate模板引擎,为了很前后端复用,因此node这边也采用这款模板引擎。所以需要把express默认的jade改成了art-template:
{
"name": "node_hk",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"art-template": "~3.0.3",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
}
}
配置好了 package.json,下面我们就用npm 依次安装它们吧!
$ npm install
启动这个应用(MacOS 或 Linux 平台):
$ DEBUG=myapp npm start
Windows 平台使用如下命令:
$ set DEBUG=myapp & npm start
然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了(等等 报错了对不对 * _ *,别着急,往下看)。
app.js是express的主要文件,这个文件里包含了指定模板引擎、指定视图文件默认路径的代码。需要将指定模板引擎的代码改为指定用art-template引擎。视图文件默认路径保持不变,因此无需改动。
新的app.js如下(懒得看就直接copy吧):
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
/*引用artTemplate模板*/
var template=require('art-template');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
/*把jade模板引擎改成artTemplate*/
//app.set('view engine', 'jade');
template.config('base','');
template.config('extname','.html');
app.engine('.html',template.__express);
app.set('view engine','html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
在工作区下,进入express文件夹中的views子文件夹,创建index.html,并将如下代码输入index.html,并保存。
注意,views文件夹下会有index.jade等三个后缀是.jade的文件存在,可以忽视它们。因为express默认支持的模板引擎是jade,所以初始化的框架中的模板是以.jade结尾的文件。也可以删除它们。
这里举个简单的 index.html 例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello express & art-template</title>
</head>
<body>
<h2>Hello express & art-template</h2>
<div id='main'>
<ul>
{{each list}}
<li>编号:{{$value.id}} 姓名:{{$value.name}}</a></li>
{{/each}}
</ul>
</div>
</body>
</html>
express默认访问index路由。我们需要在index路由方法中,渲染模板。
进入routes文件夹,打开index.js,增加渲染模板的代码,如下:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
//数据
var data = {
title: '国内要闻',
time: (new Date).toString(),
list: [
{
id: '1',
name: '张三'
},
{
id: '2',
name: '李四'
}
]
};
//渲染模板
res.render('index', data);
});
module.exports = router;
代码中的res.render(‘index’, data)调用,会调用artTemple模块中的template.__express方法,并传入模板文件名、数据。
template.__express方法是在app.js中注册给express框架的。
在Windows命令行下,进入工作区,执行 node app.js ,服务器就启动了。
此时在本地机器上使用浏览器访问http://localhost:3000将会看到Html输出了,服务器端的命令行工具上同时也会显示“New request arrived.”字样。
按Ctl+C退出服务器
@参考 express 官方API http://www.expressjs.com.cn
@参考 执着的慢行者 《使用artTemplate模板开发网站(node.js + express环境)》
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。