mockjs

模拟后端数据接口，解决前后端开发时间不一致，或者后端开发缓慢，难以获取接口问题

下载mockjs

npm i mockjs --save

使用mock

src目录下新建mock目录

目录结构如下

• src
  – mock
  —data //接口模拟数据
  ----navList.ts //举例模拟数据
  —index.ts或者indes.js

navList.ts文件

export default [
  {
    text: '首页',
    id: '0'
  },
  {
    text: '动画',
    id: '1'
  },
]

ndex.ts文件

import Mock from 'mockjs'
import navList from './data/navList'

// 频道菜单
Mock.mock(/\/navList/, 'get', () => {
  return {
    code: 0,
    result: navList
  }
})

main.ts中导入

import '@/mock/index'

组件中写方法

axios({
  url: '/navList',
  method: 'get'
}).then(res => {
  console.log(res.data)
  list.value = res.data.result
})

注意点：一旦设置了 mock 来拦截异步请求，将来异步请求会被 mock 拦截下来，在浏览器的 network 中是看不到的。

生成数据的规则

数据模板
每个属性由3部分构成：属性名、生成规则、属性值

 name: 属性名
 rule：生成的规则
 value：属性值
'name|rule': value

数据占位符

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})