前端渲染与后端渲染

直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

创建express项目的流程

安装 express-generator


$ cnpm i express-generator -g

1. 创建express 项目
   

   $ express -e 项目名称

   -e是安装 ejs 模板,支持js语法

2. 分析目录

   package.json 整个项目的依赖配置文件
   • app.js 是整个项目的入口文件
   • views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
   • routes 是整个项目的路由配置文件
   • public 静态资源文件（img css js )
   • node_modules 整个项目的依赖包
   • bin / www 整个项目的服务器配置文件

3. 启动项目 package.json 中 npm 脚本
   

   $ npm run start

4. 研究项目代码

   入口文件 app.js

//引入项目所需要的第三方包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//引入项目路由配置文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
//创建app对象，是应用级中间件
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//路由及中间件
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
//错误处理中间件，前面的所有中间件全部挂掉，错误处理中间件才会报错
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err
20000
.message;
res.locals.error = req.app.get('env') === 'development' ?         err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;