亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.430618.com 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

利用ThinkPHP6實現動態表單

發布時間：2024-03-09 01:22:04 作者：網友整理

隨著互聯網的普及和各種電商平臺的出現，動態表單已經成為很多網站必不可少的功能。動態表單可以根據需要動態生成頁面，方便用戶填寫各種信息。而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，文件內容如下：
<?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+']);
});

登錄后復制

    創建控制器
    在app目錄下創建一個名為Form.php的控制器，文件內容如下：
<?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' => '刪除失敗']);
        }
    }
}

登錄后復制

    創建模型
    在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的文件，文件內容如下：
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>動態表單</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">表單標題</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>
</body>

</html>

登錄后復制

    創建表單列表頁面
    在view目錄下創建一個名為index.html的文件，文件內容如下：
<!DOCTYPE html>

<html>

<head>
    <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>
</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>表單標題</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('確定要刪除嗎？', {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>

登錄后復制

五、最終效果
我們可以通過瀏覽器訪問localhost/form/index來進入動態表單的管理頁面，可以添加、編輯和刪除表單以及查看表單列表。在編輯表單時，用戶可以添加任意數量的表單字段。

圖1：表單列表頁面

圖2：添加表單頁面

圖3：編輯表單頁面

總結
利用ThinkPHP6和LayUI實現動態表單并不困難，只要我們掌握了相關知識和技能，就可以輕松地實現這個功能。當然，本文提供的代碼只是一個示例，我們可以根據需要進行修改和優化。希望本文可以幫助到有需要的讀者。

以上就是利用ThinkPHP6實現動態表單的詳細內容，更多請關注www.xfxf.net其它相關文章！

分享到：
標簽：thinkphp 動態表單 實現
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定