前后端分离(蜗牛学苑06完结)-moment时间，RESTful，HTTP请求类型，同源及跨域，跨域的解决方法（jsonp，Cors，代理服务器），中间层转发请求，学生管理系统代码及教程地址

1、后端获取时间

下载 moment插件

npm i moment

在studentsModel.js上增加一个time字段
1、studentsModel.js

//数据集合的相关配置
//1、定义数据集合的结构：定义集合中数据有哪些属性，属性的值是什么类型（数据库结构）
//解构出mongoose的Schema方法来，这个方法用来操作集合的
const { Schema,model }=require('mongoose')
//引入时间模块moment
const moment=require('moment')
//通过构造函数创建集合的结构
const studentsSchema=new Schema({
  name:String,
  age:String,
  gender:String,
  imageName:String,
  time:{
    type:String,
    //default:'2020-10-27 10:30'
    default:moment().format('YYYY-MM-DD HH:mm:ss')
  },
  //用于关联classes集合
  classId:{
    type:Schema.Types.ObjectId,
    //ref用于设置要关联的集合的模型名称
    ref:'classesModel'
  }
},{versionKey:false})

//2、定义数据集合的模型：将schema和数据库中的集合关联起来
//model需要三个参数：模型名称，schema名称，数据库中的集合名称
const studentsModel=model('studentsModel',studentsSchema,'students')

//向第三层dao层暴露model数据
module.exports.studentsModel=studentsModel

2、RESTful的使用

REST：表现成状态转换，实际是一种接口的命名规范

RESTful 中的 REST，不是“rest”，是 Respresentational State Transfer 的缩写，翻译过来理解为“表现层状态转换”，其实就是一种接口设计风格。简单来说，就是换一种新的风格去设置前后端连接的 URL 和请求类型。

url定义请求的名称
type定义请求的操作

3、 HTTP 请求类型

在 RESTful 中，建议使用以下四种请求类型来描述对资源的操作：

1. GET：获取资源
2. POST：新增资源
3. DELETE：删除资源
4. PUT：修改资源

4、 同源及跨域

同源策略

同源策略，是浏览器端的一个安全策略。该策略要求：当我们在一个源（域）中，向另一个源（域）发起请求时，两个源之间的协议、IP、端口三者必须一致，则为同源。

如果协议、IP、端口三者中，有一个不一致，则为行为跨域。浏览器在默认情况下，是不允许跨域的。一旦跨域，浏览器就会出现以下报错：

跨域

“域”，可以理解通过访问或请求的地址。域的组成包括以下几个部分：

• 协议：http、https
• IP
• 端口号

http://www.woniuxy.com/tc
协议 + IP + 端口号

5、 跨域的解决方法-jsonp

• JSONP
• Cors
• 代理服务器

1、JSONP
前端在 jQuery 的 ajax 中添加一个 dataType 属性，值为 jsonp：

$.ajax({
    url: 'http://localhost:3000/students/getStudents',
    type: 'get',
    dataType: 'jsonp',
    success(msg) {

    }
})

在 Nodejs 的后端，将 res.send() 改成 res.jsonp()：

router.get('/getStudents', async function (req, res) {
    const data = await getStudents(req.query);
    res.jsonp(data);
})

缺点：JSONP 的方式只能处理 GET 请求类型的跨域。

原理：在 HTML 中，<script>、<img>、<link> 是天生就支持跨域的，JSONP 的原理就是利用了 <script> 标签来实现的 ajax 数据获取。

6、 跨域的解决方法-Cors

CORS 解决跨域的方式，是在服务端进行设置：
app.js

var allowCrossDomain = function (req, res, next) {
    // 设置允许哪一个源（域）可以进行跨域访问，* 表示所有源
    res.header("Access-Control-Allow-Origin", "*");
    // 设置允许跨域访问的请求头
    res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization");
    // 设置允许跨域访问的请求类型
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    // 设置允许 cookie 发送到服务器 
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
};
app.use(allowCrossDomain); // 使用该中间件

7、 跨域的解决方法-代理服务器（node中间层）

8、中间层转发请求–直接转发

转发请求

前端发送 ajax 请求到代理服务器，代理服务器需要将该请求再转发到目标服务器，转发的方式分为两种：

1. 请求到达代理服务器后，直接转发至目标服务器；
2. 请求到达代理服务器后，在代理服务器中进行额外的操作（例如：数据加密），然后再将请求转发至目标服务器；

直接转发

先下载需要用到的依赖包 http-proxy-middleware：

npm i http-proxy-middleware --save

const options = {
    target: 'http://localhost:3000', // 目标服务器的地址
    changeOrigin: true,
    pathRewrite: {// /api/users/login
        '^/api': '/'
    }
}

将以上配置应用到服务器中：

const { createProxyMiddleware } = require('http-proxy-middleware');

const options = {
    target: 'http://localhost:3000', // 目标服务器的地址
    changeOrigin: true,
    pathRewrite: {// /api/users/login
        '^/api': '/'
    }
}

app.use('/api', createProxyMiddleware(options));

9、中间层转发请求–间接转发

下载模块包

npm i request-promise request --save

前端发送请求时，URL 不需要加 /api，我们让请求进入到代理服务器的第一层表现层。

接下来我们就可以在表现层中做自己的一些额外处理的操作，操作完成后，再通过以下代码将请求转发到目标服务器：

const rp = require('request-promise');

const data = await rp({
    uri: 'http://localhost:3000/users/login',   // 目标服务器的接口地址
    method: 'post',  // 请求类型
    body: { username, password },  // 参数
    json: true  // 数据传输的格式为 json 格式
});
console.log(data);
res.send(data);

data 接收到的就是目标服务器 res.send() 的结果，然后在代理服务器，我们可以对 data 再进行处理，最后再通过 res.send() 返回给前端。

10、案例代码下载和教程地址

教程b站地址

源码csdn地址