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 :
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';
<?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+']);
});<?php
namespace appcontroller;
use appmodelFormModel;
use app alidateForm 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é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';
}<!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><!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> 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!
Lequel est le plus simple, thinkphp ou laravel ?
Quelles sont les performances de thinkphp ?
Hongmeng OS compte-t-il comme Android ?
Comment ouvrir le fichier exe
nouvelles fonctionnalités de jdk8
Recommandation de classement des logiciels de détection de matériel informatique
Quelle est la commande cmd pour nettoyer les fichiers indésirables du lecteur C ?
Comment réparer le système Win7 s'il est endommagé et ne peut pas être démarré
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
