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

前文

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-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>&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-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

https://segmentfault.com/q/1010000017274335

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页