Mock simulate the background return data with mockjs

install mockjs

npm install mockjs --save-dev
npm install @types/mockjs --save-dev

Use

Create basic reference file

establish /mock/index.ts

import Mock from "mockjs"
import homeApi from './home'
import userApi from './user'


//  Set up 200-2000 Millisecond delay request data 
// Mock.setup({
    
// timeout: '200-2000'
// })

//  Home page related 
//  Intercept is  /home/getData
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

//  User correlation 
Mock.mock(/\/user\/getUser/, 'get', userApi.getUserList)
Mock.mock(/\/user\/del/, 'get', userApi.deleteUser)
Mock.mock(/\/user\/batchremove/, 'get', userApi.batchremove)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/edit/, 'post', userApi.updateUser)
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

establish /mock/home.ts

import Mock from 'mockjs'

//  Chart data 
let List: any = [];
export default {
    
  getStatisticalData: () => {
    
    for (let i = 0; i < 7; i++) {
    
      List.push(
        Mock.mock({
    
          vue: Mock.Random.float(100, 8000, 0, 2),
          wechat: Mock.Random.float(100, 8000, 0, 2),
          ES6: Mock.Random.float(100, 8000, 0, 2),
          Redis: Mock.Random.float(100, 8000, 0, 2),
          React: Mock.Random.float(100, 8000, 0, 2),
          springboot: Mock.Random.float(100, 8000, 0, 2)
        })
      )
    }
    return {
    
      code: 20000,
      data: {
    
        //  The pie chart 
        videoData: [
          {
    
            name: 'springboot',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
    
            name: 'vue',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
    
            name: ' Applet ',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
    
            name: 'ES6',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
    
            name: 'Redis',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
    
            name: 'React',
            value: Mock.Random.float(1000, 10000, 0, 2)
          }
        ],
        //  Histogram 
        userData: [
          {
    
            date: ' Monday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Tuesday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Wednesday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Thursday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Friday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Saturday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: ' Sunday ',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          }
        ],
        //  Broken line diagram 
        orderData: {
    
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
    
            name: 'ES6',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
    
            name: ' Applet ',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
    
            name: 'Vue',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
    
            name: 'springboot',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
    
            name: 'React',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
    
            name: 'Redis',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          }
        ]
      }
    }
  }
}

establish /mock/user.ts

import Mock from 'mockjs'

// get Request from config.url To obtain parameters ,post from config.body Get parameters in 
function param2Obj(url) {
    
  const search = url.split('?')[1]
  if (!search) {
    
    return {
    }
  }
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
      .replace(/"/g, '\\"')
      .replace(/&/g, '","')
      .replace(/=/g, '":"') +
    '"}'
  )
}
let List = []
const count = 200
for (let i = 0; i < count; i++) {
    
  List.push(
    Mock.mock({
    
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
    
  /** *  To obtain a list of  *  With parameters  name, page, limt; name Can not fill , page,limit Have default values . * @param name, page, limit * @return {
    {code: number, count: number, data: *[]}} */
  getUserList: config => {
    
    const {
     name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, ' Paging size limit:' + limit)
    const mockList = List.filter(user => {
    
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
    
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
  /** *  Add user  * @param name, addr, age, birth, sex * @return {
    {code: number, data: {message: string}}} */
  createUser: config => {
    
    const {
     name, addr, age, birth, sex } = JSON.parse(config.body)
    console.log(JSON.parse(config.body))
    List.unshift({
    
      id: Mock.Random.guid(),
      name: name,
      addr: addr,
      age: age,
      birth: birth,
      sex: sex
    })
    return {
    
      code: 20000,
      data: {
    
        message: ' Add success '
      }
    }
  },
  /** *  Delete user  * @param id * @return {*} */
  deleteUser: config => {
    
    const {
     id } = param2Obj(config.url)
    if (!id) {
    
      return {
    
        code: -999,
        message: ' parameter is incorrect '
      }
    } else {
    
      List = List.filter(u => u.id !== id)
      return {
    
        code: 20000,
        message: ' Delete successful '
      }
    }
  },
  /** *  Batch deletion  * @param config * @return {
    {code: number, data: {message: string}}} */
  batchremove: config => {
    
    let {
     ids } = param2Obj(config.url)
    ids = ids.split(',')
    List = List.filter(u => !ids.includes(u.id))
    return {
    
      code: 20000,
      data: {
    
        message: ' Batch deletion succeeded '
      }
    }
  },
  /** *  Modify the user  * @param id, name, addr, age, birth, sex * @return {
    {code: number, data: {message: string}}} */
  updateUser: config => {
    
    const {
     id, name, addr, age, birth, sex } = JSON.parse(config.body)
    const sex_num = parseInt(sex)
    List.some(u => {
    
      if (u.id === id) {
    
        u.name = name
        u.addr = addr
        u.age = age
        u.birth = birth
        u.sex = sex_num
        return true
      }
    })
    return {
    
      code: 20000,
      data: {
    
        message: ' Edit success '
      }
    }
  }
}

stay main.ts Import basic file

main.ts

import {
     createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './mock'

createApp(App).use(store).use(router).mount('#app')

call

request("/home/getData", {
    
    method: "get",
}).then((data) => {
    
    console.log(data);
});