目录
一、最近做了什么？
1.主要记录一下四月底到五月初做了什么，以及遇到的一些问题。
1.1 这段时间主要还是用户端的前端书写和后端逻辑的书写。我主要负责用户端申请信息的展示以及申请详情的展示。
1.2 申请信息展示部分：
根据申请的标志字段分为全部、通过、未通过、未审核等tab展示。不同状态申请的界面也有不同（如何实现在全部申请显示时，不同状态申请展示情况不同也会在下面讲一下）。
1.3 申请信息详情部分：
主要涉及查看密钥和失效时间的逻辑。这个逻辑比较复杂，也涉及并修改了许多数据库信息。也就是这里axios通信出了一些问题，导致毫无逻辑的前端错误。下面会详细说。
二、遇到的问题和解决办法
1.axios通信导致vue前端错误
界面如下：
代码如下（查看详情方法，展示上面图片的信息）：
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
}
}
}
},其中
this.getShiXiaoTime(id)和this.getShiXiaoWei(id)两个方法都使用了axios向后端发送get请求。
问题如下：
会导致在点击查看详情之后，失效时间显示已失效，但是仍然可以查看密钥，也可以跳转到操作界面。按照逻辑如果已经超过申请失效时间，系统会直接报错。但是之后再次进入之后，会发现失效时间可以展示，但是还未到失效时间系统就已经报失效。
之后重新尝试，还是有同样的错误。
解决方法：
step1：重新梳理了一下逻辑如下，发现没有问题：
点击查看详情按钮，首先查看该申请对应发布是否被管理员删除，如果删除就提示该申请无用；否则就调用方法，查看失效时间并更新，然后判断失效位，根据失效时间和当前时间比较，失效就更新失效位。如果再点击查看详情时，该申请还没有查看过密钥，此时 失效时间为空，提醒用户查看密钥。
step2：因为调用了getShiXiaoTime(id)和getShiXiaoWei(id)方法来赋值全局变量。所以在这两个方法中，将获取到的数据在前端控制台输出，同时在getDetails(pid,id)调用这两个方法调用前和调用后，对被赋值的全局变量进行前端输出。
发现全局变量没有被赋值，所以对输出依次标上序号1，2，3，结果发现执行顺序为：2，3，1！所以是调用方法的语句执行太晚了，所以没有被赋值！之后，该语句执行完成了，再点击查看详情，数据完成赋值，进入新的判定结果，所以才会出现毫无逻辑的错误！
step3：所以怎么使语句顺序执行呢？先简单介绍下方法：
Axios 是一个基于 promise 的 HTTP 库，它支持 Promise API。
async/await 是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async 是异步的意思，而 await 是 async wait的简写，即异步等待。从语义上就很好理解 async用于声明一个 函数是异步的，而await 用于等待一个异步方法执行完成
所以，使用async/await封装getDetails(pid,id)方法，同时被调用的方法getShiXiaoTime(id)和getShiXiaoWei(id)也需要封装。
更新后代码如下：
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：这样就可以啦！
2.界面展示——v-if的使用
问题：
前端逻辑如下，通过的申请可以查看密钥，也有失效时间，如上面展示的图片，未通过和未审核是的申请不展示这些，也没有操作按钮。根据申请类型判断该elemen ui组件是否展示。
代码如下：
<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>