前文
JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(一)答案獲取
Spring Boot——易班優課YOOC課羣在線測試自動答題解決方案(二)答案儲存
Spring Boot——易班優課YOOC課羣在線測試自動答題解決方案(三)答案查詢
JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(四)答案顯示
JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(五)簡單腳本
Spring Boot——易班優課YOOC課羣在線測試自動答題解決方案(六)後端改造
JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(七)隨機答案
解決方案
前端
<template>
<div class="exam-question-query-dashboard">
<div style="height: 10%">
<el-row>
<el-col :span="12">
<el-row >
<el-col :span="5" :offset="1">
<el-input
v-model="keyword.group"
placeholder="課羣ID"></el-input>
</el-col>
<el-col :span="5" :offset="1">
<el-input
v-model="keyword.exam"
placeholder="測試ID"></el-input>
</el-col>
<el-col :span="5" :offset="1">
<el-input
v-model="keyword.id"
placeholder="題目ID"></el-input>
</el-col>
<el-col :span="6">
<el-button
icon="el-icon-search"
type="primary"
@click="search">
搜索
</el-button>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="5" :offset="1">
<el-button
icon="el-icon-view"
type="primary"
@click="visible=true">
URL分析
</el-button>
</el-col>
<el-col :span="5" :offset="1">
<el-button
icon="el-icon-check"
type="primary"
@click="load('all')">
加載全部
</el-button>
</el-col>
<el-col :span="5" :offset="1">
<el-button
icon="el-icon-download"
type="primary"
@click="downloadMater(questions)">
導出
</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
<div style="height: 90%">
<el-scrollbar
style="height: 100%"
wrap-class="scrollbar-wrapper">
<ul
class="infinite-list"
v-infinite-scroll="load"
infinite-scroll-delay="1000"
:infinite-scroll-disabled="disabled">
<li v-for="(question,index) in questions" class="infinite-list-item">
<div style="width: 100%">
<p>
課羣ID:<span v-text="question.group"></span>
測試ID:<span v-text="question.exam"></span>
題目ID:<span v-text="question.id"></span>
</p>
</div>
<div class="exam-detial-container" v-html="question.question"></div>
</li>
</ul>
<div v-if="disabled">已加載全部</div>
<div v-else>加載中...</div>
</el-scrollbar>
</div>
<el-dialog
title="URL分析"
:visible="visible"
width="80%"
>
<el-input
v-model="url"
style="width: 100%"
prefix-icon="el-icon-edit"
placeholder="請輸入測試頁的URL"
>
</el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="visible=false">取 消</el-button>
<el-button type="primary" @click="URLAnalysis">分析</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import request from '@/utils/request'
import XLSX from 'xlsx'
import FileSaver from "file-saver";
import '@/assets/css/exam-detial.css'
export default {
name: "ExamQuestionQuery",
data () {
return {
count: 0,
questions:[],
page:1,
size:10,
disabled:false,
total:0,
visible:false,
keyword:{
group:"",
exam:"",
id:""
},
url:""
}
},
created(){
},
mounted(){
// let dom=document.querySelector(".el-scrollbar__view .infinite-list")
// dom.setAttribute("infinite-scroll-delay","1000")
},
methods: {
search(){
this.questions=[]
this.page = 1
this.disabled=false
this.load()
},
URLAnalysis(){
this.visible=false
//eg. https://www.yooc.me/group/164263/exam/110782/detail
this.keyword.group = this.url.match(/group\/(\S*)\/exam/)[1];
this.keyword.exam = this.url.match(/exam\/(\S*)\/detail/)[1];
console.log(this.url)
},
getParams(base){
let data = {}
if(base)
data = base
for(let key in this.keyword){
let value = this.keyword[key]
if(value!=="" && typeof value !== undefined && value !== null){
data[key]=this.keyword[key]
}
}
return data
},
loadAll(){
let data = this.getParams({page:1,size:this.total})
request({
url: 'http://localhost/MyZSTU/yooc/group/exam/question/',
method: 'get',
params:data
}).then(res=>{
this.questions=res.data.records
this.total=res.data.total
this.disabled=true
})
},
load (mode) {
let data = this.getParams({page:this.page,size:this.size})
request({
url: 'http://localhost/MyZSTU/yooc/group/exam/question/',
method: 'get',
params: data
}).then(res=>{
this.questions=this.questions.concat(res.data.records)
this.total=res.data.total
this.page = Math.min(Number(res.data.pages),Number(res.data.current))+1
if(res.data.pages === res.data.current){
this.disabled=true
}
if(mode){
if(mode === "all"){
//嘗試加載下一頁獲取最新總記錄數
this.loadAll()
}
}
})
},
downloadMater(data) {
const defaultCellStyle = {
font: { name: "Verdana", sz: 11, color: "FF00FF88" },
fill: { fgColor: { rgb: "FFFFAA00" } }
};
const wopts = {
bookType: "xlsx",
bookSST: false,
type: "binary",
defaultCellStyle: defaultCellStyle,
showGridLines: false
};
const wb = { SheetNames: ["Sheet1"], Sheets: {}, Props: {} };
wb.Sheets["Sheet1"] = XLSX.utils.json_to_sheet(data);
//創建二進制對象寫入轉換好的字節流
let tmpDown = new Blob([this.s2ab(XLSX.write(wb, wopts))], {
type: "application/octet-stream"
});
// 保存文件
FileSaver.saveAs(tmpDown, "hello world.xls");
},
// 字符串轉字符流
s2ab(s) {
if (typeof ArrayBuffer !== "undefined") {
let buf = new ArrayBuffer(s.length);
let view = new Uint8Array(buf);
for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
} else {
let buf = new Array(s.length);
for (let j = 0; j != s.length; ++j) buf[j] = s.charCodeAt(j) & 0xff;
return buf;
}
}
}
}
</script>
<style lang="scss">
.exam-question-query-dashboard{
height: 100%;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.infinite-list {
padding: 0;
margin: 0;
list-style: none;
.infinite-list-item {
align-items: center;
justify-content: center;
background: #e8f3fe;
margin: 10px;
color: #7dbcfc;
padding: 10px;
text-align: left;
}
}
</style>
後端
/**
* @Author ShenTuZhiGang
* @Version 1.0.0
* @Date 2020-04-26 16:55
*/
@Controller
@CrossOrigin
@RequestMapping("/yooc/group/exam/question")
public class YOOCExamQuestionBasicController {
@Autowired
IYOOCExamQuestionService iyoocExamQuestionService;
@ResponseBody
@RequestMapping(value = "/",method = {RequestMethod.GET})
public Object getUserByPage(@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size,
Question question){
return iyoocExamQuestionService.page(new Page<>(page,size), new QueryWrapper<>(question));
}
}
運行效果
參考文章
https://shentuzhigang.blog.csdn.net/article/details/105810763
https://www.cnblogs.com/wangdashi/p/9606182.html