Laksanakan borang dinamik menggunakan ThinkPHP6-ThinkPHP-php.cn

Dengan populariti Internet dan kemunculan pelbagai platform e-dagang, bentuk dinamik telah menjadi ciri penting bagi banyak laman web. Borang dinamik boleh menjana halaman secara dinamik mengikut keperluan untuk memudahkan pengguna mengisi pelbagai maklumat. ThinkPHP6 ialah rangka kerja PHP yang sangat baik, dan fungsi dan kecekapan pembangunannya yang berkuasa digunakan secara meluas dalam pembangunan pelbagai aplikasi web. Artikel ini akan memperkenalkan cara menggunakan ThinkPHP6 untuk melaksanakan borang dinamik.

1. Persediaan
Pertama, kita perlu memasang dan mengkonfigurasi rangka kerja ThinkPHP6. Kedua, kita perlu memuat turun dan memasang LayUI, yang merupakan rangka kerja UI bahagian hadapan yang popular yang sangat sesuai untuk membuat borang dinamik.

2. Reka bentuk pangkalan data
Reka bentuk pangkalan data adalah langkah yang sangat penting Dalam artikel ini kami akan menggunakan pangkalan data MySQL untuk demonstrasi:

BUAT JADUAL form. (
id int(11) BUKAN NULL,
form_title varchar(50) BUKAN NULL ULASAN 'tajuk borang',
form_fields teks BUKAN NULL ULASAN 'medan borang',
is_active tinyint (1) BUKAN NULL ULASAN 'Sama ada ia didayakan',
create_time tarikh BUKAN NULL ULASAN 'Masa penciptaan',
update_time tarikh BUKAN NULL ULASAN 'Masa kemas kini'
) ENGINE=InnoDB DEFAULT CHARSET= utf8mb4 COMMENT='Dynamic Form';

Antaranya, form_title mewakili tajuk borang, form_fields mewakili maklumat medan borang, is_active mewakili sama ada ia didayakan, create_time mewakili masa penciptaan, dan update_time mewakili masa kemas kini.

3. Pelaksanaan Backend

Tentukan laluan
Pertama, kita perlu mentakrifkan fail penghalaan dalam direktori laluan Anggapkan nama fail ialah form.php dan fail kandungan adalah seperti berikut:

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

Salin selepas log masuk

Buat pengawal
Buat pengawal bernama Form.php dalam direktori aplikasi Kandungan fail adalah seperti berikut:

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

Salin selepas log masuk

Cipta model
Buat model bernama FormModel.php dalam direktori aplikasi Kandungan fail adalah seperti berikut:

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

Salin selepas log masuk

4. Pelaksanaan bahagian hadapan

Buat halaman penyuntingan borang
Buat fail bernama edit.html dalam direktori paparan Kandungan fail adalah seperti berikut:

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

Salin selepas log masuk

Buat senarai borang. halaman
Buat fail bernama indeks dalam fail .html direktori paparan, kandungan fail adalah seperti berikut:

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

Salin selepas log masuk

5 Kesan akhir
Kami boleh mengakses halaman pengurusan borang dinamik dengan mengakses localhost/form/index melalui penyemak imbas, di mana kita boleh menambah, mengedit dan Padam borang dan melihat senarai borang. Semasa mengedit borang, pengguna boleh menambah sebarang bilangan medan borang.

Rajah 1: Halaman senarai borang

Rajah 2: Tambah halaman borang

Rajah 3: Edit halaman borang

Ringkasan
Menggunakan ThinkPHP6 dan LayUI Tidak sukar untuk melaksanakan bentuk dinamik Selagi kita menguasai pengetahuan dan kemahiran yang berkaitan, kita boleh melaksanakan fungsi ini dengan mudah. Sudah tentu, kod yang disediakan dalam artikel ini hanyalah contoh dan kami boleh mengubah suai dan mengoptimumkannya mengikut keperluan. Saya harap artikel ini dapat membantu pembaca yang memerlukan.

Atas ialah kandungan terperinci Laksanakan borang dinamik menggunakan ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!