Vue uses the sample code of mock data, vuemock

Vue uses the sample code of mock data, vuemock

This article introduces the sample code of using mock data in vue and shares it with you, as follows:

Initialize your project

You don't have to worry about it. First, initialize your project. The simplest thing is to use vue-cli.

vue init webpack

Introduce mock. js

Install mockjs

npm install --save-dev mockjs

Introduced to the Vue prototype for ease of use

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

The above is introduced to the Vue prototype. You can use this. $ mock to directly generate mock data.

See Vue. prototype.

For more information, see mockjs.

During project development, the front and back ends are separated and fake data is made. The project is reconstructed using vue2.0 and the back ends are pushed back. In order not to delay the development process, I made a virtual data request, use dev-server in the project file built with vue-cli scaffolding to set up a virtual api request and access the background mode of your mock false data virtual request. The procedure is as follows:

In build/dev-server.js files

Add the following code under the var app = express () instance:

// Local json-server build code // introduce the database file var appData = require ('.. /mock. json') // introduce the database var getBoardList = appData. getBoardListvar apiRoutes = express. router () // use the api method to create a connection request for apiRoutes. post ('/getBoardList', function (req, res) {res. json ({errno: 0, data: getBoardList}) ;}) // call apiapp. use ('/api', apiRoutes)

The mock. json file on which appData depends is the file of your mock's false data. You can use mock or mock. js to create fake data based on the requirements of the front and back ends.

GetBoardList is an interface. var getBoardList = appData. getBoardList defines the interface data in appData.

Var apiRoutes = express. router () is the route for creating an api, apiRoutes. post is to create a post interface. This post interface has a req and a res parameter to execute the request and return respectively. When the returned result is a json, this json contains a status code errno and returned data (data points to the interface data getBoardList ).

Then, when we call an api, app. use ('/api', apiRoutes) will be able to use this service normally.

Here I use 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 ('succeeded ');}). catch (function (code) {alert ('failed'); 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 is also returned happily:

If you want to add interface data, continue to add it in the dev-server.js, post, get, and so on.

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.