随着互联网的普及和各种电商平台的出现，动态表单已经成为很多网站必不可少的功能。动态表单可以根据需要动态生成页面，方便用户填写各种信息。而thinkphp6是一款优秀的php框架，其强大的功能和开发效率被广泛应用于各种web应用程序开发中。本文将介绍如何利用thinkphp6实现动态表单。
一、前期准备
首先，我们需要安装并配置好ThinkPHP6框架。其次，我们需要下载和安装LayUI，这是一套比较流行的前端UI框架，非常适合制作动态表单。二、数据库设计
数据库设计是非常重要的一环节，本文我们将使用MySQL数据库进行演示，数据库结构如下：CREATE TABLE form (
id int(11) NOT NULL,
form_title varchar(50) NOT NULL COMMENT 表单标题,
form_fields text NOT NULL COMMENT 表单字段,
is_active tinyint(1) NOT NULL COMMENT 是否启用,
create_time datetime NOT NULL COMMENT 创建时间,
update_time datetime NOT NULL COMMENT 更新时间
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT=动态表单;其中，form_title表示表单标题，form_fields表示表单字段信息，is_active表示是否启用，create_time表示创建时间，update_time表示更新时间。
三、后台实现
定义路由
首先，我们需要在route目录下定义一个路由文件，假设文件名为form.php，文件内容如下：1
2
3
4
5
6
7
8
acadeRoute;
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+]);
});
创建控制器
在app目录下创建一个名为Form.php的控制器，文件内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
alidateForm 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 => 删除失败]);
}
}
}
创建模型
在app目录下创建一个名为FormModel.php的模型，文件内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
<?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;
}
四、前台实现
创建表单编辑页面
在view目录下创建一个名为edit.html的文件，文件内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<meta charset="utf-8"><title>动态表单</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/layui/css/layui.css"><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">表单标题</label>
<div class="layui-input-block">
<input type="text" name="form_title" id="form_title" class="layui-input" lay-verify="required" autocomplete="off" placeholder="请输入表单标题">
</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="请输入表单字段，每个字段之间用英文逗号隔开"></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>
创建表单列表页面
在view目录下创建一个名为index.html的文件，文件内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<meta charset="utf-8"><title>动态表单</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><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>表单标题</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/%7B%7B%20v.id%20%7D%7D" 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(确定要删除吗？, {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>
五、最终效果
我们可以通过浏览器访问localhost/form/index来进入动态表单的管理页面，可以添加、编辑和删除表单以及查看表单列表。在编辑表单时，用户可以添加任意数量的表单字段。图1：表单列表页面
图2：添加表单页面
图3：编辑表单页面
总结
利用ThinkPHP6和LayUI实现动态表单并不困难，只要我们掌握了相关知识和技能，就可以轻松地实现这个功能。当然，本文提供的代码只是一个示例，我们可以根据需要进行修改和优化。希望本文可以帮助到有需要的读者。以上就是利用ThinkPHP6实现动态表单的详细内容，更多请关注php中文网其它相关文章！