用UNIapp写一个检测该网页非正常关闭,在有效期内,提示用户是否进入上次考试
时间: 2024-02-01 22:17:03 浏览: 32
首先,我们需要在前端页面中添加一个监听窗口关闭事件的函数,并且在该事件触发时向后端发送请求,判断当前用户是否有正在进行的考试。
以下是一个简单的实现:
1. 在页面加载时向后端发送请求,获取当前用户是否有正在进行的考试。
```javascript
mounted() {
// 向后端发送请求,获取当前用户是否有正在进行的考试
axios.get('/api/checkExamStatus')
.then(response => {
if (response.data.hasExam) {
this.showExamConfirm = true;
}
})
.catch(error => {
console.log(error);
});
},
```
2. 添加一个监听窗口关闭事件的函数。
```javascript
beforeDestroy() {
// 监听窗口关闭事件
window.addEventListener('beforeunload', this.onBeforeUnload);
},
methods: {
onBeforeUnload(event) {
// 向后端发送请求,判断当前用户是否有正在进行的考试
axios.get('/api/checkExamStatus')
.then(response => {
if (response.data.hasExam) {
// 如果有正在进行的考试,则提示用户是否进入上次考试
event.returnValue = '您有未完成的考试,确定要离开吗?';
}
})
.catch(error => {
console.log(error);
});
},
},
```
3. 在用户关闭页面时,如果有正在进行的考试,则弹出提示框。
```html
<template>
<div>
<div v-if="showExamConfirm">
<p>您有未完成的考试,确定要离开吗?</p>
<button @click="goToExam">进入上次考试</button>
<button @click="cancelExam">取消</button>
</div>
</div>
</template>
```
```javascript
methods: {
goToExam() {
// 跳转到上次考试页面
window.location.href = '/exam';
},
cancelExam() {
// 取消关闭窗口操作
this.showExamConfirm = false;
},
},
```
当用户在有效期内关闭页面时,如果有正在进行的考试,则会弹出提示框,让用户选择是否进入上次考试。如果用户选择进入上次考试,则会跳转到上次考试页面;如果用户选择取消,则会取消关闭窗口的操作。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)