在vue项目中使用mock

---

前言

作为一个成熟的前端大可爱，我们可要栗志摆脱对哦后端的依赖，我们受够了后端带来的乱七八糟的过鬼东西啦，我们要自立，那么mock.js是我们的第一步了。想写出一个漂漂亮亮的页面或练习，却苦与没有后端俩对接没有数据。只些都不用烦恼啦。用mock.js我们就能模拟出接口给我们的数据。下面我们来学习一下吧！

---

一、开始

1.安装

首先肯定是要先安装好，导入mock.js这模块啦。

//生成随机的数据
npm install mockjs --save-dev

接下来我们要告诉项目中使用mock，就像我们使用element ui一样的。

2.创建

接下来我们创建一个叫mock的文件夹便于我们的管理。我们把它创建在src目录下，接着我们创建一个index.js
文件作为入口。如图：在index.js文件中，我们写入下面内容：

//导入mock
import Mock from 'mockjs'
//导入分类管理的mock数据
import categoryAPI from './category'
import complaintAPI from './complaint'
import userAPI from './user'

// 拦截ajax请求，配置mock的数据

//        接口里的地址   请求方式    mock中对应的返回

//分类管理
//分类管理-获取全部
Mock.mock(/\/shixun\/category/, 'get', categoryAPI.CategoryList)
//分类管理-删除
Mock.mock(/\/shixun\/category\/delete/, 'get', categoryAPI.CategoryDelete)
//投诉管理
Mock.mock(/\/shixun\/complaint\/multi/, 'post', complaintAPI.ComplaintList)
//用户管理
Mock.mock(/\/shixun\/user\/multi/, 'post', userAPI.userList)

export default Mock

在这里就链接起来了我们和后端对接的请求接口，把它的请求数据改到我们定义的mock数据里

3.创建Mock数据

下面我们来为category这个页面创建category的mock数据吧！！

import Mock from 'mockjs'

const List = []
const num = 10

for (let i = 0; i < num; i++) {

    List.push(Mock.mock(
        {
            'categoryName|1': ['语文', '数学', '英语', '计算机编程', '前端学习', '可视化教程', 'C++编程', 'java教程'],  // 每次随机取其中一个
            'createTime|1': '@datetime()',
        }
    ))
}

export default {
// 下面是增删改查方法的返回，和后台约定好之后就会省很多事
    // look
    CategoryList: () => {
        return {
            total: List.length,
            data: List
        }
    },
    CategoryDelete: () => {
        return {
            total: List.length,
            data: List
        }
    },
}

在上面这个文件里，for循环是用来控制生成多少条数据的。list是用来存放我们生的随机数据，下面我们导出的部分可以根据我们要对数据操作的方法比如获取全部，删除，添加等。中间部分就是我们生成数据的规则，这可以参考官网给出的官网示范
到这里我们已经完成基本的啦！我们也能看到我们创建的数据啦！

---

总结

先这样吧！，后面还有啥认识和了解我再来补充。