前端渲染与后端渲染

前端渲染 vs 后端渲染
前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
后端模板
ejs
pug( jade )
art-template
现在流行的： 前端渲染

问题： 当前后端同时进行项目开发是， 后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
分析： 需要一段数据
解决： 模拟假数据（ mock数据 json-server / mock.js ）

以上这种形式叫做 ： 前后端架构分离

很久以前，没有前端岗位的， 所有的网页都需要后端完成， 那个时候的情况我们称之为： 前后端耦合

Node.js做项目的时候 ，就有两种选择了

前后端分离 ：后端提供接口，前端渲染
前后端耦合： 后端渲染
直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

创建express项目的流程

安装 express-generator
$ cnpm i express-generator -g

创建express 项目
$ express -e 项目名称 -e是安装 ejs 模板,支持js语法

分析目录

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

研究项目代码

入口文件 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.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;