집 > 기사 > PHP 프레임워크 > ThinkPHP6을 사용하여 동적 양식 구현

ThinkPHP6을 사용하여 동적 양식 구현

WBOY원래의: 2023-06-20 20:49:071789검색

인터넷의 대중화와 다양한 전자상거래 플랫폼의 등장으로 역동적인 형태는 많은 웹사이트의 필수 기능이 되었습니다. 동적 양식은 사용자가 다양한 정보를 쉽게 입력할 수 있도록 필요에 따라 페이지를 동적으로 생성할 수 있습니다. ThinkPHP6은 뛰어난 PHP 프레임워크로, 그 강력한 기능과 개발 효율성은 다양한 웹 애플리케이션 개발에 널리 사용됩니다. 이 기사에서는 ThinkPHP6을 사용하여 동적 양식을 구현하는 방법을 소개합니다.

1. 준비
먼저 ThinkPHP6 프레임워크를 설치하고 구성해야 합니다. 둘째, 동적 양식을 만드는 데 매우 적합한 널리 사용되는 프런트엔드 UI 프레임워크인 LayUI를 다운로드하여 설치해야 합니다.

2. 데이터베이스 설계
데이터베이스 설계는 데모를 위해 MySQL 데이터베이스를 사용합니다.

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_fields text NOT NULL COMMENT '양식 필드 ',

is_activetinyint(1) NOT NULL COMMENT '활성화 여부',

create_time datetime NOT NULL COMMENT '생성 시간',

update_time code> datetime NOT NULL COMMENT ' 업데이트 시간'

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

이 중 form_title은 폼 제목, form_fields는 폼 필드 정보, is_active는 활성화 여부를 나타냅니다. 에서 create_time은 생성 시간을 나타내고, update_time은 업데이트 시간을 나타냅니다.

라우팅 정의
먼저 경로 디렉터리에 라우팅 파일을 정의해야 합니다. 파일 이름은 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+']);
});

컨트롤러를 만듭니다.
앱 디렉터리에 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' => '删除失败']);
        }
    }
}

모델을 만듭니다.

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

양식 목록 페이지 만들기

파일을 만듭니다. 파일 내용은 다음과 같습니다.

<!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. 최종 효과

브라우저를 통해 localhost/form/index에 액세스하여 동적 양식의 관리 페이지로 들어갈 수 있습니다. 양식을 추가, 편집, 삭제하고 양식 목록을 볼 수 있습니다. 양식을 편집할 때 사용자는 양식 필드를 원하는 만큼 추가할 수 있습니다.

그림 1: 양식 목록 페이지

그림 2: 양식 추가 페이지

🎜그림 3: 양식 편집 페이지🎜🎜요약🎜 관련 지식과 지식을 숙지한다면 ThinkPHP6 및 LayUI를 사용하여 동적 양식을 구현하는 것은 어렵지 않습니다. 기술을 사용하면 이 기능을 쉽게 구현할 수 있습니다. 물론, 이 글에 제공된 코드는 단지 예시일 뿐이며 필요에 따라 수정하고 최적화할 수 있습니다. 이 글이 도움이 필요한 독자들에게 도움이 되기를 바랍니다. 🎜

위 내용은 ThinkPHP6을 사용하여 동적 양식 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：ThinkPHP6을 사용하여 권한 제어를 구현하는 방법다음 기사：ThinkPHP6을 사용하여 권한 제어를 구현하는 방법