vue中使用mock.js来模拟后台

前言：

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

目录：

官网入口：

为啥要使用

mock优点

项目中使用步骤：

1、安装 ： 

2、在src中创建文件夹 mock  ,新建index.js文件

3、访问我们的mock后台

mock.js更多的资料

api:

1. 属性值是字符串 String

2. 属性值是数字 Number

3. 属性值是布尔型 Boolean

4. 属性值是对象 Object

5. 属性值是数组 Array

6. 属性值是函数 Function

7. 属性值是正则表达式 RegExp

8.mock具体生成各种类型

一、mockjs的数据类型 及 语法规范

1、Mock.Random

2Mock.Random 提供的完整方法（占位符）如下

3.定义数据类型，详情见官方文档

4.mockjs语法规范

二、 Mock.setup()

三、Mock.Random 扩展方法

四、mockjs获取前端传递的数据

element表格增删改查案例：

案例：运用element-ui实现含分页数据的请求；增加；删除等

---

官网入口：

为啥要使用

1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2.使用json-server模拟，但不能随机生成所需数据
3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查

mock优点

1.前后端分离，
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.可扩展数据类型
6.在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。

项目中使用步骤：

1、安装 ： 

cnpm i -S mockjs

在main.js中导入

import Vue from 'vue'
import App from './App.vue'
import './mock/index.js'


new Vue({
  render: h => h(App),
}).$mount('#app')

2、在src中创建文件夹 mock  ,新建index.js文件

mock/index.js

import Mock from 'mockjs'

// 设置响应延时
Mock.setup({
  timeout: '200-600'//可以是整数，也可以是‘-’字符串
})

let configArray = []

//使用webpack的require.context()遍历所有的mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
  if (key === './index.js') return
  configArray = configArray.concat(files(key).default)
})

//注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|')
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  }
})

在mock文件夹在新建 user.js

// 获取用户信息
let userInfoData = {
  code: 15200,
  message: 'ok',
  'data|1': [
    {
      'id': 1,
      'teacherName': '张老师',
      teacherPhone: '15000000099',
      'schoolName': '@cname(1,4)',
      'cityName': '@city(true)',// 如果@city(),只会生成市，如果@city(true)会生成省和市
      'role': 2,
      'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'count': '@natural(1, 30)'
      }],
      
    }
  ]
}

export default {
  'post|/teacher/view-query-teacher': userInfoData
}

3、访问我们的mock后台

axios.post(`/teacher/view-query-teacher`).then(res=>{
//看res就是拿到的数据
debugger
})

mock.js更多的资料

api:

1. 属性值是字符串 String

1. 'name|min-max': string

   通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

2. 'name|count': string

   通过重复 string 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

1. 'name|+1': number

   属性值自动加 1，初始值为 number。

2. 'name|min-max': number

   生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

3. 'name|min-max.dmin-dmax': number

   生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

3. 属性值是布尔型 Boolean

1. 'name|1': boolean

   随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

2. 'name|min-max': value

   随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

1. 'name|count': object

   从属性值 object 中随机选取 count 个属性。

2. 'name|min-max': object

   从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

1. 'name|1': array

   从属性值 array 中随机选取 1 个元素，作为最终值。

2. 'name|+1': array

   从属性值 array 中顺序选取 1 个元素，作为最终值。

3. 'name|min-max': array

   通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

4. 'name|count': array

   通过重复属性值 array 生成一个新数组，重复次数为 count。

6. 属性值是函数 Function

1. 'name': function

   执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

1. 'name': regexp

   根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

   Mock.mock({
       'regexp1': /[a-z][A-Z][0-9]/,
       'regexp2': /\w\W\s\S\d\D/,
       'regexp3': /\d{5,10}/
   })
   // =>
   {
       "regexp1": "pJ7",
       "regexp2": "F)\fp1G",
       "regexp3": "561659409"
   }
   

8.mock具体生成各种类型

生成字符串

• 生成指定次数字符串

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

• 生成指定范围长度字符串

  const data = Mock.mock({
      "string|1-8": "yx"
  })
  console.log(data)
  

生成文本

• 生成一个随机字符串

  const data = Mock.mock({
      "string": "@cword"
  })
  console.log(data)
  

• 生成指定长度和范围

  const data = Mock.mock({
      string: "@cword(1)",
      str: '@cword(10,15)'
  })
  console.log(data)
  

生成标题和句子

• 生成标题和句子

  const data = Mock.mock({
      title: "@ctitle",
      sentence: '@csentence'
  })
  console.log(data)
  

• 生成指定长度的标题和句子

  const data = Mock.mock({
      title: "@ctitle(8)",
      sentence: '@csentence(50)'
  })
  

• 生成指定范围的

  const data = Mock.mock({
      title: "@ctitle(5,8)",
      sentence: '@csentence(50,100)'
  })
  console.log(data)
  

生成段落

• 随机生成段落

  const data = Mock.mock({
      content: '@cparagraph()' 
  })
  console.log(data)
  

生成数字

• 生成指定数字

  const data = Mock.mock({
      "number|80": 1
  })
  console.log(data)
  

• 生成范围数字

  const data = Mock.mock({
      "number|1-999": 1
  })
  console.log(data)
  

生成增量id

• 随机生成标识

  const data = Mock.mock({
      id: '@increment()'
  })
  console.log(data)
  

