最近实习做了一个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。
<!--添加弹出层-->
<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的话，应该会知道_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个了。
大功告成啦，如果喜欢就给颗小吧~
此外还有对应的
答题管理系统二:模板删除功能
网友评论