ThinkPHP5实现答题管理系统(三)-阿里云开发者社区

开发者社区> 若花亦晨曦> 正文

ThinkPHP5实现答题管理系统(三)

简介: 这是这篇系列的第三篇文章,实现的是对应模板下题目及选项的增删。 一.数据库表设计 qsn数据表.PNG detail表.PNG 一套模板下可能有很多道题目,一对多关系,model_id对应模板id,qsn_id为题目的主键,model_name对应模板名称,order_num对应模板下题目的排序号,content对应题目的内容,qsn_type对应题目的类型,这里有三种类型 type0为单选,type1为多选,type2为问答。
+关注继续查看

这是这篇系列的第三篇文章,实现的是对应模板下题目及选项的增删。

一.数据库表设计

img_17cf0c8ee04f165b4ffe745d73778118.png
qsn数据表.PNG
img_b841e0edc6c13f78a865cfb27d34b5e6.png
detail表.PNG

一套模板下可能有很多道题目,一对多关系,model_id对应模板id,qsn_id为题目的主键,model_name对应模板名称,order_num对应模板下题目的排序号,content对应题目的内容,qsn_type对应题目的类型,这里有三种类型 type0为单选,type1为多选,type2为问答。
一道题也有可能对应很多选项,同理。这里的option_num对应选项的内容,order_num对应选项的排序号

二.UI设计及功能设计

img_a3f5aa59f9df9c7d45d2887d6ddf92a1.png
1.PNG
img_d10183d545a9f40a675e07fe7da833fc.png
2.PNG
img_8ff4405341e18135bfb7b7f185bc196a.png
3.PNG
img_5386207390eac5592b0574f70decf3df.png
4.PNG

功能:当我们点击上面的数据表格1时,对复选框进行监听显示数据表格2,题目的数据表格,点击添加题目按钮时,我们弹出选项框,填充题目内容,并且选择题目类型且进行选项的增删。

三.代码实现:

由于本篇专注于题目的增删,对数据表格1复选框的监听,可以见layui官方文档。

View层实现:
首先是对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是根据qsn_type来显示的添加按钮,删除按钮的域。
然后我们声明一个letter数组,用来存放26个英文字母。并且声明k,来记录增加选项和删除选项的个数,并且对K值作为letter数组下标的索引

 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);
            });