生成姓名-地址-身份证号

• 随机生成姓名-地址-身份证号

  const data = Mock.mock({
      name: '@cname()',
      idCard: '@id()',
      address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
  })​
  console.log(data)
  

随机生成图片

• 生成图片：

• 参数1：图片可选大小

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

    const data = Mock.mock({
        image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
    })
    console.log(data)
  

生成时间

• @Date

• 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

  const time = Mock.mock({
      time1: '@date()', // 只有年月日
      time2: '@date(yyyy-MM-dd hh:mm:ss)'
  })
  console.log(time) 
  

指定数组返回的条数

• 指定长度：'data|5'

• 指定范围：'data|5-10'

  const data = Mock.mock({
      'list|50-99':[
          {
              name: '@cname()',
              address: '@city(true)',
              id: '@increment(1)' // 每次都增加1
          }
      ]
  })
  

mock拦截请求

• 在项目中安装axios

  npm install axios
  

• 在 main.js 文件引入

  import axios from 'axios'
  

• 在mock文件夹的index.js文件中写mock语法

定义不携带参数的get请求

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

定义post请求

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

• 在 App.vue 文件发送请求

一、mockjs的数据类型 及 语法规范

1、Mock.Random

Mock.Random是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

2Mock.Random 提供的完整方法（占位符）如下

类型	方法
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

3.定义数据类型，详情见官方文档

// 引入 Mock
var Mock = require('mockjs')

// 定义数据类型
var data = Mock.mock({
  // 20条数据
  "data|3": [{
    // 商品种类
    "goodsClass": "女装",
    // 商品Id
    "goodsId|+1": 1,
    //商品名称
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等级评价★
    "goodsStar|1-5": "★",
    //商品图片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售价
    "goodsSale|30-500": 30,

    // 邮箱：
    "email": "@email",
    // 颜色
    "color": "@color",

    // name
    "name": "@name",

    //img,参数1：背景色，参2：前景色，参3：图片的格式，默认png，参4：图片上的文字

    "img": "@image('100*100','@color')",
    //英文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
    "Etext":"@paragraph(1,1,3)",

    //中文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
    "Ctext":"@cparagraph(1,1,3)",

    //中国大区
    "cregion":"@region",
    // 省
    "cprovince":"@province",
    //市
    "ccity":"@city",
    //省 + 市
    "ss":"@city(true)",
    //县
    "country":"@county",
    //省市县
    "countrysx":"@county(true)",
    //邮政编码
    "code":"@zip"

  }]
})

// 输出结果
// console.log(data);

4.mockjs语法规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：
属性名 和 生成规则 之间用竖线 | 分隔。 
生成规则 是可选的。 
生成规则 有 7 种格式： 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value
//属性值自动加 1，初始值为 `number` 'name|+step': value    

生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
--------------------------------------------- 

二、 Mock.setup()

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。
值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；
也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

  Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})
目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

三、Mock.Random 扩展方法

// 引入 Mock
var Mock = require('mockjs')

var random = Mock.Random;

//扩展数据模板
random.extend({
  type: function (index:number) {
    const types = ['products', 'industryApp', 'solution', 'experts'];
    return this.pick(types[index])
  }
});

// 定义数据类型
const  menuSource:Array = [];
 menuSource[0] = Mock.mock({
  "type": "@type(0)",
   'data|3-4':[{
     'id|+1': 1,
     name: "@ctitle( 4,6)",
     "childs|5-10": [{
       'id|+1': 1,
       name: "@ctitle(4,6)",
     }]
   }]
});
// 输出结果
 console.log(data);

四、mockjs获取前端传递的数据

axios({
      method: "get",
      url: "/getGoods",
      data: {
        id:2
      }
    }).then(data => {
      //成功的回调函数，返回的是增加的数据
      console.log(data.data.data);
      this.url = data.data.data[0].goodsImg
    });
  }

  Mock.mock("/getGoods", "get", (config) => {
  console.log(config);
  return data;
})

###mockjs可以通过option.body获取前端传递的数据

element表格增删改查案例：

案例：运用element-ui实现含分页数据的请求；增加；删除等

mockjs文件夹的index.js

import Mock from 'mockjs'

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({
    "id": '@increment(1)',
    "title": body.title,
    "content": body.content,
    "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
  }))

  return {
    status: 200,
    message: '添加成功',
    list: data.list
  }
})


// 含有分页的数据列表,有需要接受的参数要使用正则匹配
// /api/get/news?pagenum=1&pagesize=10
Mock.mock(/\/api\/get\/news/, 'get', (options) => {
  console.log(options)
  // 获取传递的参数pageindex
  const pagenum = getQuery(options.url,'pagenum')
  // 获取传递的参数pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取数据的起始位置
  const start = (pagenum-1)*pagesize
  // 截取数据的终点位置
  const end = pagenum*pagesize
  // 计算总页数
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 数据的起始位置：(pageindex-1)*pagesize  数据的结束位置：pageindex*pagesize
  const list = pagenum>totalPage?[]:data.list.slice(start,end)

  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: data.list.length
  }
})

const getQuery = (url,name)=>{
  const index = url.indexOf('?')
  if(index !== -1) {
    const queryStrArr = url.substr(index+1).split('&')
    for(var i=0;i

App.vue

main.js

import './mockjs/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);