Node.js（express构建静态服务器、构建api服务器）

Node.js的框架–express(day3)

1.使用express构建静态服务器[ 后端渲染 ]

• express通过生成器 【 脚手架 】

• **脚手架的安装：**全局安装 [ 可以使用npm、cnpm ]

  $ cnpm i express-generator -g

• npx安装：

  1.npx是npm的一个管理工具，它可以让我们不全局安装就使用某一个包 2.npx好处就是可以帮助我们减少使用内存

  3.但是npx要求npm的版本在5.2以上

  4.npx是npm会自动携带

• 脚手架的使用：全局安装创建项目：express -e 项目名称

  ​ npx安装创建项目：npx express -e 项目名称

• **app模块步骤含义：**即认识项目目录结构

  1.express是由路由和中间件构成的

  路由： 可以完成页面的连接或是接口的打造（通俗一点，就是点一个链接跳到对应的页面或者接口）

​ 中间件： 中间件是一个函数，一个具有特定功能的函数

​ 中间件有三个类型：应用级中间件，路由中间件，错误处理中间件

​ 中间件要想调用，必须通过app的use方法来调用

[外链图片转存失败(img-BImXMuWk-1566393967105)(C:\Users\戴尔\AppData\Roaming\Typora\typora-user-images\1566023245917.png)]

​ 中间件的参数：

​ req : 全称： request 表示请求；

​ res : 全称： response 表示响应；

​ next: 表示request和response之间的连接 ， 相当于桥梁的作用

router.get('/home',function (req,res,next){
  res.render('home',{ 
    data: {
    }
  })
})

• 实际操作

1.创建一个express项目

2.在router文件中创建一个路由js文件

const express = require('express') 引入express模块
const router = express.Router() 定义路由
moudle.exports = router 导出路由

3.渲染页面到前端只能用get

router.get('/',function(req,res,next){
router.send('home.ejs',{
data:()
})
})

• ejs语法：
  • 注意： ejs语法符号是不能换行的
  • 非转义输出 <%- %> 可以解析xml类型数据
  • 转义输出 <%= %> 可以解析普通类型数据
  • 流程控制 <% %> if条件语句，循环语句

2.使用express构建api服务器（接口）

• 步骤：

  1.通过脚手架搭建项目

  2.创建接口：接口就是路由；接口的打造需要遵循一个规则： restful api

   http://localhost:3000/shop
        get请求    查询
        post请求   增加一个商品
        delete请求 删除一个商品
        put 请求   修改一个商品信息
        put   delete   其实底层还是get
  

  3.接口测试：使用测试工具：postman，insomnia

• 前端进行接口数据请求

  前端：

  $('button').on('click',function () {
      $.ajax({
        url: 'http://localhost:3000/position',
        method: 'post',
        success: function ( res ) {
          console.log( JSON.parse(res) )
        }
      })
    })用ajax请求
    用一个插件live server短暂的开启一个静态服务器来展现这个网页
  

  后端：

  将一个路由作为后端的接口，引入express，创建路由，导出路由
  在routes文件夹打造接口用restful api规则，在views文件夹建立ejs文件体现得到的data数据，用insomnia测试工具；
  打造完成之后在app中定义这个接口路径，并app.use使用这个接口
  

• 违背同源策略会产生跨域问题（从后端来解决的角度看）

  1.设置请求头实现跨域

  router.route（'/').post((req,res,next)=>{
  res.setHeader('Access-Control-Allow-Origin','*')
  res.render('.ejs',{
  data:JSON.stringify({})   这里为什么要把对象转变成字符串呢
  })
  })
  原因：首先联想到从前端进行ajax请求获取的是json字符串往往需要进行parse转成json对象，那么同样的，后端拿到应该是json字符串，所以在这里要把对象转成字符串；
  
  设置请求头对get与post有效，对put和delete无效，因此遇到这种情况要使用第二种方法使用第三方模块cors。
  

  2.使用cors

  首先要npm i cors 安装模块
  在app.js文件中较上部位设置引入这个模块var cors = require( 'cors' )
  统一设置跨域：
  app.use(cors({
    "origin": "*",
    "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
    "preflightContinue": false,
    "optionsSuccessStatus": 200
  }))
  

  3.跨域总结：

  前端跨域用jsonp和反向代理；后端跨域用设置请求头和cors中间件跨域

  何为反向代理： 反向代理原理

  ​ 概念： 在前端服务器中短暂的开启一个后端，让这个后端帮助我们请求数据，然后在返回给前端

  使用一个叫做 request 的模块进行数据请求

   const request = require( 'request' )
   const express = require( 'express' )
   const app = express()
   const port = 5000 
   const hostname = 'localhost'
  app.get('/user',(req,res,next) => {
      res.setHeader('Access-Control-Allow-Origin','*')
      request('这里是你想要获取数据的网站地址',(error,response,body) => {
        res.json( JSON.parse(body) )
       })
  })
  app.listen( port,hostname,() => {
     console.log(`接口服务器为： http://${ hostname }:${ port }`)
   })
   以上就是短暂的开启了一个后端，同样的，如果没有用路由express创建一个静态服务器的话，还是用live server来正常显示网页
   
  ***如果把网页内容写入ejs中，并通过新建一个路由接口来显示，此时就不存在跨域问题了
  
  

前端通信【socket】

1.Node中完成通信功能

通信有俩个端：服务端和客户端

以上就是短暂的开启了一个后端，同样的，如果没有用路由express创建一个静态服务器的话，还是用live server来正常显示网页

***如果把网页内容写入ejs中，并通过新建一个路由接口来显示，此时就不存在跨域问题了

## 前端通信【socket】

### 1.Node中完成通信功能

通信有俩个端：服务端和客户端

### 2.H5的webSocket实现通信功能