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

ejs模板语法

<% %>'脚本' 标签，用于流程控制，无输出。
<%= %>输出数据到模板（输出是转义 HTML 标签） （ 不会编译html标签）
<%- %>输出非转义的数据到模板( 会编译html标签 )
<% -%>输出的内容会自动带有HTML标记的缩进

什么是流程控制？

1. 条件判断
   • if
2. 循环控制
   • for
   • forEach …
   • while
   • do…while

前端渲染VS后端渲染

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

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

3. 后端模板

   • ejs
   • pug( jade )
   • art-template

4. 现在流行的： 前端渲染

5. 当前后端同时进行项目开发时，后端数据接口没有写好，但是前端却需要这个接口，有何方法解决？

   • 分析： 需要一段数据
   • 解决： 模拟假数据（ mock数据：json-server/mock.js ）
   • 这种形式叫做 ： 前后端架构分离

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

7. Node.js做项目时的两种选择

   • 前后端分离 ：后端提供接口，前端渲染
   • 前后端耦合： 后端渲染

8. 后端通过一个模板（ 兼容html ） + 后端模板语法 ----》 html ----》 发送到前台
   这种类型项目我们叫它 ‘ 前后端不分离的项目’

9. 面对前后端不分离的项目的做法：

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

express创建api服务器（ 接口 ）

api服务器需要使用测试用具来测试，不能用浏览器展示

1. 总结： api服务器就是给前端打造接口
2. 注意： 后端工程师给前端工程师发送的接口数据类型是一个json类型的字符串时，前端工程师需要用 JSON.parse() 转换

restful api 规则 （ 暴露接口的规则 ）

1. 对一个的数据的操作使用过多接口所造成的冗余可以使用 restful api 的规则
2. restful api 概念：一个接口用不同数据请求方式来暴露
3. 数据请求方式
   • get
   • post
   • delete
   • put
   • options
   • head
4. 总结：
   • 使用restful api 来暴露接口（ 多个数据请求的接口 ）
   • cors中间件解决跨域
   • 前端发来的数据， 后端如何接受
     • get req.query
     • post req.body

api接口暴露的方式

1. express中一个路由即一个接口

2. 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
        })
    })

后端接口文档 ( 模板来写 )

https://www.showdoc.cc/