这样就能实现对单选(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显示,现在我们就能进行题目的增加啦。


img_692c2f78fabe15a5d1824a04d7076cfa.png
题目选项.PNG
 //确认提交问题到后台的按钮
            $('#commit').click(function() { //增加选项
                var a = [];
                $("#input_qus input[name='user_op']").each(function() { //往数组里添加input里获取到的值
                    a.push($(this).val()); //往a数组里添加
                });
                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 = "{:url( 'manager/qs_add_mould')} ";
                    var data = {
                        model_id: model_id, //模板id用来生成qsn_id
                        content: content, //用来存储问题内容
                        model_name: model_name,
                        a: a, //用来存储所有问题的数组
                        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 ");
                }
            });

上传五个参数,model_id和model_name对应题目的模板表,content对应题目的内容,a用来对应所有选项的数组,qsn_type对应题目类型,我们接下来,将在后台进行qsn表的增加以及detail选项表的批量增加。

Controller层。

 public function qs_add_mould()
    {
        // model_id: model_id, //模板id用来生成qsn_id
        // content: content, //用来存储问题内容
        // a: a //用来存储所有问题的数组
        $data['model_id'] = input('post.model_id');
        $data['content'] = input('post.content');
        $data['qsn_id'] = uniqid('qsn_id', true);
        $data['flight_id'] = uniqid('flight_id', true);
        $data['qsn_type']=(int)input('post.qsn_type');
        
        $a = input('post.a/a');
        //这里我们要将数组输出为字符串 然后对字符串判断是否为空字符串
       //这里a为数组
        if($data['qsn_type']==2){
            $order_num_list = db('qsn')->where('model_id', $data['model_id'])->order('order_num desc')->field('order_num')->find(); //找到这个order_num
            $order_num = $order_num_list['order_num']; //这里假设取到了值
            $order_num = $order_num + 1;
                $data['order_num'] = $order_num;
                $data['model_name'] = input('post.model_name');
                   //查询题目 是否重复
            $chk_content = db('qsn')->where('content', $data['content'])->find($data);
            if (empty($chk_content)) {
                //插入数据库
                $insert = db('qsn')->insert($data);
                $data_detail['qsn_id']=$data['qsn_id'];
                $data_detail['option_num']=0;
                $data_detail['order_num']=0;
                $data_detail['detail_id']=uniqid('detail_id', true);
                $insert = db('qsn_detail')->insert($data_detail);
                returnjson([1, '添加成功', '']);
            }
            $order_num=null;
        }
        if (empty($a)) {
            returnjson([2, '题目不完全,请填充选项', $data['qsn_type']]);
           
        } else {
           //用inarray方法判断数组元素中是否含有''空字符串
           if (in_array("", $a)){
            returnjson([2, '题目不完全,请填充选项', $data['qsn_type']]); 
           }
        
            $order_num_list = db('qsn')->where('model_id', $data['model_id'])->order('order_num desc')->field('order_num')->find(); //找到这个order_num
        $order_num = $order_num_list['order_num']; //这里假设取到了值
        $order_num = $order_num + 1;
            $data['order_num'] = $order_num;
            $data['model_name'] = input('post.model_name');

            //查询题目 是否重复
            $chk_content = db('qsn')->where('content', $data['content'])->find($data);
            if (empty($chk_content)) {
                //插入数据库
                $insert = db('qsn')->insert($data);
                $data1['qsn_id'] = $data['qsn_id'];
                $num = count($a);
                for ($i = 0; $i < $num; ++$i) {
                    $j = $i;
                    $data1['type']=0;
                    $data1['detail_id'] = uniqid('detail_id', true);
                    $data1['option_num'] = $a[$i];
                    $data1['order_num'] = ++$j;
                    $insert = db('qsn_detail')->insert($data1);
                }
                returnjson([1, '添加成功', $a]);
            } else {
                returnjson([3, '该问题已存在', '']);
            }
        }
    }

同样对a数组进行字符串分割,然后进行题目表qsn的增加以及qsn_detail表的批量增加(通过对a数组长度的判别来进行批量增加次数的控制)

然后可以看见已经添加成功了。


img_de1484629c9398379e6ef41cd3aad6f7.png
add_qsn.PNG

然后我们对题目作删除。删除同样跟删除模板一样,传qsn_id数组到后台,删除的时候作级联删除,删除qsn表中的题目 以及qsn_detail表中的选项,在此之前,判断有没有用户作答过。

View层ajax实现:

            $("#btn-delete-all").click(function() {
                var model_id = t_model_id;
                if (model_id) {
                    layer.confirm('您确定要删除这些数据吗?', function(index) { //第二个参数为可选参数 点击确认以后的回调函数
                        layer.msg('加载中', {
                            icon: 16,
                            shade: 0.01,
                            time: '9999999'
                        });
                        var url = "{: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层逻辑:

  public function del_option()
    {
        $qsn_id = input('post.qsn_id/a');
        if (empty($qsn_id)) {
            returnjson([3, 'warning', '']);
        }
        $str_device_id = implode(',', $qsn_id);
        $where['qsn_id'] = array('in', $str_device_id);
        $is_answer=db('psg_qsn_r')->where($where)->select();
        if(!empty($is_answer)){
            returnjson([2, '抱歉,这份题被人答过了,无法删除', $qsn_id]);
        }
        $del_res = db('qsn')->where($where)->delete();
        $del_res1 = db('qsn_detail')->where($where)->delete();
        if ($del_res) {
            returnjson([1, 'succes', '']);
        } else {
            returnjson([2, 'error', '']);
        }
    }

四.效果展示

之前增加的题目数据已经显示在数据表格了


img_de1484629c9398379e6ef41cd3aad6f7.png
add_qsn.PNG

然后我们删除题目。


img_bc1ff6ca005324228c7929ab47131c6a.gif
1.gif

OK,完成啦

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

相关文章
第三章——使用系统函数、存储过程和DBCC SQLPERF命令来监控SQLServer(2)
原文: 第三章——使用系统函数、存储过程和DBCC SQLPERF命令来监控SQLServer(2) 承接上文,本文讲述如何使用系统存储过程来监控系统。
798 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4602 0
WinCE6.0下如何动态设置系统分辨率
由于WinCE的显示驱动是本地驱动,不能像流驱动一样动态加载。所以,一般情况下不能动态修改和调试。前两天曾介绍过一种在应用程序中针对相同分辨率但不同尺寸的LCD的调试方法。这里继续介绍WinCE6.0下动态设置系统分辨率的一种方法。
597 0
针对不同手机系统的LBS地图定位解决方案
原文:针对不同手机系统的LBS地图定位解决方案 摘要: 针对目前的三种手机系统:Android安卓、S60塞班、IOS苹果,做出的三种不同的手机地图应用解决方案。 查阅了多数地图API对手机的支持情况,发现并没有一家能完全覆盖到这三个平台。
1488 0
创建SinaSAE云账号创建和发布基于SVN代码管理的PHP空工程
1、使用Sina微博账号登录,进入【新浪云控制台】 2、选择【云应用SAE】界面,选择【创建新应用】 3、点击【继续创建】,进入应用信息编辑界面     依次编辑“二级域名”“应用程序名”,再点【运行环境】中的【PHP空应用】,再点左下角的【创建应用】完成应用创建。
819 0
基于DTS+Tablestore的海量订单系统架构设计
DTS支持MySQL同步Tablestore Beta版上线,合力打造完善的订单系统。 本文主要介绍一套基于DTS与Tablestore实现一套完善的订单系统架构。实时订单数据主要针对用户侧的实时生产与修改,实例订单数据则是基于数据同步服务DTS,全、增量订阅TP库中的订单数据,从而保证Tablestore中数据与TP库数据的最终一致性。异步同步的方式不可避免的存在延时,但历史订单库在实时性上要求会适当放宽,但其派生出来的数据在服务能力与功能扩展上得到了极大的提升,尤其是Tablestore这种分布式服务能力强、下游计算生态丰富的NoSQL存储服务。
8523 0
+关注
若花亦晨曦
今天你写bug了嘛
16
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载