欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

java+vue实现添加单选题、多选题到题库功能

程序员文章站 2024-02-23 17:18:16
本文为大家分享了java+vue实现添加选择题到题库功能的具体代码,供大家参考,具体内容如下 做个备份 数据库表: 后台接口 @deletemapp...

本文为大家分享了java+vue实现添加选择题到题库功能的具体代码,供大家参考,具体内容如下

做个备份

数据库表:

java+vue实现添加单选题、多选题到题库功能

java+vue实现添加单选题、多选题到题库功能

后台接口

@deletemapping("deletequestion")
 @apioperation(value = "删除问题")
 public serverresponse deletequestion(integer id){
 sysquestionmapper.deletebyprimarykey(id);
 sysquestionanswermapper.deletebyquestionid(id);
 return serverresponse.createbysuccess("删除成功");
 }

 @getmapping("getquestionlist")
 @apioperation(value = "获得问题列表")
 public serverresponse getquestionlist(){
 list<sysquestion> list = sysquestionmapper.selectallquestion();
 return serverresponse.createbysuccess(list);
 }

 @getmapping("getquestionanswerlist")
 @apioperation(value = "获得问题选项列表")
 public serverresponse getquestionanswerlist(integer question_id){
 list<sysquestionanswer> list = sysquestionanswermapper.selectbyquestionid(question_id);
 return serverresponse.createbysuccess(list);
 }

 @postmapping("addquestion")
 @apioperation(value = "添加问题")
 public serverresponse addquestion(string question,string[] answerlist,integer[] answer){
 integer type = 1;
 if (answer.length != 1) {
 type = 2;
 }
 string stringanswer = "";
 list<integer> list = arrays.aslist(answer);
 sysquestion sysquestion = new sysquestion();
 sysquestion.setquestionname(question);
 sysquestion.setcreatetime(new date());
 sysquestion.settype(type);
 sysquestionmapper.insert(sysquestion);
 integer question_id = sysquestionmapper.selectlastquestionid();
 for (int i=0;i<answerlist.length;i++){
 sysquestionanswer sysquestionanswer = new sysquestionanswer();
 sysquestionanswer.setanswer(answerlist[i]);
 sysquestionanswer.setquestionid(question_id);
 sysquestionanswermapper.insert(sysquestionanswer);
 integer answer_id = sysquestionanswermapper.selectlastanswerid();
 if (list.contains(i)) {
 stringanswer = stringanswer + "," + answer_id;
 }
 }
 system.out.println(stringanswer);
 stringanswer = stringanswer.substring(1,stringanswer.length());
 system.out.println(stringanswer);
 sysquestion sysquestion1 = sysquestionmapper.selectbyprimarykey(question_id);
 sysquestion1.setanswerid(stringanswer);
 sysquestionmapper.updatebyprimarykey(sysquestion1);
 return serverresponse.createbysuccess("创建成功");
 }

 @postmapping("updatequestion")
 @apioperation(value = "更新问题")
 public serverresponse updatequestion(integer question_id,string question,string[] answerlist,integer[] answer){
 integer type = 1;
 if (answer.length != 1) {
 type = 2;
 }
 string stringanswer = "";
 list<integer> list = arrays.aslist(answer);
 sysquestionanswermapper.deletebyquestionid(question_id);
 for (int i=0;i<answerlist.length;i++){
 sysquestionanswer sysquestionanswer = new sysquestionanswer();
 sysquestionanswer.setanswer(answerlist[i]);
 sysquestionanswer.setquestionid(question_id);
 sysquestionanswermapper.insert(sysquestionanswer);
 integer answer_id = sysquestionanswermapper.selectlastanswerid();
 if (list.contains(i)) {
 stringanswer = stringanswer + "," + answer_id;
 }
 }
 stringanswer = stringanswer.substring(1,stringanswer.length());
 sysquestion sysquestion1 = sysquestionmapper.selectbyprimarykey(question_id);
 sysquestion1.setanswerid(stringanswer);
 sysquestion1.setquestionname(question);
 sysquestion1.settype(type);
 sysquestion1.setupdatetime(new date());
 sysquestionmapper.updatebyprimarykey(sysquestion1);
 return serverresponse.createbysuccess("更新成功");
}

代码中涉及的sql语句

<select id="selectlastquestionid" resulttype="int">
  select max(id) from sys_question
 </select>

 <select id="selectallquestion" resultmap="baseresultmap">
  select * from sys_question order by create_time desc
