Mock.js快速入门

mockjs是一门快速生成项目化模拟数据，它不需要修改代码就能拦截Ajax请求，模拟后端API真实发送数据，让前端独立于后端开发

mockjs的初次体验

• 安装mock.js

# 安装
npm install mockjs

• mock.js生成的用例

const Mock = require('mockjs')
const data = Mock.mock({
    'list|1-10':[{
        'id|+1':1,
        name: '@cname'
    }]
})
console.log(data);

语法规则：'属性名|生成规则':属性值

详细文档：Mock.js

占位符扩展

单独输出占位符

console.log(Mock.Random.cname());
console.log(Mock.mock('@cname'));

Mock.js

常见占位符

@id/cname/name/email/ctitle/color/image/ip/url/string/integer/datetime

自定义占位符

Mock.Random.extend({
mystore(){
return this.pick(['宠物店’，美容店’，小吃店’"数码店，快餐店’]);
});
// OR
@pick([“管理员","VIP",“普通用户”])

项目案例-模拟用户集合

id:'@id',
name:'@cname',
sex:'@integer(0,1)',
birthday:'@date’,
img:'@image(50x50,#FF6600, #fff, png, header)',
role:'@pick(["管理员","普通用户"])',
address:'@county(true)'

项目中中引入Mockjs

• 安装mock.js

npm install mockjs

• 使用Axios网络请求

import axios from 'axios'

• 创建mock.js文件

import Mock from 'mockjs';

const getMockData = (data) => {
  return {
    code: 200,
    msg: 'success',
    data: {
      name: '@cname' // 中文名称
    }
  };
};

Mock.mock('http://localhost:3000/getMockData', 'get', getMockData());

在main.js引入

import './mockjs/index';

在页面中测试

 const { data } = await axios.get('http://localhost:3000/getMockData');

Axios会对method统一进行小写化处理，所以在mock中的type也应该是小写否则也会出现404的情况

mockJS不支持Fetch，但是uni-app-fetch不是Fetch用法和Axios一样，记得拦截的地址要一样

Fetch使用mock JS的方法

项目案例-新闻管理

使用Vue2+axios+MockJS实现新闻管理的增删改查

Mock.mock( rurl?, rtype?, template|function(options) )这里的rurl支持字符串或正则表达式。

• 在url是一个精确的路径，只需要匹配相同请求时用字符串
• 正则表达式表达式中的url路径，适合匹配多变化的url路径

<template>
  <div id="app">
    <button @click="search">查询新闻信息</button>
    <ul>
      <li v-for="item in postList" :key="item.id">
        {{item.id}} {{item.title}} {{item.author}}
        <button @click="loadEditData(item.id)">更新</button>
        <button @click="remove(item.id)">删除</button>
      </li>
    </ul>
    <div>
      新闻标题：<input v-model="postOb.title">
      作者：<input v-model="postOb.author">
      <button @click="add">新增新闻</button>
      <button @click="update">更新新闻</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  data(){
    return{
      postList: [],
      postOb: {
        id:"",
        title: "",
        author: "",
      }
    }
  },
  methods: {
    async search(){
      const res = await axios.get('/posts')
      this.postList = res.data.data
    },
    async add() {
      console.log(this.postOb);
      await axios.post('/posts/',this.postOb)
      await this.search()
    },
    async remove(id) {
      await axios.delete('/posts/'+id)
      await this.search()
    },
    async loadEditData(id){
      const res = await axios.get('/posts/'+id)
      const item = res.data.data
      console.log(item);
      this.postOb.id = item.id;
      this.postOb.title = item.title
      this.postOb.author = item.author
    },
    async update() {
      await axios.put('/posts',this.postOb);
      await this.search()
    }
  }
}
</script>

mock.js拦截axios请求，模拟后端生成数据

import Mock from "mockjs";

//随机生成数据
let { list } = Mock.mock({
  "list|5-10": [
    {
      id: "@increment()",
      title: "@ctitle(10)",
      author: "@cname",
    },
  ],
});

// 列表查询
Mock.mock('/posts','get',{
    code:200,
    data:list,
})

// 新增功能
Mock.mock(/posts/,'post',({body}) => {
    console.log(body);
    let dataItem = JSON.parse(body)
    dataItem.id = Mock.mock('@increment')
    list.push(dataItem)
    return {
        code:200,
        message:'操作成功'
    }
})
// 删除功能
Mock.mock(/posts/,'delete',({url}) => {
    const id = url.split('/')[2]
    
    const index = list.findIndex(item => {
        return item.id == id
    })
    if (index > -1) {
        list.splice(index,1)
        return {
            code:200,
            message:'操作成功'
        }
    }
})
// 修改功能
Mock.mock(/posts/,'put',({body}) => {
  let dataItem = JSON.parse(body)
  const item = list.find((item) => 
    item.id == dataItem.id

  )
  if(item) {
    for(const key in item) {
      item[key] = dataItem[key]
    }
    return { code :200 ,message:'操作成功'}
  }else {
    return {code:201,message:'操作失败'}
  }
})

// 修改查询
Mock.mock(/posts/,'get',({url}) => {
  console.log(url);
  const id = url.split('/')[2]
  console.log(id);
  const item = list.find((item) => 
    item.id == id
  )
  // 有括号和没括号不一样
  console.log(item);
  if (item) {
    return  {code:200,data:item}
  }else {
    return {code:201,message:'操作失败'}
  }
})

注：

• axios将请求方法封装成小写，get post put delete等请求统一小写，否则404
• 路径传参时Mock.mock中需要使用正则表达式匹配