前文

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课群在线测试自动答题解决方案(十)问题管理页面相关推荐

JavaScript + Thymeleaf + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十八)模板脚本
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十九)强制重做
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十六)利用PC端和移动端BUG
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十五)整合升级+引入jQuery
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十二)脚本整合
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十四)自动刷题
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
JavaScript + Tampermonkey——易班优课YOOC课群在线测试自动答题解决方案(十七)复合型解决方案油猴脚本
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...
Web安全——易班优课YOOC课群在线测试自动答题解决方案
基本概念易班优课YOOC:优课YOOC"是易班网于2016年4月研发并推出的基于Social Learning的理念而开发的在线学习平台. 官方网站:https://www.yooc.me ...
JavaScript——易班优课YOOC课群在线测试自动答题解决方案(十三)自动答题
前文 JavaScript--易班优课YOOC课群在线测试自动答题解决方案(一)答案获取 Spring Boot--易班优课YOOC课群在线测试自动答题解决方案(二)答案储存 Spring Boot- ...

Vue + Element UI + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十)问题管理页面

前文

解决方案

运行效果

参考文章

Vue + Element UI + Spring Boot——易班优课YOOC课群在线测试自动答题解决方案(十)问题管理页面相关推荐

最新文章

热门文章