mock功能-了解mock的作用及使用场景

目标

了解mock的作用及使用场景;

mock使用场景

mock:假的

前端程序员提到的mock数据的含义是:真的假数据

  • 真的:符合接口规范要求的。

  • 假数据:数据是人为创建出来的,不是真正的业务数据。

什么时候需要mock

后端接口的开发速度跟不上前端的进度, 而前端要实现业务还必须依赖数据,前端为了保证开发进度就需要自己mock数据 ,保证业务能正常开发

mock的实现方式

  1. 本地启mock服务器:
  • 自己用express写接口
  • 本地用专门的mock服务
  1. 线上的mock服务器
  • https://www.fastmock.site/

小结

  • mock 的功能是真的假数据;

  • 可以在本地自己写接口,也可以采用web接口;

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

思路

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

目前已有的接口:http://localhost:9528/dev-api/vue-admin-template/table/list

在request.js里

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
// const service = axios.create() // 创建一个axios的实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例

创建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接口

http://localhost:9528/dev-api/news/getList

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

小结

mock是在前端中就是表示实现真接口&假数据;

本项目中已经集成了,可以直接使用;

一般在开发阶段时使用,上线之后就不会用了;

mock功能-从项目中删除mock(修改两个文件)

目标:

移除mock:由于我们本项目有配套的后端接口,所以不需要用到模拟数据,这里将mock部分删除掉。

做法有两步

  1. 注释掉**mock数据**的代码

    (1)main.js中删除(或注释)mock部分的功能

    (2)vue.config.js中删除(或注释)掉before: require(’./mock/mock-server.js’)

  2. 删除**src/mock**文件夹

注意

  • 由于修改了vue.config.js需要重启项目
  • 由于删除了mock功能,项目中原来的ajax请求会报404错误

你可能感兴趣的:(mock功能-了解mock的作用及使用场景)