基于nodejs的前后端分离--初始化

先把项目的基本架子搭起来,工欲善其事必先利其器!

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
└── myapp
    ├── app.js                  //入口文件
    ├── bin
    ├── common                  //公共方法
    ├── config.js               //配置文件
    ├── controllers             //C层
    ├── middlewares             //自定义中间件
    ├── node_modules            //依赖
    ├── package.json            //不用多说这个东西了吧
    ├── public                  //静态资源
    ├── views                   //view层
    └── web_router.js           //路由

package.json

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{
  "name": "mzNode",
  "version": "2.1.1",
  "private": true,
  "main": "app.js",
  "description": "A project base on NodeJs",
  "repository": "",
  "dependencies": {
    "async": "1.5.2",
    "bcryptjs": "2.3.0",
    "body-parser": "1.15.0",
    "bytes": "^2.2.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "connect-busboy": "0.0.2",
    "connect-redis": "3.0.2",
    "cookie-parser": "1.4.1",
    "cors": "2.7.1",
    "csurf": "1.8.3",
    "data2xml": "1.2.4",
    "ejs-mate": "2.3.0",
    "eventproxy": "0.3.4",
    "express": "4.14.0",
    "express-session": "1.12.1",
    "helmet": "1.3.0",
    "ioredis": "1.15.1",
    "jpush-sdk": "3.2.1",
    "loader": "2.1.1",
    "loader-builder": "2.4.1",
    "lodash": "4.16.2",
    "log4js": "^0.6.29",
    "markdown-it": "6.0.0",
    "memory-cache": "0.1.4",
    "method-override": "2.3.5",
    "moment": "2.15.2",
    "mongode": "^0.1.6",
    "mongoose": "4.4.9",
    "multiline": "1.0.2",
    "node-uuid": "1.4.7",
    "nodemailer": "2.3.0",
    "nodemailer-smtp-transport": "2.4.0",
    "oneapm": "1.2.20",
    "passport": "0.3.2",
    "passport-github": "1.1.0",
    "pm2": "1.1.1",
    "qn": "1.1.1",
    "ready": "0.1.1",
    "request": "2.74.0",
    "response-time": "2.3.1",
    "superagent": "1.8.2",
    "utility": "1.6.0",
    "validator": "5.1.0",
    "xmlbuilder": "7.0.0",
    "xss": "0.2.10"
  },
  "devDependencies": {
    "errorhandler": "1.4.3",
    "express-layout": "^0.1.0",
    "istanbul": "0.4.2",
    "loader-connect": "1.0.1",
    "mm": "1.3.5",
    "mocha": "2.4.5",
    "nock": "7.5.0",
    "pedding": "1.0.0",
    "redis": "^2.6.5",
    "should": "8.3.0",
    "supertest": "1.2.0"
  },
  "scripts": {
    "start": "node ./app.js"
  }
}

启动程序

1
npm run start

在app.js 文件中指定的端口是9000,可以直接地址栏输入localhost:9000,我这里是nginx反向代理到本地,也只是当初问了尝试nginx

模板选择

app.js中可以引入app实例并设置模板引擎,因为使用的是express,默认的模板引擎是jade,但是个人不太喜欢那个模板,所以用了ejs,跟后台用的
freemarker有点类似。

1
2
3
4
5
app.set('views',path.join(__dirname,'views'));
app.set('view engine','html');
app.engine('html',require('ejs-mate'));
// app.locals._layoutFile = 'layout.html';
app.use(layout());   //引入了layout模块,原来使用上面那句发现在模板使用的过程中有一个小bug,故引入该木块

路由

在app.js中,添加了错误处理方法,以及404

1
2
3
4
5
6
7
8
var webRouter = require('./web_router');
app.use(errorPageMiddlewares.errorPage);
app.use('/',webRouter);
app.use('/*',function(req,res){
   if (!res.headersSent) {  //这里也是个小坑,在后面进行解释
      res.render404();
   }
});

为了让app.js稍微好点看,把路由这一块单独拉出去处理了。
web_router.js,只是为了搭建子,所以先随便定义了几个路由处理

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var router = express.Router();
var site = require('./controllers/site');
//首页
router.get('/',site.index);
//列表
router.get('/list',site.list);
//安全中心
router.get('/safe',site.safe);
//个人中心
router.get('/user',site.user);

统一在C层进行路由控制,以及模板渲染

模板渲染

1
2
3
4
exports.list = function(req,res,next){
    res.render('list',{title:'投资列表',topic:{title:'投资列表'}});
    next();
};

一个渲染的小例子,具体可参考官方文档,这样会更准确一点。

服务启动

1
2
3
4
app.listen(config.port,function(){
   console.log('app is running at 9000 port!');
   console.log('you can use Ctrl + C to stop it!');
});

这段代码,貌似真的没有多讲的,如有不懂,自行google。