Node学习笔记二：Hello Express

2015-09-06 本文已影响529人 PM熊叔

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

Paste_Image.png

点击 Send 按钮后，可以获得响应：