How vue calls mock data

This time I will show you how vue calls mock data. What are the precautions for vue to call mock data? The following is a practical case, let's take a look.

Initialize your project

Without further ado, first initialize your project. The easiest way is to use vue-cli

vue init webpack

Introduce mock.js

Installation mockjs

npm install --save-dev mockjs

Introduced into the Vue prototype for easy use

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

The above is introduced into the Vue prototype, and you can use this.$mock to directly generate mock data

Please look here Vue.prototype

Please look here mockjs

During project development, the front and backend were separated and fake data was created. The project was reconstructed using vue2.0, and the backend was also pushed back. In order not to delay the development process, I made a virtual data request and used vue-cli scaffolding to build it. In the project file, dev-server builds a virtual api request and accesses the fake data of its own mock to request the background mode. The specific method is as follows

In the build/dev-server.js file

Add the following code below the instance of var app = express()

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

The mock.json file that appData relies on is the fake data file of your own mock. You can mock it yourself or use mock.js to make fake data according to the front and backend requirements

getBoardList is an interface, var getBoardList = appData.getBoardList defines this interface data in appData.

var apiRoutes = express.Router() It creates an api routing. apiRoutes.post creates a post interface. This post interface has a req and a res parameter, which executes the request and returns respectively. When it returns, it will give us a json. This json includes a status codeerrno and the returned data data (data points to the interface data getBoardList).

Then when we call the api app.use('/api', apiRoutes), we can use this service normally

Here I used the axios request data recommended by vue2.0, the code is as follows

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

Open the network in the browser console, and you will find that a network request has been generated

At the same time, the data returned happily:

If you want to add interface data, just continue to add it in dev-server.js, post, get, etc. can be used.

Note that every time you change dev-server.js, you need to restart npm run devStart the project

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Recommended reading:

Detailed explanation of the use of template strings in ES6

js implements conversion of milliseconds, days, hours, minutes and seconds

Detailed explanation of how to use the form validation function of Bootstrap

The above is the detailed content of How vue calls mock data. For more information, please follow other related articles on the PHP Chinese website!