如何使用express构建项目，以及打造接口

1. express通过生成器 【 脚手架 】

1. 作用： 可以帮助我们快速构建一个express项目
2. 脚手架的安装
   • 全局安装 [ 可以使用npm、cnpm ]
     • $ cnpm i express-generator -g
   • npx安装
     • npx是npm的一个管理工具，它可以让我们不全局安装就使用某一个包
     • npx好处就是可以帮助我们减少使用内存
     • 但是npx要求npm的版本在5.2以上
     • npx是npm会自动携带
3. 脚手架的使用

• 全局安装的使用
  • express -e 项目名称
• npx的使用
  • npx express -e 项目名称

4. 认识项目目录结构
   • 1. 先找package.json [ 记录了项目的依赖包信息，npm脚本 ]
   • 2. 找到了项目启动文件 bin/www
     • 它是通过http来做了一个服务器，默认端口是：3000
     • 这个文件中引入了一个app文件，这个文件是将createServer中的回调函数放到了外面，以模块化的形式使用的，这个文件我们叫它： ‘入口文件’
   • 3. 看： app.js
     • express是由路由和中间件构成的
       • 路由： 可以完成页面的连接或是接口的打造
       • 中间件： 中间件是一个函数，一个具有特定功能的函数
         • 中间件有三个类型
           • 1. 应用级中间件
           • 2. 路由中间件
           • 3. 错误处理中间件
         • 中间件的参数
           • req : 全称： request 表示请求
           • res : 全称： response 表示响应
           • next: 表示request和response之间的连接 ， 相当于桥梁的作用
             • next如果断开，那么请求和响应就会中断 next( false )
         • 中间件要想调用，必须通过app的use方法来调用
   • 4. 路由中间件
     • 路由中间件人家是以模块化的形式使用
     • 看： routes/xx.js
       • 有两个路径，这两个路径会拼接在一起
         • 举例： /home /banner /home/banner 二级路由
       • 为什么res.render(‘index’)
         • 配置了模板的路径
         • 配置了后缀名省略
   • 5. 看： view/xxx.ejs
     • ejs语法
     • ejs文件中可以直接在模板语法中使用数据
   • 6. 手动打造一个express的使用流程
        1. 在routes里建一个home.js
        2. 去app.js里引入这个模块
        3. 回到home.js渲染页面（渲染前端页面只用get）requder.get(’/’,function(req,res,next){res.render(‘home’,{data}) })
        4. 页面复制到public里
        5. 获得数据渲染页面时要注意数据类型的转换
   • 7. ejs语法学习
     • 注意： ejs语法符号是不能换行的
     • 非转义输出 <%- %> 可以解析xml类型数据
     • 转义输出 <%= %> 可以解析普通类型数据
     • 流程控制 <% %>
       • if条件语句
       • 循环语句

通过express来打造api服务器【 后端接口 】

1. 步骤
   1. 通过脚手架搭建项目
   2. 创建接口
      • 接口就是路由
      • 接口的打造需要遵循一个规则： restful api
      • 很久以前接口时这样的

        // 商品列表
         http://localhost:3000/shop/query   查询 
         http://localhost:3000/shop/add     添加一个商品
         http://localhost:3000/shop/delete  删除一个商品
         http://localhost:3000/shop/update  修改一个商品
      

      • 现在流行的是什么呢？

        // 现在流行的是  接口只有一个，但是数据请求方式多个 
      
         http://localhost:3000/shop
            get请求    查询
            post请求   增加一个商品
            delete请求 删除一个商品
            put 请求   修改一个商品信息
      

      • put delete 其实底层还是get

              /* 
         这里的路由将作为将来的后端接口
       */
       
       const express = require( 'express' )
       
       const router = express.Router() 
       
       
       //接下来我们打造接口 ,使用restful api
       
         router.route('/position')
           .post((req,res,next) => {
             res.render('position',{
               data: JSON.stringify({
                 info: 'post',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .delete((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'delete',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .put((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'put',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .get((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'get',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
       
       
       module.exports = router 
      

• 3. 接口测试
  • 1. 使用测试用具来测试
    • postman
    • insomina [ 安装无要求，一路next ]
    • 数据是对象的话需要JSON.stringify()才能正常显示
  • 2. 前端进行接口数据请求
    • Front End 前端 FE
    • Back End 后端 BE
    • 前端： http://127.0.0.1:5500/day03/code/1-express/02_front_end/index.html
    • 后端： http://localhost:3000/position
    • 跨域问题解决【 后端做 】：
      • 设置请求头 【 php java node 】
      • res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
        • put 没有实现跨域
        • delete 没有实现跨域
        • get 可以
        • post 可以
      • 使用中间件 cors [ 第三方模块 ]
      • 在npm官网查看方法,在app.js中配置

          var cors = require('cors');
      
           app.use(cors({
          "origin": "*",
          "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
          "preflightContinue": false,
          "optionsSuccessStatus": 204
      }))
      

    • 总结： 跨域
      • 前端跨域【 前端做 】
        • jsonp
        • 反向代理
      • 后端跨域
        • 设置请求头
        • cors中间件跨域
• 4. 反向代理原理
  • 在前端服务器中短暂的开启一个后端，让这个后端帮助我们请求数据，然后在返回给前端。使用一个叫做 request 的模块进行数据请求