Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use mockjs in vue-cli3". In daily operation, I believe many people have doubts about how to use mockjs in vue-cli3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use mockjs in vue-cli3". Next, please follow the editor to study!

I. installation

The installation code is as follows:

Yarn add mockjs// or npm i mockjs-S

Second, build the mock environment

1. By creating a new mock directory in the root directory, we create a new index.js file and modules folder in this directory.

The index.js code is as follows:

/ / index.jsconst Mock = require ('mockjs'); const mockFiles = require.context ('. / modules', false, /\ .js $/); let mocks = []; mockFiles.keys () .forEach (key = > {mocks.push (... mockFiles (key))}) mocks.forEach (item = > {Mock.mock (item.url, item.type, item.response)})

The user.js code in the modules folder is as follows:

/ / modules/user.jsconst userList = {url: "/ user/list", type: "get", response: () = > {return {code: 20000, data: [{"id": 1, "username": "zhoujielun" "password": "123456"}, {"id": 2, "username": "guojingming", "password": "666666"},]}} const userList1 = {url: "/ user/list1" Type: "get", response: () = > {return {code: 20000, data: [{"id": 1, "username": "zhoujielun", "password": "123456"} {"id": 2, "username": "guojingming", "password": "666666"},]}} module.exports = [userList, userList1,]

2. Introduce it into main. The code is as follows:

Require (".. / mock")

By the time we get here, the environment has already been built, and we are optimizing it.

Create a new .env file in our root directory:

/ / .envVUE _ APP_MOCK=true

After we finish, we will make some changes to main.js:

/ / the value of VUE_APP_MOCK is true, and in the development environment, if (process.env.VUE_APP_MOCK & & process.env.NODE_ENV = 'development') {require (".. / mock");}

At this point, we have completed the construction of the data environment for mock.

III. Use

What we need to pay attention to when using is that the url and type in the interface are the same as those defined in our mock. The code is as follows:

/ / request.jsimport axios from 'axios'import {Message} from' element-ui'// create an axios instanceconst service = axios.create ({baseURL: process.env.VUE_APP_BASE_API, / / url = base url + request url / / withCredentials: true, / / send cookies when cross-domain requests timeout: 5000 / / request timeout}) / / request interceptorservice.interceptors.request.use (config = > {return config}) Error = > {/ / do something with request error console.log (error) / / for debug return Promise.reject (error)}) / / response interceptorservice.interceptors.response.use (response = > {const res = response.data) Return res;}, error = > {console.log ('err' + error) / / for debug Message ({message: error.message, type:' error', duration: 5 * 1000}) return Promise.reject (error)}) export default service

Code in the api layer:

/ / index.jsconst moduleFiles = require.context ('. / modules', false, /\ .js $/); let apis = {}; moduleFiles.keys () .forEach (key = > {/ / get the file name, replace. / and .js with empty, final format common const fileName = key.replace (/ (\.\ / |\ .js) / g,''); / / fill data apis [fileName] = moduleFiles (key) }) export default {... apis} / / modules/user.jsimport request from'@ / utils/request'export function getList () {return request ({url:'/ user/list', method: 'get'})}

After completion, we call the api API in the views layer, with the following code:

Import api from "@ / api"; api.user.getList () .then (res = > {console.log (res)}); at this point, the study on "how to use mockjs in vue-cli3" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.