</select>
<select id="selectbyquestionid" resultmap="baseresultmap">
  select * from sys_question_answer
  where question_id=#{question_id}
 </select>

 <select id="selectlastanswerid" resulttype="int">
  select max(id) from sys_question_answer
 </select>

 <delete id="deletebyquestionid">
  delete from sys_question_answer where question_id=#{question_id}
</delete>

vue页面

<!-- -->
<style lang="scss">
 tr {
 & > td.el-table__expanded-cell {
 font-size: 20px;
 }
 }
 .el-textarea.is-disabled .el-textarea__inner{
 color: #17181a !important;
 }
</style>
<style lang="scss" scoped>
 .shop-container {
 padding: 10px;
 }

 @import url("//unpkg.com/element-ui@2.4.0/lib/theme-chalk/index.css");
 .demo-table-expand {
 font-size: 0;
 }

 .demo-table-expand label {
 width: 90px;
 color: #67c23a;
 }

 .demo-table-expand .el-form-item {
 margin-right: 0;
 margin-bottom: 0;
 width: 100%;
 }

 .el-dialog {
 width: 50% !important;
 }
 .el-form-item {
 float: none!important;
 }
</style>
<template>
 <div class="product-container" v-loading.fullscreen.lock=fullscreenloading>
 <div style="margin-top:10px;width: 100%">
 <div style="width: 20%;display:inline;float:right">
 <el-button @click="flag = 0, dialogformvisible = true, text = '添加'" type="primary" round>添加</el-button>
 </div>
 </div>

 <el-dialog v-dialogdrag :title="text" :visible.sync="dialogformvisible" :modal-append-to-body='false'>
 <el-form :model="dynamicvalidateform" ref="dynamicvalidateform" label-width="100px" class="demo-dynamic">
 <el-form-item prop="question" label="问题" :rules="{
 required: true, message: '问题不能为空', trigger: 'blur'
 }">
 <el-input v-model="dynamicvalidateform.question"></el-input>
 </el-form-item>
 <el-form-item v-for="(domain, index) in dynamicvalidateform.domains" :label="'选项' + (index + 1)" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{
 required: true, message: '选项不能为空', trigger: 'blur'
 }">
 <el-input v-model="domain.value"></el-input><el-button @click.prevent="removedomain(domain)">删除</el-button>
 </el-form-item>
 <el-form-item label="答案">
 <el-select v-model="value" multiple placeholder="请选择">
 <el-option
 v-for="(domain, index) in dynamicvalidateform.domains"
 :key="domain.key"
 :label="'选项' + (index + 1)"
 :value="index">
 </el-option>
 </el-select>
 </el-form-item>

 <el-form-item>
 <el-button type="primary" @click="submitform('dynamicvalidateform')">提交</el-button>
 <el-button @click="adddomain">新增选项</el-button>
 <el-button @click="resetform('dynamicvalidateform')">清空</el-button>
 </el-form-item>
 </el-form>
 </el-dialog>

 <el-table max-height="600" highlight-current-row header-align="center" align="center"
 :data="tabledata.slice((currentpage-1)*pagesize,currentpage*pagesize)" stripe style=" width: 100%"
 :default-sort="{prop: 'id',order: 'descending'}">
 <el-table-column label="问题" align="center" min-width="180px">
 <template slot-scope="scope">
 <el-input type="textarea" :disabled="true" style="font-size: 16px"
 :rows="2"
 placeholder="请输入内容"
 v-model="scope.row.questionname">
 </el-input>
 </template>
 </el-table-column>
 <el-table-column label="创建时间" prop="createtime" align="center" min-width="120px">
 </el-table-column>
 <el-table-column label="操作" align="center" min-width="250px" fixed="right">
 <template slot-scope="scope">
 <el-button @click="updatequestion(scope.row.id,scope.row.questionname,scope.row.answerid)" size="mini" type="primary">更新
 </el-button>
 <el-button @click="deletequestion(scope.row.id)" size="mini" type="danger">删除
 </el-button>
 </template>
 </el-table-column>
 </el-table>
 <div align="center">
 <el-pagination
 @size-change="handlesizechange"
 @current-change="handlecurrentchange"
 :current-page="currentpage"
 :page-sizes="[10, 20, 50, 100]"
 :page-size="pagesize"
 layout="total, sizes, prev, pager, next, jumper"
 :total="tabledata.length">
 </el-pagination>
 </div>
 </div>
