How to add a background mock interface to the vue-cli build project

This time I will show you how to add a background mock interface to the vue-cli building project, and what are the things to note. Here are the actual cases. Let’s take a look.

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:

Node.js console output log file example analysis

How to use Vue to achieve drag and drop effects

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