recherche

Maison >cadre php >PensezPHP >Implémenter des formulaires dynamiques à l'aide de ThinkPHP6

Implémenter des formulaires dynamiques à l'aide de ThinkPHP6

WBOY
WBOYoriginal
2023-06-20 20:49:071809parcourir

Avec la popularité d'Internet et l'émergence de diverses plateformes de commerce électronique, les formulaires dynamiques sont devenus une fonctionnalité essentielle de nombreux sites Web. Les formulaires dynamiques peuvent générer dynamiquement des pages selon les besoins pour permettre aux utilisateurs de remplir diverses informations. ThinkPHP6 est un excellent framework PHP, et ses fonctions puissantes et son efficacité de développement sont largement utilisées dans le développement de diverses applications Web. Cet article explique comment utiliser ThinkPHP6 pour implémenter des formulaires dynamiques.

1. Préparation précoce
Tout d'abord, nous devons installer et configurer le framework ThinkPHP6. Deuxièmement, nous devons télécharger et installer LayUI, qui est un framework d'interface utilisateur frontal populaire très approprié pour créer des formulaires dynamiques.

2. Conception de la base de données
La conception de la base de données est une étape très importante Dans cet article, nous utiliserons la base de données MySQL à des fins de démonstration. La structure de la base de données est la suivante :

#🎜🎜. #CREATE TABLE form (

id int(11) NON NULL,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 form_title varchar(50) NON NULL COMMENTAIRE 'titre du formulaire',
form_fields text NOT NULL COMMENT 'Champs du formulaire',

is_active tinyint(1) NOT NULL COMMENT 'S'il est activé ',

create_time datetime NOT NULL COMMENT 'Heure de création',

update_time datetime NOT NULL COMMENT 'Heure de mise à jour'

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

    Parmi eux, form_title représente le titre du formulaire, form_fields représente les informations du champ du formulaire, is_active indique s'il est activé, create_time représente l'heure de création et update_time représente l'heure de mise à jour.

  1. 3. Implémentation du backend
    Définir le routage
  1. Tout d'abord, nous devons définir un fichier de routage dans le répertoire de route, en supposant que le nom du fichier est form .php , le contenu du fichier est le suivant : 
    2. <?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+']);
});
    Create Controller
  1. Créez un contrôleur nommé Form.php dans le répertoire de l'application, le contenu du fichier est le suivant suit : #🎜 🎜#
    <?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' => '删除失败']);
        }
    }
}
Créer un modèle

Créez un modèle nommé FormModel.php dans le répertoire de l'application. Le contenu du fichier est le suivant :

#🎜 🎜#
<?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';
}
#🎜 🎜#4. Implémentation front-end

  1. Créer une page d'édition de formulaire
    2. Créez un fichier nommé edit.html dans le répertoire de vue. Le fichier est le suivant :
#🎜 🎜#
<!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>
  1. Créer une page de liste de formulaires
    Créer un fichier nommé index.html dans le répertoire de vue. Le contenu du fichier est le suivant : 
<!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">&#xe654;</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>

5. Effet final
Nous pouvons accéder au localhost/form/index via le navigateur pour accéder à la page de gestion du formulaire dynamique. Nous pouvons ajouter, modifier et supprimer. formulaires et afficher la liste des formulaires. Lors de la modification d'un formulaire, les utilisateurs peuvent ajouter n'importe quel nombre de champs de formulaire.

Image 1 : Page de liste de formulaires

Image 2 : Ajouter une page de formulaire

Image 3 : Modifier la page du formulaire

Résumé
Il n'est pas difficile d'implémenter des formulaires dynamiques en utilisant ThinkPHP6 et LayUI Tant que nous maîtrisons les connaissances et compétences pertinentes, nous pouvons facilement implémenter cette fonction. Bien entendu, le code fourni dans cet article n’est qu’un exemple et nous pouvons le modifier et l’optimiser selon nos besoins. J'espère que cet article pourra aider les lecteurs dans le besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser ThinkPHP6 pour implémenter le contrôle des autorisationsArticle suivant：Comment utiliser ThinkPHP6 pour implémenter le contrôle des autorisations

Articles Liés

Voir plus