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

模板.JPG

1.前期准备

TP5框架：在tp5的官网下载框架模板ThinkPHP5核心版

编辑器:我选用的是VS code。因为相较于其它IDE，更加轻量级,别的集成IDE亦可。

一点点的TP5知识储备:TP5完全开发手册

一点点的layui文档的bang助:layui开发使用文档

2.架构设计(MVC)

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.数据库设计

image.png

t_gr_是表前缀，总共有四张表。

qsn_model表用来存储题目的模板数据

qsn用来存储每套模板下的题目数据

qsn_detail用来存储用来存储每个题目对应选型的数据

psg_qsn_r用来存储用户答题的数据

今天的主角是qsn_model表

image.png

image.png

四个字段，主键(model_id)，模板名称(name)，模板创建时间(time)，创建人名称(create_name)。

4.View层实现(Jquery+layui)

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

image.png

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

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: "添加模板"

});

});

如下

image.png

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

然后，我们数据点击立即添加按钮，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层。

// 应用公共文件

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的话，应该会知道

_POST,这里就是对应$_POST,TP5对这两个函数形成了助手函数，防止一些SQL注入等安全因素带来的隐患。

此外，还有一个封装的returnjson方法，对我们返回的状态码，数据，msg进行规范操作。

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;

}

6.功能一览

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

1.gif

可以看见，列表的模板已经从2个增加到3个了。

大功告成啦，如果喜欢就给颗小吧~

项目仅供测试学习使用，拒绝任何形式的商业用途，转侵删。

项目源码关注公众号Code In Java，回复"答题管理系统ThinkPHP版本"即可获取。除此之外，还有Java学习图谱，数据结构与算法资料等各种资料都可以在后台获取。