开发者社区> 若花亦晨曦> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SSM+maven实现答题管理系统(五)

简介: 今天这篇文章是我们这个SSM框架系列的最后一篇,主要是用来实现统计题目答案功能的实现。 一.UI设计及功能实现 统计1.PNG 统计.PNG 功能实现:乍一看,我们就知道这是实现了连表查询,点击统计按钮,我们要查询的是qsn表,qsn_detail表以及psg_qsn_表,分别对应题目表,选项表以及答案表。
+关注继续查看

今天这篇文章是我们这个SSM框架系列的最后一篇,主要是用来实现统计题目答案功能的实现。

一.UI设计及功能实现

img_02c31eced3902f4ac7cfb5e4c2b46ed0.png
统计1.PNG
img_41db890db5642c2aba8741103574bf00.png
统计.PNG

功能实现:乍一看,我们就知道这是实现了连表查询,点击统计按钮,我们要查询的是qsn表,qsn_detail表以及psg_qsn_表,分别对应题目表,选项表以及答案表。而我们要提交到后端的,就是查询的对应模板的model_id即可。

二.代码实现

统计按钮:

   $('#btn-count').click(function() {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['900px', '500px'], //宽高
                    content: $('#set-count'),
                    title: "统计数据"
                });
            });

统计弹出层:

 <!--统计弹出层-->
    <div id="set-count" style="display:none; width:900px; padding:20px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <label class="layui-form-label">模板信息</label>
                    <label class="layui-form-label" name="count_model_id"></label>
                    <label class="layui-form-label" name="count_model_name"></label>

                    <!-- <input type="hidden" name="model_id" id="model_id"> -->
                    <hr class="layui-bg-red">
                </div>
                <div class="layui-input-block">
                    <label class="layui-form-label">题目信息</label>
                </div>
                <br />


                <div class="layui-input-block">
                    <label class="layui-form-label-col" name="qsn_count"></label>

                </div>
            </div>

        </form>

        <!-- <div class="layui-collapse" name="qsn_count" lay-accordion> </div> -->
    </div>

以及统计按钮的ajax刷新:

else if (layEvent == 'count') {
                    layer.msg("加载中", {
                        icon: 16,
                        shade: 0.01,
                        time: '9999999'
                    });
                    $('#set-count label[name="count_model_id"]').text(data.model_id);
                    $('#set-count label[name="count_model_name"]').css("width", "200px");
                  $('#set-count label[name="count_model_id"]').css("width", "200px");
                    $('#set-count label[name="count_model_name"]').text(data.name); //弹出层的初始化
                    var model_id = data.model_id; //将当前选中行的code给code变量
                    var url = "survey/count";
                    var data = {
                        model_id: model_id
                    };
                    $.post(url, data, function(data) {
                        layer.close(layer.index); //关闭正在加载中弹出层

                        if (data.code == 1) {
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['1000px', '600px'], //宽高
                                content: $('#set-count')
                            });
                            $('#set-count label[name="qsn_count"]').html(""); //清空info内容

                            for (var i = 0; i < data.data.length; i++) {
                                var all;
                                var content = " ";
                                var title = '';
                                // alert(data.data[i].content);

                                if (data.data[i].qsn_type == 0 || data.data[i].qsn_type == 1) {
                                    title = '<div class="layui-input-block">第' + (i + 1) + '题:&nbsp;&nbsp;&nbsp;&nbsp;' + data.data[i].content + '</div>';
                                    var count = data.data[i].option_list.length;
                                    for (var j = 0; j < count; j++) {
                                        content = content + '<div class="layui-input-block">' + letter[data.data[i].option_list[j].order_num - 1] + ':' + data.data[i].option_list[j].option_num + '  <br/> 被' + data.data[i].option_list[j].count + '次点击</div><br/>';
                                    }
                                    all = title + content;
                                    $('#set-count label[name="qsn_count"]').append(all);
                                    $('#set-count label[name="qsn_count"]').append(' <hr class="layui-bg-red">');
                                    // else {
                                    title = null;
                                    content = null;
                                    all = null;

                                } else if (data.data[i].qsn_type == 2) {
                                    // alert(data.data[i].content);
                                    title = '<div class="layui-input-block">第' + (i + 1) + '题:&nbsp;&nbsp;&nbsp;&nbsp;' + data.data[i].content + '</div>';
                                    var count = data.data[i].answer.length;
                                    for (var j = 0; j < count; j++) {
                                        content = content + '<div class="layui-input-block">乘客答案:' + data.data[i].answer[j].choose + '</div>';
                                    }
                                    all = title + content;
                                    $('#set-count label[name="qsn_count"]').append(all);
                                    $('#set-count label[name="qsn_count"]').append(' <hr class="layui-bg-red">');
                                    title = null;
                                    content = null;
                                    all = null;
                                }
                                // }
                            };
                        } else {
                            layer.msg(data.msg, {
                                icon: 5
                            });
                        }
                    }, "json");
                }
            });

这里我们只上传了一个model_id作为连表查询的条件。
然后我们看看Controller层代码:

