mock.js基于vue的使用

使用Mock.js在Vue项目中模拟后端数据

原创已于 2022-03-18 15:56:15 修改 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-03-18 15:55:26 首次发布

vue 专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了如何在Vue项目部署中，借助Express和Mock.js来模拟后端数据，以实现无真实后端请求时的数据展示。首先通过npm安装Mock.js，然后在server的index.js中引入并配置Mock.js，设置跨域请求处理，并定义模拟数据的路由。最后，在Vue组件中使用axios获取模拟数据并渲染到页面。这种方式对于快速开发和测试非常有用。

在上一篇使用Express部署Vue项目连接mysql，进行增删改查_李星星爱搬砖的博客-优快云博客的部署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);
      });
  },