SoFunction
Updated on 2025-04-08

A brief discussion on two ways of mock data interface used in vue project

1. Use data mock

//Use configuration options, set the URL access path and response response data, and mock data.const { data } = require('./')
//Introduce json data object
//Configure Vue CLI in the configuration file = {
 //...
 devServer: {
  before: function(app, server) {
   ('/api/data', function(req, res) {
    ({ data: data, errno: 0 });
   });
  }
 }
};

import axios from 'axios'
const ERRNO = 0

//Use function keratization, receive url as parameter, to return the new function to receive additional parameters as axios configuration itemfunction get (url) {
 return function (params) {
  return (url, {
   params
  }).then((res) => {
   const { errno, data } = 
   if (errno === ERRNO) {
    return data
   }
  }).catch((e) => {
  })
 }
}

const getData = get('api/data')

getSeller().then(res => {
 (res)
})

2. Use data mock

Use() to generate simulated data based on the data template.

import Mock from 'mockjs'
import data from './bookHome'
//Import the js file that stores simulated json data

(/\/api\/data/, 'get', home)
//Indicates that the URL that needs to be intercepted, can be a URL string or a URL regular.//Indicates the type of Ajax request that needs to be intercepted.  For example, GET, POST, PUT, DELETE, etc.//Represents a data template,Can be an object or a string。For example { 'data|1-10':[{}] }、'@EMAIL'。
/* axios gets mock data */
import axios from 'axios'

export function getData() {
 return axios({
  method: 'get',
  url: `${.VUE_APP_BOOK_URL}/api/data`
  //Set the interface url through the default address specified by the environment to facilitate subsequent calls })
}


 //The interface method returns the promise object and finally obtains the mock data getData().then(response => {
  if (response &&  === 200) {
   const data = 
   (data)
  }
 })

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.