vue项目中使用mock

---

前言

当后端接口还没有开发完毕的时候，我们又急需一份数据来展示看效果时应该怎么办呢？这时我们可以根据后端提供给我们的接口文档，来弄一份真的假数据来协助我们完成前端开发工作，一起来看看如何实现吧~

---

一、mock

1. 什么是mock?

mock：假的

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

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

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

2. 使用场景

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

3. 实现方式

本地启mock服务器：

• 自己用express写接口
• 本地用专门的mock服务

线上的mock服务器: mock

二、vue项目中如何使用？

1. 步骤

• 安装依赖
  项目根目录下打开任意终端，执行命令：npm install mockjs axios

• src文件夹下新建mock文件夹，新建index.js文件

• main.js中引入mock

• 任意.vue结尾的文件中使用

2. 代码演示

代码如下（示例）：

mock/index.js中

//引入mock模块
import Mock from 'mockjs'

// const data = Mock.mock({
   
//   'string|4': 'yx！'
// })
// console.log(data)

// Mock.mock('/api/get/user', 'get', () => {
   
//   return {
   
//     status: 200,
//     message: '获取新闻列表数据成功'
//   }
// })

// Mock.mock('/api/post/user','post',()=>{
   
//   return {
   
//       status: 200,
//       message: '添加新闻列表数据成功'
//   }
// })

const data = Mock.mock({
   
  'list|20-60': [
    {
   
      id: '@increment(1)',
      title: '@ctitle',
      content: '@cparagraph',
      add_time: '@date(yyyy-MM-dd hh:mm:ss)'
    }
  ]
})

// 删除
Mock.mock('/api/delete/news', 'post', options => {
   
  let body = JSON.parse(options.body)
  const index = data.list.findIndex(item => item.id === body.id)
  data.list.splice(index, 1)
  return {
   
    status: 200,
    message: '删除成功',
    list: data.list
  }
})

// 添加
Mock.mock('/api/add/news', 'post', options => {
   
  let body = JSON.parse(options.body)

  data.list.push(
    Mock.mock