foreword
Review of the previous section
The previous section explained the preparations before the entry of book information, mainly using the el-form of ElementUI to make the basic layout of the entry interface, including el-input el-select el-date-picker and image upload and other components. At the same time, after the layout is completed, use the rules that come with el-form to verify the data before submission. Students who don’t understand the context can take a look: Use Vue + el-form + rules to realize the function of book information entry
This section introduces
This section is already the 13th practical blog of this column. Based on the previous section, the submitted data has been verified. It is time to start assembling the data and then use axios to submit it. Once the submission is successful, a large part of the project's functions will be completed, and the next step is the book list module.
Table of contents
2. Assembly of Vue project JSON data
2. The function points requested by axios
2. Maintain and enter book url
3. Add a request method for entering book information
3. Sending requests in business components
1. Introduce the request method
3. Processing of data returned by the interface
4. SetTimeout should be manually cleared
1. Data assembly
Now the data submitted by the general interface, the front end and the front end will coordinate the use of JSON format, that is to say, the value of the Content-Type attribute in the request header of the interface is application/json.
1. Default data assembly
Before using the Vue project, when we submit the data, we need to assemble the input parameter data, or when we are used to using the form form earlier, the name value of the element in the form is the data to be submitted. Then the normal JSON data assembly should look like this in this case
let params = {
bookName: this.form.bookName,
bookNo: this.form.bookNo,
bookType: this.form.bookType,
author: this.form.author,
publisher: this.form.publisher,
publishDate: this.form.publishDate,
description: this.form.description,
coverImage: this.form.coverImage,
}2. Assembly of Vue project JSON data
But in the Vue project, in addition to the one-to-one correspondence between the data dependency and the DOM part, you will find that the form in the data dependency is just the pre-assembly of the submitted array, so you can directly do this:
let params = this.form;In this way, the JSON data obtained by params happens to be the data of the form. Not enough. In this case, the data of the form just corresponds to the data submitted by the interface, which can be easily done in this way. But in real work, there will definitely be projects of the moth type, which need to use the previous assembly method. So the first method of assembling data must also be available.
2. The function points requested by axios
The data has been assembled, and the next step is to send the axios request, so what preparations are needed in this project, let's take a look
1. Create a new api file
A new module has arrived, so the instance method of sending the request needs to create a new file, the new file src\api\bookManager.js
2. Maintain and enter book url
In the src\config\httpUrl.js file, add the interface url for entering books. This url is defined by the server staff and given to us, as shown in the figure
3. Add a request method for entering book information
In the newly created src\api\bookManager.js file, add the request method, and the subsequent module of the entire book management, the request method will be in this file. The interface method for uploading pictures before is placed in a separate file, because the project may There are many requirements that need to use image upload, so image upload is counted as a public method, so it is not added to this file, the code is as follows
import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';
// 录入图书信息
export function enterBook(data) {
return request({
url: URLS.createBook,
method: 'post',
data,
});
}3. Sending requests in business components
The input parameter data is ready, and the parts requested by axios are ready. Next, it is time to return to the business component and actually trigger and send the request for entering book information.
1. Introduce the request method
Introduce the axios instance method in the src\views\bookManager\Create.vue file
import { enterBook } from '@/api/bookManager.js';2. Send request
The previous section said that the submit button calls the handleSubmit method. After the verification data is passed, in order to avoid the button being clicked repeatedly, this method adds the switch limit of isLoading . The default setting is false. When the data is submitted, it is changed to true, then the submit button starts to be in the state of loading submission. code show as below:
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('已验证通过');
this.isLoading = true;
let params = this.form;
enterBook(params).then((res) => {
console.log(res);
if (res.code != 200) {
this.isLoading = false;
this.$message.error(res.message);
return;
}
this.isLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
let enterTimeout = setTimeout(() => {
window.clearTimeout(enterTimeout);
enterTimeout = null;
this.$router.push('/book-manager');
}, 1500)
})
}
})
},3. Processing of data returned by the interface
There must be normal and abnormal situations in the interface return, so when the interface is abnormal, that is, when the returned code value is not 200, we will prompt the user with msg information, and change the isLoading switch variable to false, so that the user can finish processing You can continue to submit after the abnormal situation, and add the return code at the same time to stop the code from continuing to execute
If the interface returns to the normal state, then the "Successful submission" prompt will pop up normally, and after the user sees the pop-up prompt, the user will jump to the book list page with a delay of 1500 milliseconds.
4. SetTimeout should be manually cleared
Many people think that if setTimeout does not refer to external compound variables internally, or if it is not used for recursive calculations, it does not need to be manually cleared, and the browser will automatically release it. However, Brother Gou suggests that wherever setTimeout is used, no matter how simple things are done internally, it must be cleared manually . And the code is not complicated, it's easy. Because in the follow-up maintenance of the code, no one knows who will do what in the code, and no one can tell what will happen to the future technology, just like no one said setInterval earlier, this, that, suddenly one day , the interviewers started to ask what is the problem with setInterval, just like waking up one day, the company's server began to upgrade log4j, and many people like to use third-party components, so install it, many people will install it if they pay attention Yes, in case the user is using it one day, a wonderful message suddenly pops up, haha, it’s far away.
at last
This column is a practical series of front-end and back-end separation projects jointly created by me and the server Tiange ( Tiange homepage ). Tiange's server is: SpringBoot+Vue front-end separation project practice . Brother Tian has already released a lot of interfaces. I want to write a book recently, and I am working hard day and night, so the progress is quite behind. I will work harder, and many friends who bought the column will also get it. Good luck with the latest source code.
Finally, I prepared a voting session for everyone, I hope you like it