【vue】生成接口模拟数据

2021 年 10 月 3 日
笔记
Mock.js, VUE

方案一：自定义模拟数据
方案二：自动生成模拟数据

在前端vue中使用虚拟数据模拟后端接口返回的数据，从而使得前端开发独立化。这里使用了两种方案模拟接口返回的数据。

第一种方案是自定义模拟数据，请求获得该数据。该方案是先创建要返回的json接口数据文件，通过请求获取到该json文件，从而获得其中的json数据。

第一种方案是 mockjs 自动生成模拟数据，请求获得该数据。该方案是先由 mockjs 生成随机模拟数据，设置获取到该数据的请求路径，通过该请求获取到模拟数据。

方案一：自定义模拟数据

Step1 创建json文件

在项目根目录下创建 static/mock/articleList.json ，模拟数据如下：

{
  "data": [
    {
      "id": "120484551",
      "title": "ssh连接问题（不能下载github项目）",
      "date": "2021-09-26 11:10:33",
      "link": "//blog.csdn.net/qq_35439539/article/details/120484551"
    },
    {
      "id": "120193268",
      "title": "【vue】获取异步加载后的数据",
      "date": "2021-09-09 08:37:21",
      "link": "//blog.csdn.net/qq_35439539/article/details/120193268"
    },
    {
      "id": "120193191",
      "title": "【vue】两个页面间传参 - props",
      "date": "2021-09-09 08:30:17",
      "link": "//blog.csdn.net/qq_35439539/article/details/120193191  "
    },
    {
      "id": "120073645",
      "title": "【vue】 使用 Video.js 播放视频",
      "date": "2021-09-03 08:36:50",
      "link": "//blog.csdn.net/qq_35439539/article/details/120073645"
    },
    {
      "id": "117815087",
      "title": "第三章：Git 把项目推到远程仓库",
      "date": "2021-06-11 14:15:09",
      "link": "//blog.csdn.net/qq_35439539/article/details/117815087"
    }
  ]
}

Step2 在 `vue.config.js` 中配置

需要注意的一点是，修改完这个配置后，需要重启服务器后才能成功请求。

// 本地json文件数据
let articleList = require('./static/mock/articleList.json')

module.exports = {
    devServer: {
        before(app) {
            app.get('/api/list', (req, res) => {
                console.log("vue.config.js ------------");
                res.json(articleList);
            })
        }
    }
}

下面使用2种方式请求数据：

不封装api请求数据
封装api后请求数据

方式一：不封装api请求数据

Step3 在组件中使用 (方式一)

在组件或者页面上请求获取接口数据

<script>
    export default {
         mounted() {
             // 获取文章列表
             this.axios.get("/api/list").then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

方式二：封装api请求数据

Step3 封装api (方式二)

在 src 下创建文件 api/index,js ，在这个文件中添加项目中用到的所有请求，适合项目中请求比较多的情况，方便统一管理。这个文件中使用 this.axios （也就是使用在 main.js 中的全局 axios）请求不会成功。

import axios from 'axios';

export default {
    // 获取博客列表数据
    getArticleList() {
        return axios({
            url: '/api/list',
            method: 'get',
        });
    }
}

Step4 在组件中使用 (方式二)

在组件或者页面上请求获取接口数据

<script>
    import api from "../api/index";
    export default {
         mounted() {
             // 获取文章列表
             api.getArticleList().then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

方案二：自动生成模拟数据

使用mockjs自动生成接口模拟数据。Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据

mock官网文档

Github网址

已安装 axios

npm install --save axios vue-axios

安装 mockjs

npm install mockjs

Step1 引入mock.js

在 main.js 中添加 mock.js

import './mock';  // 引入mock.js

Step2 编写模拟数据

在 src 下创建文件 mock.js ，内容如下：

import Mock from 'mockjs'  // 安装的mockjs，而不是mock.js
const Random = Mock.Random;  // 获取 mock.Random 随机对象

// 模拟一组数据
const getList = function() {
    let list  = [];
    for (let i = 0; i < 10; i++) {
        let listObject  = {
            id: Random.integer(0),  // 生成随机数，最小值是0
            title: Random.csentence(10, 30),  // 生成随机文本，字数在10-30之间
            date: Random.datetime('yyyy-MM-dd hh:mm:ss'),  // 格式化日期
            link: Random.url(),  // 生成随机网址
        }
        list .push(listObject)
    }

    return {
        data: list
    }
}
Mock.mock('/api/list', 'get', getList);
export default Mock;

Step3 在组件中使用

在组件或者页面上请求获取接口数据

<script>
    export default {
         mounted() {
             // 获取文章列表
             this.axios.get("/api/list").then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

Tags: Mock.js VUE