利用ThinkPHP6實現動態表單

3415

隨著互聯網的普及和各種電商平臺的出現，動態表單已經成為很多網站必不可少的功能。動態表單可以根據需要動態生成頁面，方便用戶填寫各種信息。而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免費學習筆記（深入）”；

三、后臺實現

  1. 定義路由
    首先，我們需要在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+']); });
  1. 創建控制器
    在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' => '刪除失敗']);         }     } }
  1. 創建模型
    在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'; }

四、前臺實現

  1. 創建表單編輯頁面
    在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>
  1. 創建表單列表頁面
    在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-&gt;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
PHP框架
# thinkphp
喜歡就支持一下吧
點贊15 分享