</template>
<script>
 import img_404 from '@/assets/404_images/image404.png'
 import { mapstate, mapgetters } from 'vuex'
 import { getquestionlist, getquestionanswerlist, addquestion, updatequestion, deletequestion } from '@/api/question'
 export default {
 data() {
 return {
 text: '',
 question_id: '',
 flag: 0,
 value: [],
 dynamicvalidateform: {
 domains: [{
 value: ''
 }],
 question: ''
 },
 templateselection: '',
 total: null,
 dialogformvisible: false,
 fullscreenloading: false,
 img_404,
 tabledata: [],
 currentpage: 1,
 pagesize: 10
 }
 },

 watch: {},

 components: {},

 computed: {
 ...mapstate({
 userinfo: state => state.user.userinfo
 }),
 ...mapgetters([
 'orderlistdata'
 ])
 },

 methods: {
 deletequestion(id) {
 new promise((resolve, reject) => {
 deletequestion(id).then(res => {
 this.$message.info('删除成功')
 this.initdata()
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 })
 },
 updatequestion(id, question, answerid) {
 this.value = []
 this.question_id = id
 this.flag = 1
 this.text = '修改'
 this.dynamicvalidateform.question = question
 const answer = answerid.split(',').map(number)
 new promise((resolve, reject) => {
 getquestionanswerlist(id).then(res => {
 console.log(res)
 this.dynamicvalidateform.domains = []
 for (let i = 0; i < res.data.data.length; i++) {
 if (answer.indexof(res.data.data[i].id) !== -1) {
 this.value.push(i)
 }
 this.dynamicvalidateform.domains.push({
 value: res.data.data[i].answer
 })
 }
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 })
 this.dialogformvisible = true
 },
 submitform(formname) {
 console.log(this.value)
 if (this.value.length === 0) {
 this.$message.warning('答案不能为空')
 return
 }
 this.$refs[formname].validate((valid) => {
 if (valid) {
 const answerlist = []
 for (let i = 0; i < this.dynamicvalidateform.domains.length; i++) {
 answerlist.push(this.dynamicvalidateform.domains[i].value)
 }
 if (this.flag === 0) {
 const fromdata = {
 question: this.dynamicvalidateform.question,
 answerlist: answerlist,
 answer: this.value
 }
 new promise((resolve, reject) => {
 this.fullscreenloading = false
 addquestion(fromdata).then(res => {
 this.$message.success('添加成功')
 this.initdata()
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 })
 } else {
 const fromdata = {
 question: this.dynamicvalidateform.question,
 answerlist: answerlist,
 answer: this.value,
 question_id: this.question_id
 }
 new promise((resolve, reject) => {
 this.fullscreenloading = false
 updatequestion(fromdata).then(res => {
 this.$message.success('修改成功')
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 })
 }
 } else {
 console.log('error submit!!')
 return false
 }
 })
 },
 resetform(formname) {
 this.$refs[formname].resetfields()
 },
 removedomain(item) {
 this.value = []
 const index = this.dynamicvalidateform.domains.indexof(item)
 if (index !== -1) {
 this.dynamicvalidateform.domains.splice(index, 1)
 }
 },
 adddomain() {
 this.dynamicvalidateform.domains.push({
 value: '',
 key: date.now()
 })
 },
 submit(id) {
 this.newform.opinion = ''
 this.newform.id = id
 this.dialogformvisible = true
 },
 timestamptotime(timestamp) {
 var date = new date(timestamp)
 const y = date.getfullyear() + '-'
 const m = (date.getmonth() + 1 < 10 ? '0' + (date.getmonth() + 1) : date.getmonth() + 1) + '-'
 const d = date.getdate() + ' '
 const h = date.gethours() + ':'
 const m = date.getminutes() + ':'
 const s = date.getseconds()
 return y + m + d + h + m + s
 },
 handlesizechange: function(size) {
 this.pagesize = size
 },
 handlecurrentchange: function(currentpage) {
 this.currentpage = currentpage
 },
 async initdata() {
 this.fullscreenloading = true
 new promise((resolve, reject) => {
 this.fullscreenloading = false
 getquestionlist().then(res => {
 this.setdata(res)
 resolve(res)
 }).catch(err => {
 reject(err)
 })
 })
 },
 setdata(res) {
 console.log(res)
 this.tabledata = []
 this.tabledata = res.data.data
 for (var i = 0; i < this.tabledata.length; i++) {
 this.tabledata[i].createtime = this.timestamptotime(this.tabledata[i].createtime)
 }
 }
 },

 mounted: function() {
 this.initdata()
 }
 }

</script>
<style lang="scss" scoped>


</style>

实现效果:

java+vue实现添加单选题、多选题到题库功能

java+vue实现添加单选题、多选题到题库功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。