지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > PHP 프레임워크 > ThinkPHP > 본문

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

WBOY
풀어 주다： 2023-06-20 20:49:07
원래의
1806명이 탐색했습니다.

인터넷의 대중화와 다양한 전자상거래 플랫폼의 등장으로 역동적인 형태는 많은 웹사이트의 필수 기능이 되었습니다. 동적 양식은 사용자가 다양한 정보를 쉽게 입력할 수 있도록 필요에 따라 페이지를 동적으로 생성할 수 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
thinkphp 实现 动态表单
원천：php.cn
이전 기사：ThinkPHP6을 사용하여 권한 제어를 구현하는 방법 다음 기사：ThinkPHP6 애플리케이션의 성능을 최적화하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
2004
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2160
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1825
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1720
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1738
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