随着互联网的普及和各种电商平台的出现，动态表单已经成为很多网站必不可少的功能。动态表单可以根据需要动态生成页面，方便用户填写各种信息。而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表示更新时间。
立即学习“PHP免费学习笔记（深入）”；
三、后台实现
- 定义路由
首先，我们需要在route目录下定义一个路由文件，假设文件名为form.php，文件内容如下：
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的控制器，文件内容如下：
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的模型，文件内容如下：
<?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的文件，文件内容如下：
<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的文件，文件内容如下：
<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实现动态表单并不困难，只要我们掌握了相关知识和技能，就可以轻松地实现这个功能。当然，本文提供的代码只是一个示例，我们可以根据需要进行修改和优化。希望本文可以帮助到有需要的读者。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
