mock功能-使用项目中的mock功能

目标

写一个获取新闻列表的接口。url： /news/getList

思路

分析现有的代码功能，仿写一个。

创建mock文件

在mock目录下创建一个news.js文件 

仿照table.js的写法，写入news.js的内容如下

module.exports = [
  {
    url: '/news/getList',
    type: 'get',
    response: config => {
      return {
        code: 20000,
        data: ['第一条新闻', '第二条新闻', '第三条新闻']
      }
    }
  }
]

引用mock文件 

 在mock/index.js中，引入news.js

const Mock = require('mockjs')
const { param2Obj } = require('./utils')

const user = require('./user')
const table = require('./table')
+ const news = require('./news')

const mocks = [
  ...user,
  ...table,
+ ...news
]

 重启项目

调用mock接口

由于上面写的是get类型的接口，可以直接通过在地址栏中地址来访问。

在项目中的组件中正常使用ajax发请求即可，或者采用测试工具来做测试

小结：

1. mock是在前端中就是表示实现真接口&假数据；
2. 本项目中已经集成了，可以直接使用；
3. 一般在开发阶段时使用，上线之后就不会用了；