찾다

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

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

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

인터넷의 대중화와 다양한 전자상거래 플랫폼의 등장으로 역동적인 형태는 많은 웹사이트의 필수 기능이 되었습니다. 동적 양식은 사용자가 다양한 정보를 쉽게 입력할 수 있도록 필요에 따라 페이지를 동적으로 생성할 수 있습니다. 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';
  1. 이 중 form_title은 폼 제목, form_fields는 폼 필드 정보, is_active는 활성화 여부를 나타냅니다. 에서 create_time은 생성 시간을 나타내고, update_time은 업데이트 시간을 나타냅니다.
    2. 3. 백엔드 구현
  1. 라우팅 정의
    먼저 경로 디렉터리에 라우팅 파일을 정의해야 합니다. 파일 이름은 form.php이고 파일 내용은 다음과 같습니다. 
<?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+']);
});
  1. 컨트롤러를 만듭니다.
    앱 디렉터리에 Form.php라는 컨트롤러를 만듭니다. 파일 내용은 다음과 같습니다. 
<?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' => '删除失败']);
        }
    }
}

모델을 만듭니다.
    앱 디렉터리에 FormModel.php라는 모델을 만듭니다. 

  1. <?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';
}
    2. 4. 프론트 엔드 구현
  1. 양식 편집 페이지 만들기
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：ThinkPHP6을 사용하여 권한 제어를 구현하는 방법다음 기사：ThinkPHP6을 사용하여 권한 제어를 구현하는 방법

관련 기사

더보기