SSM+maven實現(xiàn)答題管理系統(tǒng)（三）

這是這篇系列的第三篇文章，實現(xiàn)的是對應模板下題目及選項的增刪。

一.數(shù)據(jù)庫表設計

qsn數(shù)據(jù)表.PNG
detail表.PNG

一套模板下可能有很多道題目，一對多關系，model_id對應模板id，qsn_id為題目的主鍵，model_name對應模板名稱，order_num對應模板下題目的排序號，content對應題目的內容，qsn_type對應題目的類型，這里有三種類型 type0為單選,type1為多選,type2為問答。
一道題也有可能對應很多選項，同理。這里的option_num對應選項的內容，order_num對應選項的排序號

二.UI設計及功能設計

1.PNG
2.PNG
3.PNG
4.PNG

功能:當我們點擊上面的數(shù)據(jù)表格1時，對復選框進行監(jiān)聽顯示數(shù)據(jù)表格2，題目的數(shù)據(jù)表格，點擊添加題目按鈕時，我們彈出選項框，填充題目內容，并且選擇題目類型且進行選項的增刪。

三.代碼實現(xiàn)：

由于本篇專注于題目的增刪，對數(shù)據(jù)表格1復選框的監(jiān)聽，可以見layui官方文檔。

View層實現(xiàn):
首先是對1.PNG中添加題目按鈕的點擊

            //彈出添加題目窗口
            $('#btn-add').click(function() {
                // alert(t_model_id);


                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上邊框
                    area: ['660px', '350px'], //寬高
                    content: $('#set-add-qsn'),
                    cancel: function(index, layero) {
                        $('#input_qus').empty();
                        layer.close(index)
                        k = 0;
                        $('#set-add-qsn input[name="content"]').val("");
                        $('#set-add-qsn div[name="input_qus"]').empty();

                        return false;
                    },

                });

            });

即彈出2.PNG的選項框（id為set-add-qsn的選項框）。

    <!--添加題目彈出層-->
    <div id="set-add-qsn" style="display:none; width:550px; padding:20px;">
        <form class="layui-form" lay-filter="qsn_form">
            <div class="layui-form-item">
                <label class="layui-form-label">題目內容</label>
                <div class="layui-input-block">
                    <input type="text" name="content" required lay-verify="required" placeholder="請輸入題目內容" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">請選擇問題的類型:</label>
                <div class="layui-input-block">
                    <select name="qsn_type" lay-verify="required" style="width: 212px;">
                      <option value=""></option>
                      <option value="0">單選題</option>
                      <option value="1">多選題</option>
                      <option value="2">問答題</option>
                    </select>
                </div>
                <br/>
                <div class="layui-input-block" id="input_qus" name="input_qus">

                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">

                    <button type="button" class="layui-btn" id="add_op">添加選項</button>
                    <button type="button" class="layui-btn" id="del_op">減少選項</button>
                    <button type="button" class="layui-btn" lay-submit lay-filter="formDemo" id="commit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

content代表題目內容，qsn_type下拉框代表題目類型，input_qus是根據(jù)qsn_type來顯示的添加按鈕，刪除按鈕的域。
然后我們聲明一個letter數(shù)組，用來存放26個英文字母。并且聲明k，來記錄增加選項和刪除選項的個數(shù)，并且對K值作為letter數(shù)組下標的索引

 var k = 0;
            var letter = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            $('#add_op').click(function() {
                $('#input_qus').append(
                    '<label class="layui-form-label" id="qs_letter" name="qs_letter">' + letter[k] + '</label>' + '<div class ="layui-input-block" id="qs_detail"><input type = "text" name = "user_op"  lay-verify="required" placeholder = "請輸入選項' + (k + 1) + '" autocomplete = "off" class = "layui-input input_qs" id = "user_op' + k + '"></div>'
                );
                k++;
                alert(k);
            });

    $('#del_op').click(function() {

                $('#input_qus input[name="user_op"]:eq(' + (k - 1) + ')').remove(); //input_qs的第k個remove
                $('#input_qus label[name="qs_letter"]:eq(' + (k - 1) + ')').remove(); //input_qs的第k個remove
                $('#input_qus div[id="qs_detail"]:eq(' + (k - 1) + ')').remove();
                if ($('#input_qus :eq(' + (k - 1) + ')' != null)) {
                    k--;
                }
                if ((k + 1) == 0) {
                    layer.msg("無法刪減更多選項了");
                    $('#input_qus').empty();
                    k = 0;
                }
                alert(k);
            });

