ThinkPHP5实现答题管理系统（一）

末蓝、 2022-02-13 12:39 637阅读 0赞

最近实习做了一个PHP的项目练手，大概是一个答题管理的模板(已部署至[www.songlei.online][])，用了TP5+Jquery+layui来实现，由于整个系统功能模块有点多，所以我们逐个拆分出来。这次先做问题模板的添加和删除。如下图。

![img\_0d324c462f2c4d4371ccaedda43ac120.jpe][img_0d324c462f2c4d4371ccaedda43ac120.jpe]

模板.JPG

## 1.前期准备 ##

TP5框架：在tp5的官网下载框架模板[ThinkPHP5核心版][ThinkPHP5]  
编辑器:我选用的是VS code。因为相较于其它IDE，更加轻量级,别的集成IDE亦可。  
一点点的TP5知识储备:[TP5完全开发手册][TP5]  
一点点的layui文档的bang助:[layui开发使用文档][layui]

## 2.架构设计(MVC) ##

![img\_fa232e4d9d728542b3a03eec8d2d73fe.png][img_fa232e4d9d728542b3a03eec8d2d73fe.png]

image.png

这里我选择单模块index模块 将所有控制器都放在Controller层  
不同于TP5框架提供的index模块的view层，我将view层要渲染的html页面都放在了template目录下，并且与controller层一一对应，配置的代码，在application模块下的config.php中。

'template'               => [
            // 模板引擎类型 支持 php think 支持扩展
            'type'         => 'Think',
            // 模板路径
            'view_path'    => '',
            // 模板后缀
            'view_suffix'  => 'html',
            // 模板文件名分隔符
            'view_depr'    => DS,
            // 模板引擎普通标签开始标记
            'tpl_begin'    => '{',
            // 模板引擎普通标签结束标记
            'tpl_end'      => '}',
            // 标签库标签开始标记
            'taglib_begin' => '{',
            // 标签库标签结束标记
            'taglib_end'   => '}',
            'view_base'    => ROOT_PATH . 'template/',
        ],

在template关联数组末尾加一句view\_base的关联

'view_base'    => ROOT_PATH . 'template/',

## 3.数据库设计 ##

![img\_a1108406c6ac58fef679c6fd717ede6e.png][img_a1108406c6ac58fef679c6fd717ede6e.png]

image.png

t\_gr\_是表前缀，总共有四张表。  
qsn\_model表用来存储题目的模板数据  
qsn用来存储每套模板下的题目数据  
qsn\_detail用来存储用来存储每个题目对应选型的数据  
psg\_qsn\_r用来存储用户答题的数据

今天的主角是qsn\_model表

![img\_7fc4761e441c00cf3875c109ad4700a0.png][img_7fc4761e441c00cf3875c109ad4700a0.png]

image.png

![img\_d3c55edeba1f22e3bac13caa7be0c82e.png][img_d3c55edeba1f22e3bac13caa7be0c82e.png]

image.png

四个字段，主键(model\_id)，模板名称(name)，模板创建时间(time)，创建人名称(create\_name)。

## 4.View层实现（Jquery+layui） ##

首先是添加模板的View层实现。

![img\_91618dfe6ee6a99deb671436760d498d.png][img_91618dfe6ee6a99deb671436760d498d.png]

image.png

引用了layui的按钮组样式 id为btn-add的按钮 即为添加模板按钮

![img\_ff02af4702451d934282584a8d2cee45.png][img_ff02af4702451d934282584a8d2cee45.png]

image.png

点击添加模板 我们用Jquery设置其弹出了一个layui的弹出层 id为set-add-put

//弹出添加窗口
                $('#btn-add').click(function() {
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['660px', '350px'], //宽高
                        content: $('#set-add-put'),
                        title: "添加模板"
                    });
                });

如下

![img\_5745805213df54fbc926b98d96beb26e.png][img_5745805213df54fbc926b98d96beb26e.png]

image.png

input框有三个，分别对应数据库的create\_name,time,name。

<div id="set-add-put" style="display:none; width:550px; padding:20px;">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">创建人名字</label>
                    <div class="layui-input-block">
                        <input type="text" name="create_name" 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">
                        <input type="text" name="time" required lay-verify="required" placeholder="请输入创建时间" autocomplete="off" class="layui-input" id="time">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">模板名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="formDemo" id="add">立即添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

然后，我们数据点击立即添加按钮，id为add。我们对其用Jquery进行ajax请求。

//添加数据
                $('#add').click(function() {
                    var create_name = $('input[name="create_name"]').val(); //获取值
                    var name = $('input[name="name"]').val();
                    var time = $('input[name="time"]').val();
                    if (create_name !== '') {
                        //打开正在加载中弹出层
                        layer.msg('加载中', {
                            icon: 16,
                            shade: 0.01,
                            time: '9999999'
                        });
                        var url = "{:url('survey/add_qsn')}";
                        var data = {
                            create_name: create_name,
                            name: name,
                            time: time
                        }
                        $.post(url, data, function(data) { //使用ajax提交
                            layer.closeAll();
                            if (data.code == 1) { //这里的code对应返回的状态码
                                layer.msg(data.msg, {
                                    icon: 6
                                });
                                location.reload();
                            } else {
                                layer.msg(data.msg, {
                                    icon: 5
                                });
                            }
                        }, "json");
                    }
                });

