Front-end Vue uses package Mock.js and api request to simulate data case (with source code)

1: Preparation stage

1. Install mockjs axios

npm install mockjs --save
npm install axios --save

2. Main.js is introduced globally

import './utils/mock'//此部分引入的是我们所编写的mockjs文档
import axios from 'axios'
Vue.prototype.$axios = axios

Two: use stage

1. Create an api file under src and create a packaged api in request.js. The code is as follows:
import axios from 'axios'

// 案例!!!!!
export function getCase() {
  return axios.get('/api/case')
}

// 文本列表
export function county() {
  return axios.get('/api/getObject')
}

// 折线数据
export function getList() {
  return axios.post('/api/line')
}

// home折线数据
export function getLine() {
  return axios.post('/api/lineAdd')
}



axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
})

// 封装axios的post请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

export default {
  mockdata(url, params) {
    return fetch(url, params);
  }
}

2. Create a utils file under src to create a mock database encapsulated by mock.js, and write the code for the interface to create the data as follows:
官方文档mock.js更多数据案例: http://mockjs.com/examples.html

Mock.mock( rurl, rtype, function( options ) ) rurl The url
to be intercepted rtype The type of ajax request to be intercepted function( options ) The function
used to generate the response data Record the function used to generate the response data. When an Ajax request matching rurl and rtype is intercepted, the function function(options)
will be executed and the execution result will be returned as the response data.

import Mock from 'mockjs'
// 案例！！！！和详解意思，还是不懂看文档
Mock.mock('/api/case', 'get', () => {
  return Mock.mock({
    "mtime": "@datetime", //随机生成日期时间
    "score|1-800": 800, //随机生成1-800的数字
    "rank|1-100": 100, //随机生成1-100的数字
    "stars|1-5": 5, //随机生成1-5的数字
    "nickname": "@cname", //随机生成中文名字
  })
})

// 返回字符串
Mock.mock('/api/data', 'get', () => {
  return Mock.mock({
    'string|3': '*' //  string 代表字符串名称  后面3代表个数
  })
})

// 返回指定范围的整数
Mock.mock('/api/getInteger', () => {
  return Mock.mock({
    'a|1-100': 100 // 
  })
})

// 返回随机数组
Mock.mock('/api/getArr', () => {
  return Mock.mock({
    'data|1-30': [{
      'name': '张三'
    }]
  })
})

// 返回随机字符
Mock.mock('/api/getRandom1', () => {
  return Mock.mock({
    'random1': /[a-z]{2}[A-Z]{2}[0-9]/
  })
})

// 返回随机字符
Mock.mock('/api/getRandom2', () => {
  return Mock.mock({
    random2: '@string("lower", 5)'
  })
})

// 返回UUID
Mock.mock('/api/getUUID', () => {
  return {
    'uuid': Mock.Random.id()
  }
})


