Detailed explanation of steps to add background mock interface in vue-cli project

This time I will bring you a detailed explanation of the steps to add a background mock interface to the vue-cli project. What are the precautions for adding a background mock interface to the vue-cli project? The following is a practical case, let’s take a look. one time.

It is extremely convenient to build a front-end development environment with vue-cli. When writing front-end code, it is definitely necessary to call the business interface provided by the background for front-end and back-end interaction. Especially in agile development, both front-end and back-end must be advanced in advance. Determine the business interface and perform piling. During the development process, there is basically no ready-made background that can be called. Basically, you write mocks yourself for simulation.

In the project built by vue-cli, the express web framework is used as the framework. It is very convenient to make a mock.

Assuming that all news lists need to be obtained on the front-end page, then you need to mock an interface that can return all news list data.

The next step is to implement the mock function in the project.

Scaffolding generation project

Execute the command to use the webpack template to generate a project named vuestrap (the name is arbitrary)

vue init webpack vue-mock-demo

Among the various prompt options that appear, there are no requirements. For convenience, turn off the unused ESLint, unit tests, and e2e (these options are optional).

? Project name vuestrap
? Project description A Vue.js project
? Author 省略
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

After selecting the options, the project will be generated.

Execute the command, Install Components created by the scaffolding

npm install

Create mock

It is at the same level as build, config and other folders Create a mock folder.

In order to mock a data interface for obtaining a news list, we create a file named "router-news.js" in the mock folder.

The content is:

var express = require('express');
var router = express.Router();
//对所有新闻的get进行mock
router.get('/all', function(req, res, next) {
 //响应mock数据
 res.json([{
  title: 'news-title-1' ,
  content: 'news-content-1'
 },
 {
  title: 'news-title-2' ,
  content: 'news-content-2'
 }]);
});
module.exports = router;

The complete url here should be "/mock/news/all", and only the "/all" sub-path is written here.

In the require area of ​​the header of the build/dev-server.js file, require the router written above.

var mockRouterNews = require('../mock/router-news')

Finally, calling app.use will associate the url with the router.

app.use('/mock/news', mockRouterNews)

Here, by splitting the URL, the URL can be clearly processed Modularization. A business can be handed over to the corresponding router for response processing. When using the app You can also see clearly where .use associates all routers.

Note:

The code that uses app.use to associate url and router must be placed before app.use of the "connect-history-api-fallback" component, otherwise the associated url will It is intercepted and will not be responded correctly by the mock router.

Execute

Execute the command in the command line to run the project.

npm run dev

After running, fill in the url of the mock in the address bar of the browser and access it, you can see the data of the mock, which is very convenient.

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

Recommended reading:

Detailed explanation of the steps to implement the electronic clock function with jQuery

vue jquery lodash top floating fixed function implementation when sliding Detailed explanation

Summary of Angular5 routing value transfer method

The above is the detailed content of Detailed explanation of steps to add background mock interface in vue-cli project. For more information, please follow other related articles on the PHP Chinese website!