vue项目中使用Mockjs模拟数据-新闻详情

vue项目中使用Mockjs模拟数据


发布时间:2019-12-03责任编辑:满帅 浏览:538


焦煤项目中后台提供的接口数据使用mock 模拟数据,特意记录下以便下次使用。

 

首先需要安装mockjs

 

npm install mockjs —save-dev

 

如下图目录结构创建了一个version.js,用于写自动生成json数据的方法

 

 

version.js代码:

 

 1 import Mock from 'mockjs'; 

 2

 3 const listVersion = () => {

 4   let data = {

 5     respCode: 100,

 6     rows: [],

 7     total: 10

 8   };

 9

10   for (let index = 0; index < 10; index++) {

11     data.rows.push(Mock.mock({

12       versionId: '@natural',

13       versionName: '@ctitle',

14       versionNum:'@ctitle',

15       sotaAppName: '@ctitle',

16       versionStatus:'2',

17       updateTime: '@datetime'

18     }))

19   }

20   return data;

21 }

22

23 export default {

24   listVersion

25 }

 

在第一张图中index.js中写代码:

 

1 import Mock from 'mockjs' 

2 import listVersion from "./data/version";

3

4 Mock.mock(‘news/api','post',listVersion);

 

在工程入口main.js中添加引用

 

import './mock'  //这样写是会默认到mock文件夹下找index文件,执行了index.js中的Mock.mock()下面才回有数据返回

 

此时就可以在代码中用mock虚拟数据了:

 

1  this.axios.post('news/api')

2           .then((res) => {

3               console.log(res)

4           })

5           .catch((err) => {

6             console.log(err)

7           })

 

打印出的内容:

 

 

这样就可以使用mock虚拟数据了


外包组供稿