前端异步流程工具
- Promise √
- Generator函数
- Async函数 √
- Node.js 提供的 nextTick
- 第三方的async.js
前端原生js提供的数据请求有两种
- ajax
- fetch
gulp 4.x
- 多任务执行
- 串行
- 并行
前端渲染 vs 后端渲染
-
前端渲染是通过ajax请求数据,然后通过js语法将数据展示到页面中,称之为前端渲染
-
后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
- 后端模板
- ejs
- pug( jade )
- art-template
- 后端模板
现在流行的: 前端渲染
问题: 当前后端同时进行项目开发是, 后端数据接口没有写y好,但是前端却需要这个接口,这个时候怎么办?
分析: 需要一段数据
解决: 模拟假数据( 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 请求和响应中间的循环流程
中间件有三种类型
- 应用级中间件
- 路由中间件
- 错误处理中间件
前端的请求方式有几种?
- get
- post
- put
- delete
- head
- all
以上的请求方式统称为: restful api
restful是一个规则,这个规则规定了数据接口的使用原则
举例:
http:localhost:300/shopcar/add
http:localhost:300/shopcar/delete
http://localhost:300/shopcar
想: 如果能有一个接口来表示不同的请求功能,那会怎么样呢?
解决: restful api 这个规则
http://localhost:300/shopcar
get
post
put
delete
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 }) })