需求:防止用户误点刷新或者误按f5导致试卷没提交
1、最初解决方案:
使用beforeUnload弹出窗口提醒用户是否要重载页面,并在unload里面提交试卷
mounted(){
window.addEventListener("beforeunload", this.handleBeforeunload, false)
window.addEventListener("unload", this.handleUnload, false)
},
beforeDestroy(){
window.removeEventListener( 'beforeunload', this.handleBeforeunload)
window.removeEventListener( 'unload', this.handleUnload )
},
methods:{
handleBeforeunload(event){
event.returnValue = false
},
handleUnload(){
if ( !this.isDone && this.isStart ) {
// 提交试卷
this.toKaoShiOver()
}
},
}
问题:页面卸载了,可是接口没走完,导致试卷没提交上
2、最终解决方案:
beforeunload保留,而提交试卷请求放在unload的,换成放在页面刷新后的接口判断试卷是否已答里面调用
由于误点刷新或者误按f5后还是回到当前页,而一进页面会请求一个接口判断试卷是否已答,若已答但未提交,那么立即提交试卷,完美解决!
总结:思路变换~