前后端渲染对比及API接口暴露

前端异步流程工具

PromiseGenerator函数Async函数Node.js 提供的 nextTick第三方的async.js

前端原生js提供的数据请求有两种

ajaxfetch

前端渲染 vs 后端渲染

前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染

后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端

后端模板 ejspug( 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 模板

分析目录

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

启动项目

package.json 中 npm 脚本 $ npm run start

研究项目代码

入口文件

express 中间件 （Middleware）

中间件是一个函数,函数中参数有三个：

request 请求response 响应next 请求和响应中间的循环流程

中间件有三种类型

应用级中间件路由中间件错误处理中间件

前端的请求方式

getpostputdeleteheadall

以上前端的请求方式统称为： restful api

restful是一个规则，这个规则规定了数据接口的使用原则问题：如果能有一个接口来表示不同的请求功能，那会怎么样呢？解决： restful api 这个规则

问题： 如果遇到了前后端不分离的项目， 你怎么做？

找后端，搭建项目启动的环境找后端模板引擎 （ 找类似于 view 这样的目录 ）找静态资源文件目录找对应性文件， index.ejs index.css看效果改js 看效果改css

api接口暴露

测试接口是否正常，我们可以使用测试工具：postman insomnia

BE: BackEnd 后端

express中一个路由即一个接口

api接口暴露的方式有两种：

第一种： 使用模板进行暴露，但是要将数据做字符串转换，然后使用ejs的非转义输出 router.get('/',function( req,res,next ) { res.render('mine', { mine: JSON.stringify({ ret: true, username: 'yyb', password: 123 }) }) }) 第二种： 使用json() router.get('/',function( req,res,next ) { res.json({ ret: true, username: 'yyb', password: 123 }) })