這樣就能實現(xiàn)對單選(type=0)和多選問題(type=1)選項的增刪。

      form.on('select()', function(data) {
                t_qsn_type = data.value;
                // alert($('#set-add-qsn select[name="op_type"]').val());
                if (data.value == 2) {
                    $('#add_op').attr('disabled', true);
                    $('#add_op').hide();
                    $('#del_op').attr('disabled', true);
                    $('#del_op').hide();
                    $('#input_qus').hide();
                    // form.render('select');
                } else {
                    $('#add_op').attr('disabled', false);
                    $('#add_op').show();
                    $('#del_op').attr('disabled', false);
                    $('#del_op').show();
                    $('#input_qus').show();
                }

            });

同時對type=0，1以及type=2（問答題）進行不同按鈕功能的UI顯示，現(xiàn)在我們就能進行題目的增加啦。


題目選項.PNG
 //確認提交問題到后臺的按鈕
            $('#commit').click(function() { //增加選項
                var a = [];
                $("#input_qus input[name='user_op']").each(function() { //往數(shù)組里添加input里獲取到的值
                    a.push($(this).val()); //往a數(shù)組里添加
                });
                alert(a);
                var content = $('input[name="content"]').val(); //獲取值

                if (content !== '') {
                    //打開正在加載中彈出層
                    layer.msg('加載中', {
                        icon: 16,
                        shade: 0.01,
                        time: '9999999'
                    });
                    var qsn_type = t_qsn_type;
                    var model_id = t_model_id; //選擇到了模板的id 然后隨機生成一個qsnid 這個qsn的id下生成諸多問題選項
                    var model_name = t_model_name;
                    var url = 'manager/add_qsn';
                    var data = {
                        model_id: model_id, //模板id用來生成qsn_id
                        content: content, //用來存儲問題內容
                        model_name: model_name,
                        a: a, //用來存儲所有問題的數(shù)組
                        qsn_type: qsn_type
                    }
                    $.post(url, data, function(data) { //確認提交
                        k = 0;
                        $('#set-add-qsn input[name="content"]').val("");
                        $('#set-add-qsn div[name="input_qus"]').empty();
                        layer.closeAll();
                        if (data.code == 1) {
                            layer.msg(data.msg, {
                                icon: 6
                            });
                            refresh_table1();
                        } else {
                            layer.msg(data.msg, {
                                icon: 5
                            });
                        }
                    }, "json ");
                }
            });

上傳五個參數(shù)，model_id和model_name對應題目的模板表，content對應題目的內容，a用來對應所有選項的數(shù)組，qsn_type對應題目類型，我們接下來，將在后臺進行qsn表的增加以及detail選項表的批量增加。

Controller層。