//统计模板信息survey/count
    @RequestMapping(value="Index/survey/count")
    @ResponseBody
    public Map<String,Object> countModel(HttpServletRequest req) throws IOException{
        String model_Id = req.getParameter("modelId");
        if (model_Id==null){
            return api.returnJson(3,"warning");
        }
        List<Qsn> chk_qsn=qsnService.findQsnList(model_Id);
        if (chk_qsn.isEmpty()){
            return api.returnJson(2,"暂无题目");
        }
        //有题目就查qsn和qsn_detail
        List<Map> returnlist=new ArrayList();


        List<Qsn> qsnList=qsnService.findQsnList(model_Id);
        for (int i = 0; i <qsnList.size() ; i++) {
            Map map=new HashMap();
            if ("2".equals(qsnList.get(i).getQsnType())){
//                return api.returnJson(1,"此路不通");
                Detail ask_detail=detailService.findAskAnswer(qsnList.get(i).getQsnId());
                List<Choose> countlist=chooseService.countDataBy2Id(qsnList.get(i).getQsnId(),ask_detail.getDetailId());
                List<Map> answer=new ArrayList<>();

                for (int j = 0; j <countlist.size() ; j++) {
                    Map map1=new HashMap();
                    map1.put("choose",countlist.get(j).getChoose());
                    answer.add(map1);
                }
                map.put("content",qsnList.get(i).getContent());
                map.put("qsn_type",qsnList.get(i).getQsnType());
                map.put("answer",answer);
                returnlist.add(map);
                continue;
            }

            List<Detail> optionList=detailService.findOptionList(qsnList.get(i).getQsnId());//qsnId
            List<Map> list=new ArrayList<>();
            for (int j = 0; j <optionList.size() ; j++) {//detailId,option_num,order_num
                Map map1=new HashMap();
                List<Choose> countlist=chooseService.countDataBy2Id(qsnList.get(i).getQsnId(),optionList.get(j).getDetailId());
                int count=countlist.size();
                map1.put("count",count);
                map1.put("detailId",optionList.get(j).getDetailId());
                map1.put("optionNum",optionList.get(j).getOptionNum());
                map1.put("orderNum",optionList.get(j).getOrderNum());
                list.add(map1);
            }
            map.put("content",qsnList.get(i).getContent());
            map.put("qsn_type",qsnList.get(i).getQsnType());
            map.put("option_list",list);
            returnlist.add(map);
        }

        return api.returnJson(1,"success",returnlist);
    }

用到的chooseService等service层代码可以翻看我前一篇文章。
返回的json数据:


img_4a143ecb08febcf686dcca2173cc2e0d.jpe
result.JPG

然后我们看看最终效果

三.效果一览

img_79a8ac819708c49cb66e2a0293f04c98.gif
1.gif

OK,完成啦,喜欢这篇文章以及这个系列的小伙伴,就给颗小吧~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java项目-基于SSM实现保健院管理系统
本项目基于SSM框架开发实现了保健院的信息化管理系统,本系统功能完整,界面美观大方,适合做毕业设计使用。系统具备完美的权限管理系统,可以在系统中自由定制系统角色和权限菜单,根据需要向不同的用户分配不同的角色,并可以单独分配权限。实现了系统权限的灵活管理。在业务上主要实现了系统管理模块、出入库管理模块、维修报废管理模块、库房管理模块、财务管理模块、医疗垃圾处理模块、搜索查询模块等功能。以下展示具体的系统功能图结构:
16 0
Java+Swing实现医院管理系统(上)
Java+Swing实现医院管理系统
89 0
Java+Swing实现医院管理系统(下)
Java+Swing实现医院管理系统
70 0
基于java SSM医药住院管理系统设计和实现
主要功能设计:入院管理,登记、出院登记、查询、转房、病房管理、病房价格调整、缴费和记录、护理、住院历史、统计、药品管理、医生、用户、系统 springMVC spring mybatis jquery js css tomcat mysql
42 0
java:JDBC连接数据库实现用户管理系统
java:JDBC连接数据库实现用户管理系统
94 0
ThinkPHP5实现答题管理系统(五)
今天这篇文章是我们这个TP系统系列的最后一篇,主要是用来实现统计题目答案功能的实现。 一.UI设计及功能实现 统计1.PNG 统计.PNG 功能实现:乍一看,我们就知道这是实现了连表查询,点击统计按钮,我们要查询的是qsn表,qsn_detail表以及psg_qsn_表,分别对应题目表,选项表以及答案表。
1030 0
ThinkPHP5实现答题管理系统(四)
我们之前三篇文章实现了模板+题目+选项的增删,现在我们要完成答题管理系统的答题模块啦。 一.UI及功能设计 既然是用户答题,就要有一张表专门用来存放用户答题的答案。
962 0
ThinkPHP5实现答题管理系统(二)
好的,现在我们来实现删除题目模板的功能,删除功能不难做,主要我们这次实现的是批量删除功能。 一.思路整理 首先我们删除模板是根据模板的id来删除的,不管是单项删除还是批量删除,我们这里使用layui获取当前行的功能就能获取模板的id 其次不管单项删除还是批量删除,只要将id放入数组中,后端对数组进行遍历,就能达到单项删除/批量删除 二.代码实现 思路实现以后,我们上代码。
1174 0
ThinkPHP5实现答题管理系统(一)
最近实习做了一个PHP的项目练手,大概是一个答题管理的模板(已部署至www.songlei.online),用了TP5+Jquery+layui来实现,由于整个系统功能模块有点多,所以我们逐个拆分出来。
1846 0
+关注
若花亦晨曦
今天你写bug了嘛
21
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载