本文为大家分享了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 list = sysQuestionMapper.selectAllQuestion();
return ServerResponse.createBySuccess(list);
}
@GetMapping("getQuestionAnswerList")
@ApiOperation(value = "获得问题选项列表")
public ServerResponse getQuestionAnswerList(Integer question_id){
List 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 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
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 list = Arrays.asList(answer);
sysQuestionAnswerMapper.deleteByQUestionId(question_id);
for (int i=0;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 max(id) from sys_question
select * from sys_question order by create_time desc
select * from sys_question_answer
where question_id=#{question_id}
select max(id) from sys_question_answer
delete from sys_question_answer where question_id=#{question_id}
vue页面
tr {
& > td.el-table__expanded-cell {
font-size: 20px;
}
}
.el-textarea.is-disabled .el-textarea__inner{
color: #17181a !important;
}
.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;
}
添加
删除
v-for="(domain, index) in dynamicValidateForm.domains"
:key="domain.key"
:label="'选项' + (index + 1)"
:value="index">
提交
新增选项
清空
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style=" width: 100%"
:default-sort="{prop: 'id',order: 'descending'}">
:rows="2"
placeholder="请输入内容"
v-model="scope.row.questionName">
更新
删除
@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">
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()
}
}
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。