提交的data，就是我们输入框获取的三个值，create\_name,name,time。  
提交到Controller层，如果返回的数据状态码为代表成功的1，则刷新整个页面，否则，提示错误。

然后我们看看Controller层的代码。

## 5.Controller层实现 ##

首先我在application目录下的common.php文件定义了一个公共方法，用来返回json格式数据给View层。

<?php
    // 应用公共文件
    
    function returnjson($arr_data){
        $arr = array(
            'code' => $arr_data['0'],
            'msg'  => $arr_data['1'],
            'data' => $arr_data['2']
        );
        if(!isset($arr_data['2'])){
            unset($arr['data']);
        }
        if(!isset($arr_data['1'])){
            unset($arr['msg']);
        }
        echo json_encode($arr);exit;
    }

返回的数据有三个，code状态码,msg信息，data返回的数据。

然后看survey.php下的add\_qsn方法：

//新增
        public function add_qsn()
        {
            $data['create_name'] = input('post.create_name'); //thinkPHP中的助手函数,我们用ajax提交的数据
            $data['name'] = input('post.name');
            $data['time'] = input('post.time');
            $data['model_id'] = uniqid('model', true);//使用uniqid形成一个特定唯一的model_id
            if (empty($data['create_name'])) {//查询创建人是否为空
                returnjson([3, 'warning1', '']);
            }
            //查询model_id 是否重复 模板不存在的话 就能添加此条记录
            $chk_model_id = db('qsn_model')->where('create_name', $data['create_name'])->find($data);
            if (empty($chk_model_id)) {
                //插入数据库
                $insert = db('qsn_model')->insert($data);
                if ($insert) {
                    returnjson([1, '添加成功', '']);
                } else {
                    returnjson([2, '添加失败', '']);
                }
            } else {
                returnjson([3, '该数据已存在', '']);
            }
        }

我这里用了TP5提供的助手函数，熟悉PHP的话，应该会知道![\_GET和][GET]\_POST,这里就是对应$\_POST,TP5对这两个函数形成了助手函数，防止一些SQL注入等安全因素带来的隐患。  
此外，还有一个封装的returnjson方法，对我们返回的状态码，数据，msg进行规范操作。

## 6.功能一览 ##

然后我们查看下我们的功能实现了没

![img\_3df785eb566276c83c6478e9dcd8de85.gif][img_3df785eb566276c83c6478e9dcd8de85.gif]

1.gif

可以看见，列表的模板已经从2个增加到3个了。  
大功告成啦，如果喜欢就给颗小吧~

此外还有对应的  
[答题管理系统二:模板删除功能][Link 1]

[答题管理系统三:题目及选项增删功能][Link 2]

[答题管理系统四:答题功能][Link 3]

[答题管理系统五:统计功能][Link 4]

[www.songlei.online]: http://www.songlei.online
[img_0d324c462f2c4d4371ccaedda43ac120.jpe]: /images/20220213/06bdfec6a062458890040f6440d73097.png
[ThinkPHP5]: http://www.thinkphp.cn/down/1156.html
[TP5]: https://www.kancloud.cn/manual/thinkphp5/118003
[layui]: http://www.layui.com/doc/
[img_fa232e4d9d728542b3a03eec8d2d73fe.png]: /images/20220213/f2d041baaffe49628eb0cf1ccf1ed1bb.png
[img_a1108406c6ac58fef679c6fd717ede6e.png]: /images/20220213/c1b859b2265d44779746efb9cb99def3.png
[img_7fc4761e441c00cf3875c109ad4700a0.png]: /images/20220213/755d9a235755438d90b8f9c8fa78f63a.png
[img_d3c55edeba1f22e3bac13caa7be0c82e.png]: /images/20220213/6e3d3cf996d1485dac64a802bd547fae.png
[img_91618dfe6ee6a99deb671436760d498d.png]: /images/20220213/3b33f68f5f364a9f819f46782812c35b.png
[img_ff02af4702451d934282584a8d2cee45.png]: /images/20220213/dcfa450784a047c3b5b72de3f7b797f4.png
[img_5745805213df54fbc926b98d96beb26e.png]: /images/20220213/db49b829fe0f4a4f9625f100ef1b8e9f.png
[GET]: https://math.jianshu.com/math?formula=_GET%E5%92%8C
[img_3df785eb566276c83c6478e9dcd8de85.gif]: /images/20220213/eb3787b5ea5043218e6be9c9a38739ac.png
[Link 1]: https://www.jianshu.com/p/9f6f611b19fb
[Link 2]: https://www.jianshu.com/p/599623baca26
[Link 3]: https://www.jianshu.com/p/f8d18ca91c6f
[Link 4]: https://www.jianshu.com/p/27bde9989f8a