最近實習(xí)做了一個PHP的項目練手吼野，大概是一個答題管理的模板(已部署至www.songlei.online)毙替，用了TP5+Jquery+layui來實現(xiàn)，由于整個系統(tǒng)功能模塊有點多胁黑，所以我們逐個拆分出來涩盾。這次先做問題模板的添加和刪除。如下圖敷硅。
1.前期準備
TP5框架：在tp5的官網(wǎng)下載框架模板ThinkPHP5核心版
編輯器:我選用的是VS code功咒。因為相較于其它IDE愉阎，更加輕量級,別的集成IDE亦可绞蹦。
一點點的TP5知識儲備:TP5完全開發(fā)手冊
一點點的layui文檔的bang助:layui開發(fā)使用文檔
2.架構(gòu)設(shè)計(MVC)
這里我選擇單模塊index模塊 將所有控制器都放在Controller層
不同于TP5框架提供的index模塊的view層力奋，我將view層要渲染的html頁面都放在了template目錄下，并且與controller層一一對應(yīng)幽七，配置的代碼景殷，在application模塊下的config.php中。
'template' => [
// 模板引擎類型 支持 php think 支持擴展
'type' => 'Think',
// 模板路徑
'view_path' => '',
// 模板后綴
'view_suffix' => 'html',
// 模板文件名分隔符
'view_depr' => DS,
// 模板引擎普通標簽開始標記
'tpl_begin' => '{',
// 模板引擎普通標簽結(jié)束標記
'tpl_end' => '}',
// 標簽庫標簽開始標記
'taglib_begin' => '{',
// 標簽庫標簽結(jié)束標記
'taglib_end' => '}',
'view_base' => ROOT_PATH . 'template/',
],
在template關(guān)聯(lián)數(shù)組末尾加一句view_base的關(guān)聯(lián)
'view_base' => ROOT_PATH . 'template/',
3.數(shù)據(jù)庫設(shè)計
t_gr_是表前綴澡屡，總共有四張表猿挚。
qsn_model表用來存儲題目的模板數(shù)據(jù)
qsn用來存儲每套模板下的題目數(shù)據(jù)
qsn_detail用來存儲用來存儲每個題目對應(yīng)選型的數(shù)據(jù)
psg_qsn_r用來存儲用戶答題的數(shù)據(jù)
今天的主角是qsn_model表
四個字段，主鍵(model_id)驶鹉，模板名稱(name)绩蜻，模板創(chuàng)建時間(time)，創(chuàng)建人名稱(create_name)室埋。
4.View層實現(xiàn)（Jquery+layui）
首先是添加模板的View層實現(xiàn)办绝。
引用了layui的按鈕組樣式 id為btn-add的按鈕 即為添加模板按鈕
點擊添加模板 我們用Jquery設(shè)置其彈出了一個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: "添加模板"
});
});
如下
input框有三個，分別對應(yīng)數(shù)據(jù)庫的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">創(chuàng)建人名字</label>
<div class="layui-input-block">
<input type="text" name="create_name" required lay-verify="required" placeholder="請輸入創(chuàng)建人姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">創(chuàng)建時間</label>
<div class="layui-input-block">
<input type="text" name="time" required lay-verify="required" placeholder="請輸入創(chuàng)建時間" 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>
然后孕蝉，我們數(shù)據(jù)點擊立即添加按鈕，id為add腌逢。我們對其用Jquery進行ajax請求降淮。
//添加數(shù)據(jù)
$('#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對應(yīng)返回的狀態(tài)碼
layer.msg(data.msg, {
icon: 6
});
location.reload();
} else {
layer.msg(data.msg, {
icon: 5
});
}
}, "json");
}
});
提交的data，就是我們輸入框獲取的三個值搏讶，create_name,name,time佳鳖。
提交到Controller層，如果返回的數(shù)據(jù)狀態(tài)碼為代表成功的1媒惕，則刷新整個頁面腋颠，否則，提示錯誤吓笙。
然后我們看看Controller層的代碼淑玫。
5.Controller層實現(xiàn)
首先我在application目錄下的common.php文件定義了一個公共方法，用來返回json格式數(shù)據(jù)給View層面睛。
<?php
// 應(yīng)用公共文件
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;
}
返回的數(shù)據(jù)有三個絮蒿，code狀態(tài)碼,msg信息，data返回的數(shù)據(jù)叁鉴。
然后看survey.php下的add_qsn方法：
//新增
public function add_qsn()
{
$data['create_name'] = input('post.create_name'); //thinkPHP中的助手函數(shù),我們用ajax提交的數(shù)據(jù)
$data['name'] = input('post.name');
$data['time'] = input('post.time');
$data['model_id'] = uniqid('model', true);//使用uniqid形成一個特定唯一的model_id
if (empty($data['create_name'])) {//查詢創(chuàng)建人是否為空
returnjson([3, 'warning1', '']);
}
//查詢model_id 是否重復(fù) 模板不存在的話 就能添加此條記錄
$chk_model_id = db('qsn_model')->where('create_name', $data['create_name'])->find($data);
if (empty($chk_model_id)) {
//插入數(shù)據(jù)庫
$insert = db('qsn_model')->insert($data);
if ($insert) {
returnjson([1, '添加成功', '']);
} else {
returnjson([2, '添加失敗', '']);
}
} else {
returnjson([3, '該數(shù)據(jù)已存在', '']);
}
}
我這里用了TP5提供的助手函數(shù)土涝，熟悉PHP的話，應(yīng)該會知道_POST,這里就是對應(yīng)$_POST,TP5對這兩個函數(shù)形成了助手函數(shù)幌墓，防止一些SQL注入等安全因素帶來的隱患但壮。
此外冀泻，還有一個封裝的returnjson方法，對我們返回的狀態(tài)碼蜡饵，數(shù)據(jù)弹渔，msg進行規(guī)范操作。
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.功能一覽
然后我們查看下我們的功能實現(xiàn)了沒
可以看見溯祸，列表的模板已經(jīng)從2個增加到3個了肢专。
大功告成啦，如果喜歡就給顆小吧~
此外還有對應(yīng)的
答題管理系統(tǒng)二:模板刪除功能
