current position:Home>Mock in Vue JS preliminary simple use

Mock in Vue JS preliminary simple use

2022-04-29 07:41:59Laugh until the world is embarrassed

Recent projects need to be refactored , In the gap of drawing the prototype, I have a brief understanding of mock.js. Because in terms of progress , The background interface won't be fast To the front end , You can't sit and wait at the front . So you can go through mock.js First create some data to achieve the effect

mock Document address

One 、 First of all, of course, we need to install mock.js 了

npm install mockjs --save-dev

Two 、 stay main.js Import mock.js

notes : It needs to be deleted before going online

import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}

The code structure is as follows :

3、 ... and 、 Find... In the project mock Folder , Create a new folder js, be used for mock Fake data  

The code is as follows :

import Mock from 'mockjs'


const Random = Mock.Random  // Mock.Random  Is a utility class , Used to generate various random data 


const deptList = [] //  An array used to accept generated data ( Department data )
for (let i = 0; i < 20; i++) { //  You can customize the number of generated 
  const template = {
    'id|+1': i, //  The number starts from the current , follow-up +1
    'deptName': '@cname', //  The name is random Chinese name 
    'topDept': '@cname', //  The name is random Chinese name 
    'remark': Random.cparagraph(), //  Randomly generated Chinese 
    'className': 'normal', //  A custom fixed field , Used to modify the selected background color of the table 
    'date': Random.date() //  Generate a random date , You can add parameters to define the date format 
  }
  deptList.push(template)
}


Mock.mock('/dept/deptList', 'get', deptList) //  Generate simulation data according to data template 


export default [


]

The code structure is as follows :

  Four 、 stay index.js Import the newly created in No. 3 middle school js

  5、 ... and 、 stay vue Page call

1. install axios, If... Is installed in the project , You don't have to install it

npm install --save axios

2. Import axios

import axios from 'axios'

3. call

axios.get('/dept/deptList').then(res => {
  console.log('res', JSON.parse(JSON.stringify(res.data)));
})

The results shown in the figure below can be obtained :

  Here we are , The call to the data is over . Next, I want to add the data information to grid-table in , You also need to modify the code , As shown in the figure below :

  Main code :

deptList() {
  return axios.get('/dept/deptList').then(res => {
    this.deptListRow = res.data
    console.log('res', JSON.parse(JSON.stringify(this.deptListRow)));
  })
},
rowDataApi() {
  return this.deptList().then(() => {
    console.log('deptListRow1111', JSON.parse(JSON.stringify(this.deptListRow)));
    return Promise.resolve({
      code: 200,
      data: this.deptListRow
    })
  })
},

Realization effect :

6、 ... and 、post request

The one used above is get request ,post Examples of requests are as follows :

1.mock.js Fake data

/**
* mock Login interface 
* 1.url route 
* 2. Request mode 
* 3. Parameters  option
*/
Mock.mock('/user/login', 'post', function(option) {
  return {
    code: 20000,
    data: 'success',
    mock: true,
    token: 'Bearer [email protected]#r34'
  }
})

2.vue Page call

/**
*  Login interface call 
* 1.url route 
* 3. Parameters  this.loginForm
*/
axios.post('/user/login', this.loginForm).then(res => {
  console.log('res', JSON.parse(JSON.stringify(res.data)));
})

3. Browser returns results

copyright notice
author[Laugh until the world is embarrassed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290541406253.html

Random recommended