隨著互聯(lián)網(wǎng)的普及和各種電商平臺(tái)的出現(xiàn)，動(dòng)態(tài)表單已經(jīng)成為很多網(wǎng)站必不可少的功能。動(dòng)態(tài)表單可以根據(jù)需要?jiǎng)討B(tài)生成頁面，方便用戶填寫各種信息。而ThinkPHP6是一款優(yōu)秀的PHP框架，其強(qiáng)大的功能和開發(fā)效率被廣泛應(yīng)用于各種Web應(yīng)用程序開發(fā)中。本文將介紹如何利用ThinkPHP6實(shí)現(xiàn)動(dòng)態(tài)表單。
一、前期準(zhǔn)備
首先，我們需要安裝并配置好ThinkPHP6框架。其次，我們需要下載和安裝LayUI，這是一套比較流行的前端UI框架，非常適合制作動(dòng)態(tài)表單。
二、數(shù)據(jù)庫設(shè)計(jì)
數(shù)據(jù)庫設(shè)計(jì)是非常重要的一環(huán)節(jié)，本文我們將使用MySQL數(shù)據(jù)庫進(jìn)行演示，數(shù)據(jù)庫結(jié)構(gòu)如下：
CREATE TABLE form (id int(11) NOT NULL,form_title varchar(50) NOT NULL COMMENT ‘表單標(biāo)題’,form_fields text NOT NULL COMMENT ‘表單字段’,is_active tinyint(1) NOT NULL COMMENT ‘是否啟用’,create_time datetime NOT NULL COMMENT ‘創(chuàng)建時(shí)間’,update_time datetime NOT NULL COMMENT ‘更新時(shí)間’
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=’動(dòng)態(tài)表單’;
其中，form_title表示表單標(biāo)題，form_fields表示表單字段信息，is_active表示是否啟用，create_time表示創(chuàng)建時(shí)間，update_time表示更新時(shí)間。
三、后臺(tái)實(shí)現(xiàn)
- 定義路由
首先，我們需要在route目錄下定義一個(gè)路由文件，假設(shè)文件名為form.php，文件內(nèi)容如下：
<?php
use thinkacadeRoute;
Route::group('form', function () {
Route::rule('index', 'form/index', 'get');
Route::rule('add', 'form/add', 'get|post');
Route::rule('edit/:id', 'form/edit', 'get|post')->pattern(['id' => 'd+']);
Route::rule('delete/:id', 'form/delete', 'get')->pattern(['id' => 'd+']);
});
登錄后復(fù)制
- 創(chuàng)建控制器
在app目錄下創(chuàng)建一個(gè)名為Form.php的控制器，文件內(nèi)容如下：
<?php
namespace appcontroller;
use appmodelFormModel;
use appalidateForm as FormValidate;
use thinkacadeView;
use thinkacadeRequest;
class Form
{
public function index()
{
$formList = FormModel::paginate();
View::assign('formList', $formList);
return View::fetch();
}
public function add()
{
if (Request::isPost()) {
$data = Request::param();
$validate = new FormValidate();
if (!$validate->check($data)) {
return json(['code' => -1, 'msg' => $validate->getError()]);
}
$res = FormModel::create($data);
if ($res) {
return json(['code' => 0, 'msg' => '添加成功']);
} else {
return json(['code' => -1, 'msg' => '添加失敗']);
}
}
return View::fetch();
}
public function edit($id)
{
if (Request::isPost()) {
$data = Request::param();
$validate = new FormValidate();
if (!$validate->check($data)) {
return json(['code' => -1, 'msg' => $validate->getError()]);
}
$res = FormModel::update($data, ['id' => $id]);
if ($res) {
return json(['code' => 0, 'msg' => '編輯成功']);
} else {
return json(['code' => -1, 'msg' => '編輯失敗']);
}
}
$form = FormModel::find($id);
View::assign('form', $form);
return View::fetch();
}
public function delete($id)
{
$res = FormModel::destroy($id);
if ($res) {
return json(['code' => 0, 'msg' => '刪除成功']);
} else {
return json(['code' => -1, 'msg' => '刪除失敗']);
}
}
}
登錄后復(fù)制
- 創(chuàng)建模型
在app目錄下創(chuàng)建一個(gè)名為FormModel.php的模型，文件內(nèi)容如下：
<?php
namespace appmodel;
use thinkModel;
class FormModel extends Model
{
protected $table = 'form';
protected $pk = 'id';
protected $autoWriteTimestamp = true;
protected $createTime = 'create_time';
protected $updateTime = 'update_time';
protected $dateFormat = 'Y-m-d H:i:s';
}
登錄后復(fù)制
四、前臺(tái)實(shí)現(xiàn)
- 創(chuàng)建表單編輯頁面
在view目錄下創(chuàng)建一個(gè)名為edit.html的文件，文件內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)態(tài)表單</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<br>
<div class="layui-container">
<div class="layui-row">
<div class="layui-card">
<div class="layui-card-header">
<span id="title">添加表單</span>
</div>
<div class="layui-card-body">
<form class="layui-form" method="post">
<input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">表單標(biāo)題</label>
<div class="layui-input-block">
<input type="text" name="form_title" id="form_title" class="layui-input" lay-verify="required" autocomplete="off" placeholder="請(qǐng)輸入表單標(biāo)題">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">表單字段</label>
<div class="layui-input-block">
<textarea name="form_fields" id="form_fields" class="layui-textarea" lay-verify="required" placeholder="請(qǐng)輸入表單字段，每個(gè)字段之間用英文逗號(hào)隔開"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
<button type="button" class="layui-btn layui-btn-primary" onclick="history.go(-1);">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
layui.use('form', function() {
var form = layui.form;
form.on('submit(save)', function(data) {
$.post('/form/add', data.field, function(res) {
if (res.code == 0) {
layer.msg(res.msg, {icon: 1}, function() {
parent.location.reload();
});
} else {
layer.alert(res.msg, {icon: 2});
}
});
});
});
$(function() {
var id = $.getUrlParam('id');
if (id == undefined) {
$('#title').text('添加表單');
} else {
$('#title').text('編輯表單');
$.get('/form/edit/' + id, function(res) {
$('#id').val(res.id);
$('#form_title').val(res.form_title);
$('#form_fields').val(res.form_fields);
});
}
});
</script>
</body>
</html>
登錄后復(fù)制
- 創(chuàng)建表單列表頁面
在view目錄下創(chuàng)建一個(gè)名為index.html的文件，文件內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)態(tài)表單</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css">
<style type="text/css">
.layui-table-cell {
height: auto !important;
white-space: normal !important;
word-wrap: break-word;
}
</style>
</head>
<body>
<br>
<div class="layui-container">
<div class="layui-row">
<div class="layui-card">
<div class="layui-card-header">
<a href="/form/add" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 添加表單</a>
</div>
<div class="layui-card-body">
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>表單標(biāo)題</th>
<th>表單字段</th>
<th>是否啟用</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% foreach(formList as v) %}
<tr>
<td>{{ v.id }}</td>
<td>{{ v.form_title }}</td>
<td>{{ v.form_fields }}</td>
<td>{{ v.is_active == 1 ? "是" : "否" }}</td>
<td>
<a href="/form/edit/{{ v.id }}" class="layui-btn layui-btn-sm layui-btn-normal">編輯</a>
<a href="#" onclick="deleteItem({{ v.id }});" class="layui-btn layui-btn-sm layui-btn-danger">刪除</a>
</td>
</tr>
{% endforeach %}
</tbody>
</table>
<div class="layui-pagination">
{{ $formList->links() }}
</div>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
layui.use('layer', function() {
var layer = layui.layer;
deleteItem = function(id) {
layer.confirm('確定要?jiǎng)h除嗎？', {icon: 3}, function(index) {
$.get('/form/delete/' + id, function(res) {
if (res.code == 0) {
layer.msg(res.msg, {icon: 1}, function() {
parent.location.reload();
});
} else {
layer.alert(res.msg, {icon: 2});
}
});
layer.close(index);
});
};
});
$.getUrlParam = function(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
};
</script>
</body>
</html>
登錄后復(fù)制
五、最終效果
我們可以通過瀏覽器訪問localhost/form/index來進(jìn)入動(dòng)態(tài)表單的管理頁面，可以添加、編輯和刪除表單以及查看表單列表。在編輯表單時(shí)，用戶可以添加任意數(shù)量的表單字段。
圖1：表單列表頁面
圖2：添加表單頁面
圖3：編輯表單頁面
總結(jié)
利用ThinkPHP6和LayUI實(shí)現(xiàn)動(dòng)態(tài)表單并不困難，只要我們掌握了相關(guān)知識(shí)和技能，就可以輕松地實(shí)現(xiàn)這個(gè)功能。當(dāng)然，本文提供的代碼只是一個(gè)示例，我們可以根據(jù)需要進(jìn)行修改和優(yōu)化。希望本文可以幫助到有需要的讀者。
以上就是利用ThinkPHP6實(shí)現(xiàn)動(dòng)態(tài)表單的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.xfxf.net其它相關(guān)文章！