//    modelId //模板id用來生成qsnId
//    content //用來存儲問題內容
//    modelName
//    a數(shù)組用來存儲所有問題
//    qsn_type
    //添加題目和選項
    @RequestMapping(value="Index/manager/add_qsn")
    @ResponseBody
    public Map<String,Object> addQsnAndOption(HttpServletRequest req) throws IOException {
        String modelId = req.getParameter("modelId");
        String content=req.getParameter("content");
        String modelName=req.getParameter("modelName");//有注解，默認轉換
        String qsnType=req.getParameter("qsn_type");
        String[] arr = req.getParameterValues("a[]");
        UUID uuid=UUID.randomUUID();
        String qsnId=uuid.toString();
        UUID uuid1=UUID.randomUUID();
        String flightId=uuid1.toString();
        if (qsnType.equals(2)) {//問答題只需要插入題目以及一條選項
            //有題目了 根據(jù)modelId查出qsn的maxordernum
            short orderNum = qsnService.findMaxOrderNum(modelId);
            orderNum+=1;
            Qsn qsn=new Qsn();
            qsn.setOrderNum(orderNum);
            qsn.setModelName(modelName);
            qsn.setModelId(modelId);
            qsn.setModelName(modelName);
            qsn.setContent(content);
            qsn.setQsnType(qsnType);
            qsn.setQsnId(qsnId);
            //查詢題目內容是否重復
            Qsn isHasContent=qsnService.findByContent(content);
            if (isHasContent==null){
                short s1=0;
                int isInsertQsn=qsnService.InsertQsn(qsn);
                Detail detail=new Detail();
                detail.setQsnId(qsnId);
                detail.setOptionNum("0");
                detail.setOrderNum(s1);
                UUID uuid2=UUID.randomUUID();
                String detailId=uuid2.toString();
                detail.setDetailId(detailId);
                int isInsertDetail=detailService.insertDetail(detail);
                return api.returnJson(1,"添加成功");
            }
        }//否則單選多選還需要插入多條選項
        short orderNum=0;
        try {
            orderNum = qsnService.findMaxOrderNum(modelId);
        }catch(BindingException e){
            e.printStackTrace();
        }
        orderNum+=1;
        Qsn qsn=new Qsn();
        qsn.setOrderNum(orderNum);
        qsn.setModelName(modelName);
        qsn.setModelId(modelId);
        qsn.setModelName(modelName);
        qsn.setContent(content);
        qsn.setQsnType(qsnType);
        qsn.setQsnId(qsnId);
        //查詢題目內容是否重復
        Qsn isHasContent=qsnService.findByContent(content);
        if (isHasContent==null){
            short s1=0;
            int isInsertQsn=qsnService.InsertQsn(qsn);
            for (int i = 0; i <arr.length ; i++) {
                short j=(short)(i+1);
                Detail detail=new Detail();
                detail.setQsnId(qsnId);
                detail.setType("0");
                UUID uuid2=UUID.randomUUID();
                String detailId=uuid2.toString();
                detail.setDetailId(detailId);
                detail.setOptionNum(arr[i]);
                detail.setOrderNum(j);
                int isInsertDetail=detailService.insertDetail(detail);
            }
            return api.returnJson(1,"添加成功");


        }else {
            return api.returnJson(3,"該問題已存在");
        }
    }

同樣對a數(shù)組進行字符串分割，然后進行題目表qsn的增加以及qsn_detail表的批量增加（通過對a數(shù)組長度的判別來進行批量增加次數(shù)的控制）

Service層:
qsnService：

package com.sl.example.service;

import com.sl.example.pojo.Model;
import com.sl.example.pojo.Qsn;

import java.util.List;

public interface QsnService {
    public List<Qsn> findQsnList(String modelId);

    public int deleteModel2Qsn(String modelId);

    public short findMaxOrderNum(String modelId);

    public Qsn findByOrderNum(short orderNum,String modelId);

    public Qsn findByContent(String content);

    public int InsertQsn(Qsn qsn);

    public int deleteByQsnId(String qsnId);
}

qsnServiceImpl:

package com.sl.example.service;

import com.sl.example.dao.ModelMapper;
import com.sl.example.dao.QsnMapper;
import com.sl.example.pojo.Model;
import com.sl.example.pojo.Qsn;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service("qsnService")
@Transactional
public class QsnServiceImpl implements QsnService{

    @Resource
    private QsnMapper qsnMapper;
    @Override
    public List<Qsn> findQsnList(String modelId) {
        return qsnMapper.selectQsnList(modelId);
    }

    @Override
    public int deleteModel2Qsn(String modelId) {
        return qsnMapper.deleteByModelId(modelId);
    }

    @Override
    public short findMaxOrderNum(String modelId) {
        return qsnMapper.selectMaxOrderNum(modelId);
    }

    @Override
    public Qsn findByOrderNum(short orderNum, String modelId) {
        return qsnMapper.selectByOrderNum(orderNum,modelId);
    }

    @Override
    public Qsn findByContent(String content) {
        return qsnMapper.selectByContent(content);
    }

    @Override
    public int InsertQsn(Qsn qsn) {
        return qsnMapper.insertSelective(qsn);
    }

    @Override
    public int deleteByQsnId(String qsnId) {
        return qsnMapper.deleteByPrimaryKey(qsnId);
    }
}

detailService：

package com.sl.example.service;

import com.sl.example.pojo.Detail;
import com.sl.example.pojo.Qsn;

import java.util.List;


public interface DetailService {
    public List<Detail> findOptionList(String qsnId);

