目录

一.为什么使用mockjs

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查

2.使用json-server模拟，但不能随机生成所需数据

3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

二.mockjs的优点

1.支持前后端分离

2.可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型

6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可

三.mockjs使用

1.安装：npm i mockjs

2.mockjs的常规语法：

3.mockjs生成接口的方法：Mock.mock()

四.vue2+mockjs实现CRUD

1.安装axios、mockjs

2.创建mockjs接口配置文件：src/mock/index.js

3.在main.js文件中引入mock接口文件

4.在vue组件中请求mockjs生成的数据

一.为什么使用mockjs

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查

2.使用json-server模拟，但不能随机生成所需数据

3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

二.mockjs的优点

1.支持前后端分离

2.可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型

6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可

三.mockjs使用

1.安装：

npm i mockjs

2.mockjs的常规语法：

"id|1-10":1    //表示给id生成1-10的随机数，初始值为1
"id|+1":1     //表示id的初值为1，并且自增+1
"userName":'@cname'    //'@cname'表示随机的中文名；'@name'表示随机生成英文名
'sex|1': ['男', '女'],   //性别：男/女

"email":'@email'    //'@email'随机邮箱
"city":'@province'    //'@province'表示随机生成省份；'@city'随机生成城市；'@county'随机生成县区；'@city(true)'表示随机生成省份+城市；'@county(true)'随机生成省、市、县；
"birthday":'@datetime'    //'@datetime'：表示随机生成日期、时间
'date': '@datetime()', //随机时间 例如 "1982-12-03 23:27:38"
'img': '@image()',//随机图片，例如："http://dummyimage.com/120x60"
'price': '@integer(1,100)'//随机价格 返回 1 到 100 整数
"message": '@cword(6)' // 随机汉字（6个） 去掉c为字母
 "persons|100": [ // 该数组中返回 100 个下面定义的对象
      {
        "id|+1": 0, // 从 0 开始每次 +1    012345
        ...
      }
    ]

3.mockjs生成接口的方法：

Mock.mock()

(1)用法1：Mock.mock(template)  ---  根据数据模板生成模拟数据。
 
(2)用法2：Mock.mock(rurl, template) 
         参数rurl：请求地址
         参数template：根据模板生成的数据
         
(3)用法3：Mock.mock(rurl, function(options){}) --- 记录用于生成响应数据的函数。当拦截到匹配rurl请求时，
         函数 function(options) 将被执行，并把执行结果作为响应数据返回。
         
(4)用法4：Mock.mock(rurl,rtype,template)
         参数rurl：请求地址
         参数rtype：请求方式
         参数template：根据模板生成的数据
         
(5)用法5：Mock.mock(rurl,rtype,function( options ){}) --- 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype          的请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

四.vue2+mockjs实现CRUD

1.安装axios、mockjs

2.创建mockjs接口配置文件：src/mock/index.js

//引入mock.js
import Mock from 'mockjs'
 
//查询所有
Mock.mock('/api/info','get',{
    "status":200,
    "arr|10":[{
        "id|+1":1,
        "username": "@cname",
        "isMale":'@boolean',//随机性别,
        "age|1-100": 1,
        "address":"@county(true)",
        avatar() {
            //用户头像
            return Mock.Random.image('100×100',Mock.Random.color(),'#757575','png',this.username)
        }
    }]
})
 
 
const paramsList = [
    { product: 'iphone3G', id: 1 },
    { product: 'iphone4', id: 2 },
    { product: 'iphone4S', id: 3 },
]
 
//增加数据接口：
Mock.mock('/api/addInfo','post',options=>{
    let body = JSON.parse(options.body) // 获取请求参数
    let id = parseInt(body.id)
    let flag = true
 
    for (let item of paramsList) {
        if (item.id === id) flag = false // 判断id是否已经存在
    }
 
    // 如果id不存在
    if (flag) {
        paramsList.push(
            {
                product: body.product,
                id
            }
        )
        return {
            paramsList,
            status: 200,
            msg: '添加成功'
        }
    }
    // 如果id已存在
    return {
        status: 400,
        msg: '添加失败，id已存在'
    }
})
 
//删除数据接口
Mock.mock('/api/remove', 'delete', options => {
    let id = parseInt(JSON.parse(options.body).id) // 获取请求id
    let index = null
 
    for (let i in paramsList) {
        if (paramsList[i].id === id) index = i // 获取id对应的index
    }
 
    if (index !== null) {
        console.log(`删除的id为：${id}，对应的index为：${index}`)
        paramsList.splice(index, 1) // 从index开始删除一个（本身）
        return {
            paramsList,
            status: 200,
            msg: '删除成功'
        }
    }
    return {
        status: 400,
        msg: '删除失败，id不存在'
    }
})
 
//修改数据接口
Mock.mock('/api/edit', 'put', options => {
    const body = JSON.parse(options.body) // 解析请求参数（只能解析到这）
    const id = parseInt(body.id) // 获取请求id
    let index = null
 
        for (let i in paramsList) {
            if (paramsList[i].id === id) { // 判断id是否已经存在
                index = i // 拿到id对应的index
            }
        }
        
        // 如果id存在
       if(index != null){
            paramsList[index].product = body.product
            return {
                paramsList,
                status: 200,
                msg: '修改成功'
            }
       }
        return {
            status: 400,
            msg: '修改失败'
        }
})

3.在main.js文件中引入mock接口文件

import './mock'

4.在vue组件中请求mockjs生成的数据

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <br/><br/>
    <button @click="getData">查询所有</button>
    &nbsp; &nbsp; &nbsp;
    <button @click="addData">增加数据</button>
    &nbsp; &nbsp; &nbsp;
    <button @click="delData">删除数据</button>
    &nbsp; &nbsp; &nbsp;
    <button @click="editData">修改数据</button>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  
  methods: {
    getData(){
      this.$http.get('/api/info').then(res=>{
        console.log(res.data.arr)
      })
    },
    addData(){
      this.$http.post('/api/addInfo',{
        product: 'iphone5',
        id: 4
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    },
    delData(){
      this.$http.delete('/api/remove',{
        data: {
          id:2
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    },
    editData(){
      this.$http.put('/api/edit', {
          data: {
            id: 1, // 要修改的id
            product: 'iphone12' // 修改的内容
          }
        }
      }).then(res => {
        console.log(res.data)
      }).catch(err => {
            console.log(err)
      })
    }
  }
}
</script>