// 返回随机个数的对象
Mock.mock('/api/getObject', () => {
  return Mock.mock({
    'list|10': [{
      'id|+1': 1,
      'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
      'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
      'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    }],
    name: Mock.Random.cname(), //随机产生一个中文的姓名
    addr: Mock.mock('@county(true)'), //随机生成一个地址
    'age|18-60': 1, //随机生成一个数字 大小在18到60
    birth: Mock.Random.date(), //随机生成一个日期
    sex: Mock.Random.integer(0, 1), //随机生成一个整数，0/1 ，根据这个来给“男” “女”
    email: Mock.mock('@EMAIL()'), //随机生成一个邮箱
    'moblie|1': ['13531544954', '13632250649', '15820292420', '15999905612'], //在数组中随机找一个
    'num1|1-100.2': 1, //1-100 中随机生成一个保留两位小数点
    'num2|100-300.2': 1,
    'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
    'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
    'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    time: Mock.Random.date('yyyy-MM-dd'),
    mobile: /^1[0-9]{10}$/ //用正则匹配1开头的11位数字的手机号
  })
})



// 第二种~~~~~
// const cateData = {"data":[{"all":484,"children":[{"all":120,"pid":10000,"quesId":10001,"quesName":"武汉"},{"all":100,"pid":10000,"quesId":10002,"quesName":"鄂州"},{"all":90,"pid":10000,"quesId":10003,"quesName":"咸宁"},{"all":66,"pid":10000,"quesId":10004,"quesName":"黄冈"},{"all":88,"pid":10000,"quesId":10005,"quesName":"荆州"}],"pid":1,"quesId":10000,"quesName":"湖北"},{"all":450,"children":[{"all":100,"pid":11000,"quesId":11001,"quesName":"广州"},{"all":200,"pid":11000,"quesId":11002,"quesName":"惠州"},{"all":70,"pid":11000,"quesId":11003,"quesName":"珠海"},{"all":80,"pid":11000,"quesId":11004,"quesName":"佛山"}],"pid":1,"quesId":11000,"quesName":"广东"},{"all":243,"children":[{"all":88,"pid":12000,"quesId":12001,"quesName":"杭州"},{"all":100,"pid":12000,"quesId":12002,"quesName":"宁波"},{"all":20,"pid":12000,"quesId":12003,"quesName":"温州"},{"all":35,"pid":12000,"quesId":12004,"quesName":"嘉兴"}],"pid":1,"quesId":12000,"quesName":"浙江"},{"all":285,"children":[{"all":220,"pid":13000,"quesId":13001,"quesName":"成都"},{"all":20,"pid":13000,"quesId":13002,"quesName":"雅安"},{"all":45,"pid":13000,"quesId":13003,"quesName":"绵阳"}],"pid":1,"quesId":13000,"quesName":"四川"},{"all":235,"children":[{"all":75,"pid":14000,"quesId":14001,"quesName":"济南"},{"all":90,"pid":14000,"quesId":14002,"quesName":"青岛"},{"all":40,"pid":14000,"quesId":14003,"quesName":"烟台"},{"all":30,"pid":14000,"quesId":14004,"quesName":"威海"}],"pid":1,"quesId":14000,"quesName":"山东"},{"all":285,"children":[{"all":120,"pid":15000,"quesId":15001,"quesName":"台北"},{"all":60,"pid":15000,"quesId":15002,"quesName":"桃园"},{"all":50,"pid":15000,"quesId":15003,"quesName":"高雄"},{"all":55,"pid":15000,"quesId":15004,"quesName":"新竹"}],"pid":1,"quesId":15000,"quesName":"台湾"},{"all":595,"children":[{"all":220,"pid":16000,"quesId":16001,"quesName":"南京"},{"all":110,"pid":16000,"quesId":16002,"quesName":"无锡"},{"all":150,"pid":16000,"quesId":16003,"quesName":"苏州"},{"all":80,"pid":16000,"quesId":16004,"quesName":"连云港"},{"all":35,"pid":16000,"quesId":16005,"quesName":"盐城"}],"pid":1,"quesId":16000,"quesName":"江苏"},{"all":760,"children":[{"all":150,"pid":17000,"quesId":17001,"quesName":"黄埔"},{"all":120,"pid":17000,"quesId":17002,"quesName":"徐汇"},{"all":100,"pid":17000,"quesId":17003,"quesName":"静安"},{"all":130,"pid":17000,"quesId":17004,"quesName":"普陀"},{"all":100,"pid":17000,"quesId":17005,"quesName":"虹口"},{"all":100,"pid":17000,"quesId":17006,"quesName":"闵行"},{"all":60,"pid":17000,"quesId":17007,"quesName":"嘉定"}],"pid":1,"quesId":17000,"quesName":"上海"},{"all":900,"children":[{"all":240,"pid":18000,"quesId":18001,"quesName":"东城"},{"all":220,"pid":18000,"quesId":18002,"quesName":"西城"},{"all":120,"pid":18000,"quesId":18003,"quesName":"朝阳"},{"all":120,"pid":18000,"quesId":18004,"quesName":"海淀"},{"all":100,"pid":18000,"quesId":18005,"quesName":"通州"}],"pid":1,"quesId":18000,"quesName":"北京"},{"all":840,"children":[{"all":200,"pid":19000,"quesId":19001,"quesName":"渝中"},{"all":120,"pid":19000,"quesId":19002,"quesName":"万州"},{"all":160,"pid":19000,"quesId":19003,"quesName":"陪陵"},{"all":120,"pid":19000,"quesId":19004,"quesName":"江北"},{"all":80,"pid":19000,"quesId":19005,"quesName":"沙坪坝"},{"all":120,"pid":19000,"quesId":19006,"quesName":"九龙坡"},{"all":40,"pid":19000,"quesId":19007,"quesName":"渝北"}],"pid":1,"quesId":19000,"quesName":"重庆"},{"all":1430,"children":[{"all":200,"pid":20000,"quesId":20001,"quesName":"福田"},{"all":220,"pid":20000,"quesId":20002,"quesName":"罗湖"},{"all":360,"pid":20000,"quesId":20003,"quesName":"南山"},{"all":210,"pid":20000,"quesId":20004,"quesName":"盐田"},{"all":120,"pid":20000,"quesId":20005,"quesName":"宝安"},{"all":120,"pid":20000,"quesId":20006,"quesName":"龙岗"},{"all":120,"pid":20000,"quesId":20007,"quesName":"龙华"},{"all":80,"pid":20000,"quesId":20008,"quesName":"坪山"}],"pid":1,"quesId":20000,"quesName":"深圳"},{"all":600,"children":[{"all":600,"pid":21000,"quesId":21001,"quesName":"新加坡"}],"pid":1,"quesId":21000,"quesName":"新加坡"},{"all":100,"children":[{"all":100,"pid":22000,"quesId":22001,"quesName":"东京"}],"pid":1,"quesId":22000,"quesName":"东京"},{"all":600,"children":[{"all":600,"pid":23000,"quesId":23001,"quesName":"莫斯科"}],"pid":1,"quesId":23000,"quesName":"莫斯科"},{"all":550,"children":[{"all":550,"pid":24000,"quesId":24001,"quesName":"梵蒂冈"}],"pid":1,"quesId":24000,"quesName":"梵蒂冈"},{"all":211,"children":[{"all":211,"pid":25000,"quesId":25001,"quesName":"纽约"}],"pid":1,"quesId":25000,"quesName":"纽约"},{"all":163,"children":[{"all":163,"pid":26000,"quesId":26001,"quesName":"尼日利亚"}],"pid":1,"quesId":26000,"quesName":"尼日利亚"}],"message":"请求成功","status":200}
// function getCateData() {
//   return cateData
// }
// const departData = {"data": [{"deptName": "南山","all":360,"done": 300},{"deptName": "东城区","all":240,"done": 200},{"deptName": "渝中","all":200,"done": 200},{"deptName": "黄埔","all":150,"done": 150},{"deptName": "新加坡","all":600,"done": 580},{"deptName": "莫斯科","all":600,"done": 600},{"deptName": "梵蒂冈","all":550,"done": 500},{"deptName": "成都","all":220,"done": 220},{"deptName": "纽约","all":211,"done":211},{"deptName": "罗湖","all":220,"done": 210}],"message":"请求成功","status":200}
// function getDepartTop() {
//   return departData
// }
// export { getCateData, getDepartTop }


// 返回随机个数
const cateData = {
  "data": [{
    "all": 484,
    "children": [{
      "all": 120,
      "pid": 10000,
      "quesId": 10001,
      "quesName": "武汉"
    }, {
      "all": 100,
      "pid": 10000,
      "quesId": 10002,
      "quesName": "鄂州"
    }, {
      "all": 90,
      "pid": 10000,
      "quesId": 10003,
      "quesName": "咸宁"
    }, {
      "all": 66,
      "pid": 10000,
      "quesId": 10004,
      "quesName": "黄冈"
    }, {
      "all": 88,
      "pid": 10000,
      "quesId": 10005,
      "quesName": "荆州"
    }],
    "pid": 1,
    "quesId": 10000,
    "quesName": "湖北"
  }, {
    "all": 450,
    "children": [{
      "all": 100,
      "pid": 11000,
      "quesId": 11001,
      "quesName": "广州"
    }, {
      "all": 200,
      "pid": 11000,
      "quesId": 11002,
      "quesName": "惠州"
    }, {
      "all": 70,
      "pid": 11000,
      "quesId": 11003,
      "quesName": "珠海"
    }, {
      "all": 80,
      "pid": 11000,
      "quesId": 11004,
      "quesName": "佛山"
    }],
    "pid": 1,
    "quesId": 11000,
    "quesName": "广东"
  }],
  "message": "请求成功",
  "status": 200
}
Mock.mock('/api/k', () => {
  return cateData
})

// 返回随机个数折线数据pie1和pie2用的接口
Mock.mock('/api/line', () => {
  return Mock.mock({
    // 'list|10': [{
    //   'id|+1': 1,
    //   'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
    //   'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
    //   'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    // }],
    // 'list:10': [{
    //   'id|+1': 1,
    //   
    // }]
    'list|3': [{
      'id|+1': 1,
      'name|3': ['@cname'], //随机产生一个中文的姓名
      'time|3': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|2': ['@float(1, 300)']
    }],
  })
})

// 返回随机个数折线数据pie1和pie2用的接口
Mock.mock('/api/lineAdd', () => {
  return Mock.mock({
    'list|3': [{ //  list 代表数组名称  后面3代表个数
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
    'list2|3': [{
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
    'list3|3': [{
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
  })
})

3. Use page components, create one at random, configure routing, the code is as follows

<template>
  <div>页面</div>
</template>

<script>
import {getCase} from '../api/request'  // 路径要匹配对上!!!
export default {
  mounted(){
    this.getData();
  },
  methods:{
    getData(){        // 也可以用原生的直接写路径请求
      getCase({}).then(res => {
        console.log(res,'res~~~~');
      })
    }
  }
}
</script>

4. The effect is as shown below

这是单独加案例模拟登录接口
// 用户登录
Mock.mock('/login', 'post', options => {
    const {userName, userPassword} = JSON.parse(options.body)
    const user = users.find(item => {
        return item.username === userName && item.password === userPassword
    })

    return user
})

If you feel that the article is good, remember to pay attention and pay attention. Please correct me if I have any mistakes, thank you! ! !