java+vue實(shí)現(xiàn)添加單選題、多選題到題庫(kù)功能
本文為大家分享了java+vue實(shí)現(xiàn)添加選擇題到題庫(kù)功能的具體代碼,供大家參考,具體內(nèi)容如下
做個(gè)備份
數(shù)據(jù)庫(kù)表:
后臺(tái)接口
@DeleteMapping("deleteQuestion") @ApiOperation(value = "刪除問(wèn)題") public ServerResponse deleteQuestion(Integer id){ sysQuestionMapper.deleteByPrimaryKey(id); sysQuestionAnswerMapper.deleteByQUestionId(id); return ServerResponse.createBySuccess("刪除成功"); } @GetMapping("getQuestionList") @ApiOperation(value = "獲得問(wèn)題列表") public ServerResponse getQuestionList(){ List<SysQuestion> list = sysQuestionMapper.selectAllQuestion(); return ServerResponse.createBySuccess(list); } @GetMapping("getQuestionAnswerList") @ApiOperation(value = "獲得問(wèn)題選項(xiàng)列表") public ServerResponse getQuestionAnswerList(Integer question_id){ List<SysQuestionAnswer> list = sysQuestionAnswerMapper.selectByQuestionId(question_id); return ServerResponse.createBySuccess(list); } @PostMapping("addQuestion") @ApiOperation(value = "添加問(wèn)題") 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("創(chuàng)建成功"); } @PostMapping("updateQuestion") @ApiOperation(value = "更新問(wèn)題") 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語(yǔ)句
<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頁(yè)面
<!-- --> <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("http://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="問(wèn)題" :rules="{ required: true, message: '問(wèn)題不能為空', trigger: 'blur' }"> <el-input v-model="dynamicValidateForm.question"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'選項(xiàng)' + (index + 1)" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '選項(xiàng)不能為空', 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="請(qǐng)選擇"> <el-option v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" :label="'選項(xiàng)' + (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">新增選項(xiàng)</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="問(wèn)題" align="center" min-width="180px"> <template slot-scope="scope"> <el-input type="textarea" :disabled="true" style="font-size: 16px" :rows="2" placeholder="請(qǐng)輸入內(nèi)容" v-model="scope.row.questionName"> </el-input> </template> </el-table-column> <el-table-column label="創(chuàng)建時(shí)間" 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>
實(shí)現(xiàn)效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- java ZXing生成二維碼及條碼實(shí)例分享
- JAVA解析XML字符串簡(jiǎn)單方法代碼案例
- Java簡(jiǎn)易登錄注冊(cè)功能實(shí)現(xiàn)代碼解析
- Vue+Java 通過(guò)websocket實(shí)現(xiàn)服務(wù)器與客戶(hù)端雙向通信操作
- Vue.Js及Java實(shí)現(xiàn)文件分片上傳代碼實(shí)例
- Java基于jeeplus vue實(shí)現(xiàn)簡(jiǎn)單工作流過(guò)程圖解
- vue+ java 實(shí)現(xiàn)多級(jí)菜單遞歸效果
- Vue請(qǐng)求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例
- Vue調(diào)用后端java接口的實(shí)例代碼
- 一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(mén)(推薦)
- vue+element+Java實(shí)現(xiàn)批量刪除功能
- vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問(wèn)題的方式
- Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例
相關(guān)文章
詳解SpringBoot中異步請(qǐng)求和異步調(diào)用(看完這一篇就夠了)
這篇文章主要介紹了SpringBoot中異步請(qǐng)求和異步調(diào)用問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04如何通過(guò)zuul添加或修改請(qǐng)求參數(shù)
這篇文章主要介紹了如何通過(guò)zuul添加或修改請(qǐng)求參數(shù)的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07spring @Lazy延遲注入的邏輯實(shí)現(xiàn)
有時(shí)候我們會(huì)在屬性注入的時(shí)候添加@Lazy注解實(shí)現(xiàn)延遲注入,今天咱們通過(guò)閱讀源碼來(lái)分析下原因,感興趣的可以了解一下2021-08-08如何通過(guò)java實(shí)現(xiàn)highcharts導(dǎo)出圖片至excel
這篇文章主要介紹了如何通過(guò)java實(shí)現(xiàn)highcharts導(dǎo)出圖片至excel。文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面我們就來(lái)一起學(xué)習(xí)一下吧2019-06-06Java實(shí)現(xiàn)經(jīng)典游戲打磚塊游戲的示例代碼
這篇文章主要介紹了如何利用Java實(shí)現(xiàn)經(jīng)典的游戲—打磚塊。玩家操作一根螢?zāi)簧纤降摹鞍糇印?,讓一顆不斷彈來(lái)彈去的“球”在撞擊作為過(guò)關(guān)目標(biāo)消去的“磚塊”的途中不會(huì)落到螢?zāi)坏紫隆8信d趣的小伙伴可以了解一下2022-02-02Java網(wǎng)絡(luò)通信中ServerSocket的設(shè)計(jì)優(yōu)化方案
今天小編就為大家分享一篇關(guān)于Java網(wǎng)絡(luò)通信中ServerSocket的設(shè)計(jì)優(yōu)化方案,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-04-04Springboot使用redis進(jìn)行api防刷限流過(guò)程詳解
這篇文章主要介紹了Springboot使用redis進(jìn)行api防刷限流過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12