前文

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(一)答案獲取

Spring Boot——易班優課YOOC課群在線測試自動答題解決方案(二)答案儲存

Spring Boot——易班優課YOOC課群在線測試自動答題解決方案(三)答案查詢

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(四)答案顯示

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(五)簡單腳本

Spring Boot——易班優課YOOC課群在線測試自動答題解決方案(六)后端改造

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(七)隨機答案

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(八)功能面板

JavaScript——易班優課YOOC課群在線測試自動答題解決方案(九)ID標簽

解決方案

前端?

<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-inputv-model="keyword.group"placeholder="課群ID"></el-input></el-col><el-col :span="5" :offset="1"><el-inputv-model="keyword.exam"placeholder="測試ID"></el-input></el-col><el-col :span="5" :offset="1"><el-inputv-model="keyword.id"placeholder="題目ID"></el-input></el-col><el-col :span="6"><el-buttonicon="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-buttonicon="el-icon-view"type="primary"@click="visible=true">URL分析</el-button></el-col><el-col :span="5" :offset="1"><el-buttonicon="el-icon-check"type="primary"@click="load('all')">加載全部</el-button></el-col><el-col :span="5" :offset="1"><el-buttonicon="el-icon-download"type="primary"@click="downloadMater(questions)">導出</el-button></el-col></el-row></el-col></el-row></div><div style="height: 90%"><el-scrollbarstyle="height: 100%"wrap-class="scrollbar-wrapper"><ulclass="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>&nbsp;&nbsp;測試ID:<span v-text="question.exam"></span>&nbsp;&nbsp;題目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-dialogtitle="URL分析":visible="visible"width="80%"><el-inputv-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 = 1this.disabled=falsethis.load()},URLAnalysis(){this.visible=false//eg. https://www.yooc.me/group/164263/exam/110782/detailthis.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 = basefor(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.recordsthis.total=res.data.totalthis.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.totalthis.page = Math.min(Number(res.data.pages),Number(res.data.current))+1if(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 {@AutowiredIYOOCExamQuestionService 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

https://segmentfault.com/q/1010000017274335

https://blog.csdn.net/qq_38382380/article/details/82057379

總結

以上是生活随笔為你收集整理的Vue + Element UI + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十)问题管理页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。