node全栈-------第二期

本期主要讲nodejs如何启动服务，配置路由，渲染页面。

启动服务

在看过express文档的其实都挺清楚怎么启动一个简单的web服务器。文档是实现一个我们最熟悉的hello world！
文档示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

然后再执行

1
node ./app.js   //上面代码所在文件为app.js

我们的代码基本类似，express本身提供的有路由这个中间，我们就没必要再去自己用源生的http去写了。

为了让代码看起来好看点，或者说优雅点，就出现了上一期所说的情况，有一个web_router这样的一个文件。

app.js 摘出来一些关键代码，如下：

1
2
3
4
5
6
7
const express = require('express');
const app = express();
const webRouter = require('./web_router');
app.use('/',webRouter);
app.listen(9000,function(){
    console.log('server is running at http://localhost:9000/')
})

路由

web_router.js 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var express = require('express');

/**
 * 引入controller
 */
var site = require('./controllers/site');
var auth = require('./middlewares/auth');
var server  = require('./controllers/server');

var router = express.Router();

//首页
router.get('/',auth.userRequired,site.index);
//登录
router.get('/login',site.login);
//接口详情
router.get('/details/:item',auth.userRequired,site.details);
//添加分类
router.get('/addProject',auth.userRequired,site.addProject);
router.get('/addCategory/:id',auth.userRequired,site.addCategory);
router.get('/addInterface/:id',auth.userRequired,site.addInterface);
router.get('/edit',auth.userRequired,site.edit);


/**
 * 接口请求
 */

router.post('/login/validate.no',server.validate);
router.get('/login/loginout.no',server.loginout);
router.post('/add/addProject',server.addProject);
router.post('/add/addCategory',server.addCategory);
router.post('/add/addInterface',server.addInterface);
router.post('/add/step2',server.addProject);
router.post('/recive/pro',server.getPro);
router.post('/eidt/interface',server.editInterface);

module.exports = router;

在这里需要解释一点，因为是运行在服务器端，node环境本身对es6的支持还算不错，所以这里并没有用babel进行es6的转译。

router 实例本身的方法有几个，但是一般情况下，只用到了get以及post方法。方法第一个参数是一个字符串，表示请求的url路径，后面可根据业务添加多个方法。

以添加分类方法为例，第一个参数 ‘/addProject’,指的是url(即localhost:9000/addProject)
第二个参数 auth.userRequired 是一个方法，从字面上也大致能猜出来，值需要用户登录，这就相当于一个拦截器，如果用户登录了，就执行后面的一个方法，否则，就做另外一个件事情。
后面理论上可以添加N个方法，但实际上肯定不会是这样子的~。
第三个参数 site.addProject 其实也就该进行页面的渲染了。

接下来，就是关于页面如何渲染了。

页面渲染

这里就又要再去提一下app.js了，上面的代码并不全。首先，模板引擎选择的是ejs-mate.比ejs多了一个layout功能，也就是可以有最终的layout。
这个layout也就是一个最基本的架子，现在移步view这个目录下大致看一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
└── view
    ├── add
    │   ├── addCategory.html
    │   ├── addInterface.html
    │   └── addProject.html
    ├── add.html
    ├── common
    │   └── nav.html
    ├── details.html
    ├── edit.html
    ├── error
    │   └── error.html
    ├── index
    ├── index.html
    ├── layout.html
    ├── login.html
    └── static

可以看到layout.html 这个文件，这个就是那个骨架了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= topic.title %></title>
    <!--加载样式，js等-->
</head>
<body>
    <div class="container">
        <%- partial('./common/nav',{info:info,nav:nav}) %>
        <%- body %>
    </div>
</body>
</html>

页面布局是左侧导航，右侧内容的形式，引入的nav占领左边，body里面的内容，有其他的来填充。

下面来说如何进行渲染。关于html部分，建议大家参考ejs，也就只是一个普通的前端模板引擎。

以首页为例：

1
2
3
4
5
6
7
8
exports.index = function(req,res,next){
    backData.index(req,res,next).then(function(result){
        res.render('index',{topic:{title:'首页'},info:{username:req.session.username},nav:result});
    }).catch(function(err){
        logger.error(err);
        res.render('index',{topic:{title:'首页'},info:{username:req.session.username},nav:err});
    });
};

res.render() 方法来进行渲染。该方法需要两个参数，第一个是渲染的模板名称，第二个是里面所需要的数据。数据会传到页面，这个就很类似我们平时的那种数据填充了。
该示例说的是使用layout的，还可以不使用layout(有些情况下就是有这样的需求);

1
2
3
4
res.render404 = function(error){
        logger.error(error);
        return res.status(404).render('error/error',{layout: false});
    };

就比如我们渲染404或者错误页面，要这个layout确实没有什么用了吧。

到此为止，基本上一个简单的服务器，小伙伴们也可以自己动手来搭一个玩玩了。直接copy我的代码，你肯定是走不通的，程序员嘛，还是多动手动脑比较好，拿来主义并不适合我们~~