Add interface to vue-cli project (with code)

This time I will bring you the addition of interfaces in the vue-cli project (with code). What are the precautions for adding interfaces in the vue-cli project? The following is a practical case, let's take a look.

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:

How to bind the direction keys to control div movement

How to create the effect of switching fonts by clicking on the title text

The above is the detailed content of Add interface to vue-cli project (with code). For more information, please follow other related articles on the PHP Chinese website!