    public Detail findAskAnswer(String qsnId);

    public int insertDetail(Detail detail);

    public int deleteOptionsByQsnId(String qsnId);
}

detailServiceImpl：

package com.sl.example.service;

import com.sl.example.dao.ChooseMapper;
import com.sl.example.dao.DetailMapper;
import com.sl.example.pojo.Detail;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;

@Service("detailService")
@Transactional
public class DetailServiceImpl implements DetailService {

    @Resource
    private DetailMapper detailMapper;
    @Override
    public List<Detail> findOptionList(String qsnId) {
        return detailMapper.selectOptionsByQsnId(qsnId);
    }

    @Override
    public Detail findAskAnswer(String qsnId) {
        return detailMapper.selectByQsnId(qsnId);
    }

    @Override
    public int insertDetail(Detail detail) {
        return detailMapper.insertSelective(detail);
    }

    @Override
    public int deleteOptionsByQsnId(String qsnId) {
        return detailMapper.deleteByQsnId(qsnId);
    }
}

然后可以看見已經(jīng)添加成功了。


add_qsn.PNG

然后我們對題目作刪除。刪除同樣跟刪除模板一樣，傳qsn_id數(shù)組到后臺，刪除的時候作級聯(lián)刪除，刪除qsn表中的題目 以及qsn_detail表中的選項，在此之前，判斷有沒有用戶作答過。

View層ajax實現(xiàn):

            $("#btn-delete-all").click(function() {
                var model_id = t_model_id;
                if (model_id) {
                    layer.confirm('您確定要刪除這些數(shù)據(jù)嗎？', function(index) { //第二個參數(shù)為可選參數(shù) 點擊確認以后的回調函數(shù)
                        layer.msg('加載中', {
                            icon: 16,
                            shade: 0.01,
                            time: '9999999'
                        });
                       var url = "manager/del_option";
                        var data = {
                            qsn_id: id_array //將當前選中行的qsn_id傳到后端
                        }
                        $.post(url, data, function(data) {


                            layer.close(layer.index); //關閉加載中彈窗
                            if (data.code == 1) {
                                layer.msg(data.msg, {
                                    icon: 6
                                });
                                refresh_table1();
                            } else {
                                layer.msg(data.msg, {
                                    icon: 5
                                });
                            }
                        }, "json"); //一定不要忘了這個json?。?！
                    })
                } else {
                    layer.msg("請先選擇模板");
                }
            });

Controller層邏輯:

//qsnId數(shù)組
    @RequestMapping(value="Index/manager/del_option")
    @ResponseBody
    public Map<String,Object> delOptions(HttpServletRequest req) throws IOException {
        String[] arr = req.getParameterValues("qsnId[]");//前端傳來的modelId
        //根據(jù)qsnId查詢出用戶選擇的答案
        for (int i = 0; i < arr.length; i++) {
            List<Choose> is_answer=chooseService.findByQsnId(arr[i]);
            if (!is_answer.isEmpty()) {
                return api.returnJson(3,"抱歉，題目已經(jīng)被作答，無法刪除");
            }
            continue;
        }
        //如果沒有 那么當前選中模板的題目都沒有被答過 作級聯(lián)刪除 刪除題目表 刪除選項表(根據(jù)model查出Qsn 再根據(jù)qsnId刪除Option)
        for (int i = 0; i <arr.length ; i++) {
            int is_del_qsn=qsnService.deleteByQsnId(arr[i]);//刪除題目表
            int isDelOptions=detailService.deleteOptionsByQsnId(arr[i]);
            if (is_del_qsn!=0){
                return api.returnJson(1,"刪除成功");
            }
        }
        return api.returnJson(2,"error");
        }

四.效果展示

之前增加的題目數(shù)據(jù)已經(jīng)顯示在數(shù)據(jù)表格了


add_qsn.PNG

然后我們刪除題目。


1.gif

OK，完成啦

項目僅供測試學習使用，拒絕任何形式的商業(yè)用途，轉侵刪。
項目源碼關注公眾號Code In Java，回復"答題管理系統(tǒng)"即可獲取。除此之外，還有Java學習圖譜，數(shù)據(jù)結構與算法資料等各種資料都可以在后臺獲取。
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容