Web Front-end
JS Tutorial
Detailed explanation of steps to add background mock interface in vue-cli project
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Discuz background login problem solution revealed
Mar 03, 2024 am 08:57 AM
The solution to the Discuz background login problem is revealed. Specific code examples are needed. With the rapid development of the Internet, website construction has become more and more common, and Discuz, as a commonly used forum website building system, has been favored by many webmasters. However, precisely because of its powerful functions, sometimes we encounter some problems when using Discuz, such as background login problems. Today, we will reveal the solution to the Discuz background login problem and provide specific code examples. We hope to help those in need.
Use JUnit unit testing framework Mock static method
Apr 18, 2024 pm 12:45 PM
How to Mock static methods using JUnit unit testing framework: PowerMock: Add PowerMock dependency. Use the @PrepareForTest annotation to specify the static method to be mocked. Use EasyMock to Mock static methods. EasyMock: Import the EasyMock class. Use the EasyMock.mockStatic() method to Mock static methods. Use the expect() method to set the expected value and the replay() method to perform the call.
Are you worried about WordPress backend garbled code? Try these solutions
Mar 05, 2024 pm 09:27 PM
Are you worried about WordPress backend garbled code? Try these solutions, specific code examples are required. With the widespread application of WordPress in website construction, many users may encounter the problem of garbled code in the WordPress backend. This kind of problem will cause the background management interface to display garbled characters, causing great trouble to users. This article will introduce some common solutions to help users solve the trouble of garbled characters in the WordPress backend. Modify the wp-config.php file and open wp-config.
How to use mock to simulate data problems in vite+vue3
May 15, 2023 am 08:07 AM
1. Install mockjs and vite-plugin-mocknpmimockjsvite-plugin-mock--save-dev2. Configure the usage of vite-plugin-mock in the vite.config.ts file import{defineConfig}from'vite'importvuefrom'@vitejs/plugin -vue'import{viteMockServe}from'vite-plugin-mock
Discuz background account login exception, how to deal with it?
Mar 09, 2024 pm 05:51 PM
Title: Discuz background account login exception, how to deal with it? When you use the backend management of the Discuz forum system, you may sometimes encounter abnormal account login. This could be due to a variety of reasons, including a wrong password, account being blocked, network connection issues, etc. When encountering this situation, we need to solve the problem through simple troubleshooting and processing. Check whether the account number and password are correct: First, confirm whether the account number and password you entered are correct. When logging in, make sure the capitalization is correct and the password is
How to disable background running of software in Win11?
Jun 30, 2023 am 08:17 AM
How to disable software from running in the background in win11? We are using some software. When we are not using it, we will close the software. Some software will still run in the background after it is closed. During the process of running in the background, the computer will cause a certain amount of lag. Some friends want to know what should be done. How to disable software from running in the background in win11. The editor below has compiled the steps to disable software from running in the background in Win11. If you are interested, follow the editor and take a look below! Steps to disable software running in the background in win11: 1. Press the shortcut key "win+X" and select "Settings" from the options given above. 2. After entering the new interface, click "Apps" and then find "Applications and Features" on the right. 3. In it, find “Microsoft Information” and click
Discuz background login failed? Teach you how to solve it easily!
Mar 02, 2024 pm 06:03 PM
Discuz background login failed? Teach you how to solve it easily! As Discuz, as a popular forum platform, is widely used in website construction and management, sometimes you will encounter backend login failures, which is troubling. Today we will discuss the issues that may cause Discuz backend login failure, provide some solutions, and attach specific code examples. I hope this article can help webmasters and developers who encounter similar problems. 1. Troubleshooting is to solve the problem of Discuz background login failure.
How to smoothly switch between different applications under Linux system
Feb 19, 2024 pm 03:00 PM
Switching between different applications is achieved through the front and back switching of processes. Background: After Linux starts a program, it switches to the background for execution and wants to continue operating in Linux. In Linux, you can use the following methods to start and exit a program in the background, but still keep its process running: 1. Linux starts a program to execute in the background 1. Use nohup and &: $nohupyour_program& Use the nohup command to make The program ignores the hang-up signal (SIGHUP) so that the program continues to run even if you exit the terminal. The & symbol causes the program to run in the background. 2. Use ctrl+Z: If you have started the program in the foreground, you can use ct
