Mockjs+expess模拟后端数据+vue跨域处理

阅读本文章需要注意以下几点:

• 文章不主要介绍Mockjs的使用语法
• 文章暂不涉及Mockjs的第三方封装框架
• 文章会结合以往做过上线项目的方式总结

想主要介绍如何使用Mockjs,解决入门Mockjs的新人使用的一些疑惑

npm install mockjs --save-dev

.1 针对个人练手项目

直接在需要使用的目录里面：

import Mock from "mockjs";

this.aaa = Mock.mock({ "string|1-10": "★", });

就可以看到aaa里面mock的数据了

2.2 针对实际项目

那么当然需要用node来启动服务, 那么我们就创建一个MockServer.js文件,当作是我们的入口.

npm install express

let express = require('express');   //引入express
let Mock = require('mockjs');       //引入mock
let app = express();     

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
//实例化express

app.use('/mode2/DataOne',function(req, res){
    res.json(Mock.mock({
        'status': 200,
        'dataSource|1-9':[{
            'key|+1': 1,
            'mockTitle|1':['000'],
            'mockContent|1': ['222', '333', '444', '555', '666'],
            'mockAction|1': ['aaa', 'bbb', 'ccc']
        }]
    }))
})

app.listen('8090', () => {
    console.log('监听端口 8090')
})

node .\MockServer.js

cmd通过这行命令运行代码

代码第5-11行为后端允许跨越代码，这里要记住，待会我们注释掉通过前端处理跨域

这时候我们直接浏览器打开http://localhost:8090/mode2/DataOne 就可以看到数据了

在app.vue文件里请求数据：

npm install axios --save-dev

import axios from 'axios'//引入axios

mounted() {
    axios.get("http://192.192.192.192:8090/mode2/DataOne").then((res) => {
      console.log("res", res);
      this.res = res;
    });
}

就能看到数据了

下面来说说前端处理跨域

把后端允许跨域那几行注释掉， 注意要重新 node .\MockServer.js 运行代码才能生效

此时浏览器还能直接打开 http://localhost:8090/mode2/DataOne 但是vue项目里，浏览器控制台已经显示跨域报错了

这时需要在vue跟目录下新建 vue.config.js 内容如下

module.exports = {
  // pabulicPath:process.env.NODE_ENV === 'production' ? '' : '',
  devServer:{
      host:'0.0.0.0',
      port:'8111',  // vue项目启动端口
      // https:false,
      open:true,
      //以上的ip和端口是我们本机的;下面为需要跨域的
      proxy:{ //配置跨域
          '/api':{
              target:'http://192.192.192.192:8090/',
              ws:true,
              changeOrigin:true,//允许跨域
              pathRewrite:{
                  '^/api':''   //请求的时候使用这个api就可以
              }
          }
      }
  }
}

然后在app.vue文件中把之前的

axios.get("http://192.192.192.192:8090/mode2/DataOne").then((res) => {
  console.log("res", res);
  this.res = res;
});
// 改成下面
axios.get("api/mode2/DataOne").then((res) => {
  console.log("res", res);
  this.res = res;
});

就可以拿到数据了

欢迎 关注 点赞