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

This article shows you how to use mock in the vue project. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Mock.js is a simulation data generator designed to help front-end siege developers develop independently of the back end and help write unit tests. The following simulation features are provided:

Generate simulation data according to data template

Simulate Ajax requests, generate and return simulation data

Generating simulation data based on HTML template

Step 1: npm install mockjs / / install mockjsnpm install axios step 2, configure it in request.js The request.js code is as follows: import axios from 'axios'// axios.defaults.headers.post [' Content-Type'] = 'application/x-www-urlencoded'const http = axios.create () http.defaults.timeout = 3000 http.interceptors.request.use (config = > {/ / request interceptor configuration / / but not / / do sth return config} Error = > {console.log (error) return Promise.reject (error)}) http.interceptors.response.use (response = > {/ / response interceptor configuration / / can not be configured / / do something return response}, error = > {console.log (error) return Promise.reject (error)}) export function fetch (url, params) {/ / encapsulates axios's post request return new Promise ((resolve, reject) = > {/ promise usage Check axios.post (url, params) .then (response = > {resolve (response.data) / / promise related}) .catch (error = > {reject (error) / / promise related})} export default {/ / expose the htto_mock method That is, the method http_mock (url, params) {return fetch (url, params)}} used in the later page is the third step to make the relevant configuration in mock.js. The mock.js code is as follows: import Mock from 'mockjs' const Random = Mock.Random var listData = function () {let _ data = {status: 200, message:' success', data: {total: 100, 'rows | 10 codes: [{id:' @ guid', name:'@ cname', 'age | 20-30 seconds: 23 'job | 1 request: [' front-end engineer', 'back-end engineer','UI engineer', 'demand engineer']}} return {_ data}} / / url requests data (rules) for the request address to be intercepted (where api will be intercepted by mockjs) Mock.mock ('http://route.showapi.com/60-27', 'post', listData ())

The fourth step is to introduce mock.js into main.js, and the fifth step is import mock from'@ / http/mock' Use import request from'@ / http/request' export default {name: "FirstPage", created () {this.getData ()} in the page Methods: {getData () {/ / pretend to send a request using http_mock (mock automatically intercepts the request and generates data) / / the first parameter here needs to be consistent with the first parameter in Mock.mock () console.log ('request start') request.http_mock ('http://route.showapi.com/60-27', 'api_id=63114&api_sign=3847b0') .then (response = > {console.log (response._data)})},}}

The effect is as follows:

The above is how to use mock in the vue project. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.