Express 版本:4.13.1
1 启动服务
1.1 手动启动
如果需要手动启动服务,执行命令:
npm start
或:
DEBUG=LearnNodejs:* npm start
1.2 Supervisor自动监测文件变化
Superviosr 安装资料 https://github.com/petruisfan/node-supervisor
全局安装
npm install supervisor -g
安装完毕后,执行命令:
supervisor bin/www
supervisor 默认监测的是当前目录下的所有文件。当项目文件夹中有文件变化时,会重新执行 bin/www文件;
为何不是supervisor app.js
?
打开package.json
"scripts": {
"start": "node ./bin/www"
}
可以发现新版的express入口文件是bin/www
而不是app.js
所以Supervisor 应该指向bin/www
,既当文件发生改变的时候执行node bing/www
2 初识视图与路由:
2.1 添加视图:
在./views/
创建:about.jad
输入代码
extends layout
block content
h1= title
p this is #{title}
2.2 添加路由
在路由文件夹:./routes/
添加about.js
作为新的路由模块,
输入代码
var express = require('express');
var router = express.Router();
/* GET about */
router.get('/',function(req,res,next){
//引用刚刚创建的视图:./views/about.jad文件
res.render('about',{title:'About'});
});
module.exports = router;
在app.js加入以下代码
//引入about路由模块
var about = require('./routes/about');
//当用户访问localhost:3000/about/路径时 使用about模块
app.use('/about',about);
如果是需要制定更深层的路径,例如: /about/me
该怎么做?
打开routes/about.js
文件,添加以下代码
/* GET about/me */
router.get('/me',function(req,res,next){
res.render('about',{title:'me'});
});
我们可以看出,在`routes/about.js`作为一个子模块(sub-app)加载到app.js中。
3 更换模板引擎
Express 默认的模板引擎为jad,如果要使用underscore.js模板怎么办?
3.1 安装underscore-express
npm install underscore-express
在app.js中引入underscore-express:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
//设置模板文件格式`tmpl`
app.set('view engine', 'tmpl');
//引入underscore-express
require('underscore-express')(app);
3.2 创建undercore模板:
在views文件夹中创建header.tmpl
<html>
<head>
<title>Header!</title>
</head>
<body>
创建footer.tmpl
</body>
</html>
创建 index.tmpl
<%= include('header') %>
Welcome to <%= title %> !
<%= include('footer') %>
访问 http://localhost:3000/
可以看到
Welcome to underscore !
4 RESTful API
Router 支持 RESTful 风格的API:
先准备好RESTful 调试工具,
Postman:
https://chrome.google.com/webstore/search/postman?utm_source=chrome-ntp-icon
然后就可以开始干了。
打开about.js 在
/* GET about */
router.get('/',function(req,res,next){
res.render('about',{title:'About'});
});
之后添加以下代码:
/* POST about */
router.post('/',function(req, res, next){
res.json({method:'post', message:'ok',request:req.body});
});
上面代码意思是, 当用户以POST方法传递数据进来时,我们将返回Json数据。req.body
是指的是请求时传递过来数据。
如何调试呢?
可以照如下图设置Postman:
- 地址:http://localhost:3000/about
- 格式:x-www-form-urlencoded
- 方法: PUT
点击 Send 按钮后,可以获得响应:
Paste_Image.pngPut,Delete方法也类似,代码如下:
/* PUT about */
router.put('/',function(req,res,next){
res.json({method:'put', message:'ok',request:req.body});
});
/* DELETE about */
router.delete('/',function(req,res,next){
res.json({method:'delete', message:'ok',request:req.body});
});
网友评论