mock.js基于vue的使用

在上一篇使用Express部署Vue项目连接mysql，进行增删改查_李星星爱搬砖的博客-CSDN博客的部署vue项目的基础上添加新的内容，如果没有后端请求数据，可以使用mock.js进行模拟数据

mock.js官方文档

1.下载mock.js

npm install mockjs

2.在server文件夹下的index.js中添加代码

let Mock = require('mockjs'); //引入mock
/*为app添加中间件处理跨域请求*/
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();
});


app.all('/test.action', function (req, res) { //指定路径
    res.json(Mock.mock({
        "status": 200,
        "userInfo|10": [{
            name: "@cname",
            email: "@email",
            msg: '@cparagraph(2)',
            color:"@color",
            image:"@image"
        }]
    }));
});

3.在helloworld.vue中添加代码即可

可以通过data去渲染想要的页面

created() {
    axios
      .get("http://localhost:8888/test.action")
      .then((res) => {
        console.log(res);
      })
      .catch(function (error) {
        console.log(error);
      });
  },