Implementieren Sie dynamische Formulare mit ThinkPHP6

Mit der Popularisierung des Internets und dem Aufkommen verschiedener E-Commerce-Plattformen sind dynamische Formen zu einem wesentlichen Merkmal vieler Websites geworden. Dynamische Formulare können bei Bedarf dynamisch Seiten generieren, um Benutzern das Ausfüllen verschiedener Informationen zu erleichtern. ThinkPHP6 ist ein hervorragendes PHP-Framework, dessen leistungsstarke Funktionen und Entwicklungseffizienz häufig bei der Entwicklung verschiedener Webanwendungen eingesetzt werden. In diesem Artikel wird erläutert, wie Sie mit ThinkPHP6 dynamische Formulare implementieren.

1. Vorbereitung
Zuerst müssen wir das ThinkPHP6-Framework installieren und konfigurieren. Zweitens müssen wir LayUI herunterladen und installieren, ein beliebtes Front-End-UI-Framework, das sich sehr gut für die Erstellung dynamischer Formulare eignet.

2. Datenbankdesign
Datenbankdesign ist ein sehr wichtiger Schritt. In diesem Artikel verwenden wir die Datenbankstruktur wie folgt:

CREATE TABLE form (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 id > int(11) NOT NULL,
form_title varchar(50) NOT NULL COMMENT 'form title',

form_fields text NOT NULL COMMENT 'form field',

is_active tinyint(1) NOT NULL COMMENT 'Ob es aktiviert ist',

create_time datetime NOT NULL COMMENT 'Creation time',

update_time datetime NOT NULL COMMENT ' Update time'

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='Dynamic Form';

1. Unter diesen stellt form_title den Formulartitel dar, form_fields stellt die Formularfeldinformationen dar und is_active gibt an, ob dies der Fall ist aktiviert, create_time stellt die Erstellungszeit dar und update_time stellt die Aktualisierungszeit dar. 3. Backend-Implementierung: Routing definieren
   im App-Verzeichnis erstellen Sie einen Controller mit dem Namen Form.php. Der Dateiinhalt lautet wie folgt:

<?php
use think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+']);
});

2. Erstellen Sie ein Modell mit dem Namen FormModel.php im App-Verzeichnis. Der Dateiinhalt lautet wie folgt:
   

<?php
namespace appcontroller;

use appmodelFormModel;
use appalidateForm as FormValidate;
use thinkacadeView;
use thinkacadeRequest;

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' => '删除失败']);
        }
    }
}

4. Front-End-Implementierung

3. 
   Erstellen Sie eine Formularbearbeitungsseite
Erstellen Sie eine Datei mit dem Namen edit.html im Ansichtsverzeichnis. Der Dateiinhalt lautet wie folgt:

<?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';
}

Erstellen Sie eine Formularlistenseite
1. Erstellen Sie eine Datei namens index.html im Ansichtsverzeichnis. Der Inhalt lautet wie folgt:
   

<!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>

5. Endgültiger Effekt

Wir können über den Browser auf localhost/form/index zugreifen, um die Verwaltungsseite des dynamischen Formulars aufzurufen, wo wir kann Formulare hinzufügen, bearbeiten und löschen sowie die Formularliste anzeigen. Beim Bearbeiten eines Formulars können Benutzer beliebig viele Formularfelder hinzufügen.
2. 
   Abbildung 1: Formularlistenseite

Abbildung 2: Formularseite hinzufügen

Abbildung 3: Formularseite bearbeiten

Zusammenfassung

Es ist nicht schwierig, dynamische Formulare mit ThinkPHP6 und LayUI zu implementieren, solange wir die entsprechenden Kenntnisse beherrschen und Mit unseren Fähigkeiten können wir diese Funktionalität problemlos implementieren. Natürlich ist der in diesem Artikel bereitgestellte Code nur ein Beispiel und wir können ihn bei Bedarf ändern und optimieren. Ich hoffe, dieser Artikel kann Lesern in Not helfen.

Das obige ist der detaillierte Inhalt vonImplementieren Sie dynamische Formulare mit ThinkPHP6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!