java+vue实现添加单选题、多选题到题库功能
程序员文章站
2024-02-23 17:18:16
本文为大家分享了java+vue实现添加选择题到题库功能的具体代码,供大家参考,具体内容如下
做个备份
数据库表:
后台接口
@deletemapp...
本文为大家分享了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>
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: c++带有空格的字符串的读入