后端渲染和前端通信

node.js

1. Node.js的框架 express

   • 使用express构建静态服务器[ 后端渲染 ]
   • 使用express构建api服务器【 接口 】

2. 前端通信【 socket 】

   • Node中完成通信功能
   • 扩展： H5的 webSocket 实现通信功能

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的使用流程
   • 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

• 3. 接口测试
  • 1. 使用测试用具来测试
    • postman
    • insomina [ 安装无要求，一路next ]
  • 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 】
        • put 没有实现跨域
        • delete 没有实现跨域
        • get 可以
        • post 可以
      • 使用中间件 cors [ 第三方模块 ]
    • 总结： 跨域
      • 前端跨域【 前端做 】
        • jsonp
        • 反向代理
      • 后端跨域
        • 设置请求头
        • cors中间件跨域
• 4. 反向代理原理

---

前端通信

1. 通信有两个端
   • 服务端
   • 客户端
   • 举例：QQ / 微信
     • 每个人手中的qq和微信都是客户端
     • 腾讯这边有服务器主机

1. Node.js中提供的通信方案
2. 扩展： H5提供的通信方案
   例：

   //服务端
    const net = require('net')
   const PORT = 5000
   let count = 0
   const clients = {}
   //创建服务器
   const server = net.createServer()
   //链接客户端
   server.on('connection', (client) => {
   client.name = ++count
   clients[client.name] = client
   client.on('data', (msg) => {
       console.log(msg.toString())
     })
   })
   server.listen(PORT)
   
   
   
   //客户端
   const net = require('net')
   
   const socket = new net.socket()
   
   const PORT = 5000
   
   const HOST = '127.0.0.1'
   
   socket.connect(PORT, HOST, () => {
    socket.write('我上线了')
   })