Table of contents
1. What have you done recently?
2. Problems encountered and solutions
1. What have you done recently?
1. Mainly record what was done from the end of April to the beginning of May, and some problems encountered.
1.1 During this period, it is mainly the front-end writing and back-end logic writing of the client. I am mainly responsible for the display of application information on the client side and the display of application details.
1.2 Application information display part:
According to the flag field of the application, it is divided into tabs such as All, Passed, Failed, and Not Approved. The interfaces of applications in different statuses are also different (how to realize the display of applications in different statuses will be discussed below).
1.3 Application information details part:
Mainly the logic that deals with viewing keys and expiration times. This logic is more complicated, and it also involves and modifies a lot of database information. That is, there are some problems with axios communication here, resulting in illogical front-end errors. It will be described in detail below.
2. Problems encountered and solutions
1. Axios communication causes Vue front-end error
The interface is as follows:
The code is as follows (see the detailed method to display the information of the above picture):
getDetails(pid,id){
if(pid < 0){
this.$message.error('该申请对应发布已被删除！');
}
else{
console.log(id+"id-----------")
//先显示失效时间
this.getShiXiaoTime(id);
axios.get(`api/getApplicationDetail/${id}`).then(res=>{
console.log(res.data)
this.formData = res.data;
if(this.formData.application.apg ===1){
this.formData.application.apg = '通过'
}else{
if(this.formData.application.apg ===0){
this.formData.application.apg = '未通过'
}
else{
this.formData.application.apg = '未审核'
}
}
})
this.dialogVisible = true;
//这里同样要对失效位进行修改
//获取失效位
this.getShiXiaoWei(id);
if(this.shixiaowei == 0){
//已查看未失效
if(this.shixiaoTime == '当前申请已失效'){
this.changeShiXiaoWei(id,1);
}else{
//未失效就不用管啦
}
}
else{
if(this.shixiaowei == 1){
}
else{
//失效位为2
}
}
}
},in
Both this.getShiXiaoTime(id) and this.getShiXiaoWei(id) methods use axios to send get requests to the backend.
The problem is as follows :
After clicking to view the details, the expiration time will be displayed as expired, but the key can still be viewed, and you can also jump to the operation interface. Logically, if the application expiration time has passed, the system will directly report an error. But after re-entering, you will find that the expiration time can be displayed, but the system has already reported the failure before the expiration time.
Tried again afterwards, still got the same error.
Solution:
Step1: Reorganized the logic as follows, and found that there is no problem:
Click the View Details button to first check whether the corresponding release of the application has been deleted by the administrator. If it is deleted, it will prompt that the application is useless; otherwise, call the method to check the expiration time and update it, and then judge the expiration bit. According to the comparison between the expiration time and the current time, the expiration Just update the fail bit. If the application has not checked the key when clicking View Details again, the expiration time is empty at this time, and the user is reminded to check the key.
step2: Because the getShiXiaoTime(id) and getShiXiaoWei(id) methods are called to assign global variables. Therefore, in these two methods, the obtained data is output on the front-end console, and at the same time, the assigned global variables are output on the front-end before and after the getDetails(pid, id) calls these two methods.
It is found that the global variable has not been assigned a value, so the output is marked with serial numbers 1, 2, and 3 in turn, and it turns out that the execution sequence is: 2, 3, 1! So the statement that called the method was executed too late, so it was not assigned! After that, the execution of the statement is completed, and then click to view the details, the data assignment is completed, and the new judgment result is entered, so there will be illogical errors!
step3: So how to execute the statements sequentially? First briefly introduce the method:
Axios is a promise-based HTTP library that supports the Promise API.
async/await is a new way to write asynchronous or non-blocking code built on top of Promises. async It means asynchronous, await but async waitshorthand for asynchronous waiting. Semantically, it is well understood asyncthat it is used to declare that a function is asynchronous, and await is used to wait for an asynchronous method to complete
Therefore, use async/awaitthe encapsulated getDetails(pid,id) method, and the called methods getShiXiaoTime(id) and getShiXiaoWei(id) also need to be encapsulated.
The updated code is as follows:
async getDetails(pid,id){
if(pid < 0){
this.$message.error('该申请对应发布已被删除！');
}
else{
console.log(id+"id-----------")
//先显示失效时间
await this.getShiXiaoTime(id);//这里就已经更新过失效时间
axios.get(`api/getApplicationDetail/${id}`).then(res=>{
console.log(res.data)
this.formData = res.data;
if(this.formData.application.apg ===1){
this.formData.application.apg = '通过'
}else{
if(this.formData.application.apg ===0){
this.formData.application.apg = '未通过'
}
else{
this.formData.application.apg = '未审核'
}
}
})
this.dialogVisible = true;
//这里同样要对失效位进行修改
//获取失效位
await this.getShiXiaoWei(id);
if(this.shixiaowei == 0){
//已查看未失效
//this.getShiXiaoTime(id);//因为要比较当前时间和失效时间，这里直接借用一下叭
if(this.shixiaoTime == '当前申请已失效'){
this.changeShiXiaoWei(id,1);
}else{
//未失效就不用管啦
}
}
else{
if(this.shixiaowei == 1){
}
else{
//失效位为2
}
}
}
},step4: That's it!
2. Interface display - the use of v-if
question:
The front-end logic is as follows. Passed applications can view the key, and there is also an expiration time, such as the picture shown above. Unapproved and unapproved applications do not display these, and there is no operation button. Determine whether the element ui component is displayed according to the application type.
code show as below:
<el-form-item v-if="formData.application.apg == '通过'?true:false" label="密钥:"
width="50">
<el-button @click="getKeys(formData.application.id)" type="text" size="small" style="color: #5cb85c">查看密钥</el-button>
</el-form-item>
<el-form-item v-if="this.formData.application.apg == '通过'?true:false" label="失效时间:"
width="100">
<span>{
{this.shixiaoTime}}</span>
</el-form-item>
<el-form-item v-if="this.formData.application.apg == '通过'?true:false" label="申请入口:"
width="50%">
<el-button @click="jsonInput(formData.application.id)" type="text" size="small" style="color: #5cb85c">点击跳转操作界面</el-button>
</el-form-item>