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);
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);
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>
<div>
<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
: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"
: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=""
: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.id) !== -1) {
this.value.push(i)
}
this.dynamicvalidateform.domains.push({
value: res.data.data.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.validate((valid) => {
if (valid) {
const answerlist = []
for (let i = 0; i < this.dynamicvalidateform.domains.length; i++) {
answerlist.push(this.dynamicvalidateform.domains.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.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.createtime = this.timestamptotime(this.tabledata.createtime)
}
}
},
mounted: function() {
this.initdata()
}
}
</script>
<style lang="scss" scoped>
</style>
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持CodeAE代码之家。
文档来源：http://www.zzvips.com/article/179073.html
页:
[1]