Bagaimana untuk merangkum Layui dalam ThinkPHP-ThinkPHP-php.cn

Bagaimana untuk merangkum Layui dalam ThinkPHP

PHPz

Lepaskan： 2023-04-07 14:03:50

asal

1004 orang telah melayarinya

ThinkPHP ialah rangka kerja pembangunan PHP yang sangat baik, dan layui ialah rangka kerja hadapan yang sangat popular yang digunakan dalam banyak projek. Oleh itu, artikel ini akan memperkenalkan cara merangkum Layui dalam ThinkPHP.

1. Mengapa merangkum Layui dalam ThinkPHP
Dalam pembangunan sebenar, kami sering menggunakan rangka kerja Layui untuk mencapai kesan bahagian hadapan, tetapi terdapat juga banyak masalah apabila menggunakan Layui secara langsung dalam projek, seperti front- tamat Kod bercampur dengan kod bahagian belakang, sukar untuk dikekalkan, dan tidak sesuai untuk pembangunan pasukan.

Oleh itu, merangkum Layui dalam rangka kerja ThinkPHP dapat menyelesaikan masalah di atas dengan berkesan, menjadikan kod lebih jelas, lebih mudah diselenggara dan lebih sesuai untuk pembangunan pasukan.

2. Cara merangkum Layui dalam ThinkPHP
Mengekapkan Layui dalam ThinkPHP boleh dibahagikan kepada langkah berikut:

1. Muat turun Layui

di laman web rasmi Layui http ://www.layui.com/Muat turun versi terkini fail Layui.

2 Perkenalkan fail Layui

Selepas menyahmampat fail Layui yang dimuat turun, simpan fail yang anda perlukan (seperti layui.js, layui.css) dalam folder awam direktori projek Down. . Kemudian import fail ini ke dalam projek.

<link rel="stylesheet" href="/public/layui/css/layui.css" media="all">
<script src="/public/layui/layui.js"></script>

Salin selepas log masuk

3. Tentukan templat

Dalam ThinkPHP, templat biasanya menggunakan enjin templat seperti smarty Di sini kami mengambil smarty sebagai contoh untuk mentakrifkan templat asas.

<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/public/layui/css/layui.css" media="all">
    <script src="/public/layui/layui.js"></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Salin selepas log masuk

Dalam templat ini, anda dapat melihat bahawa kami telah mentakrifkan struktur HTML asas, memperkenalkan gaya dan fail skrip Layui, dan dalam teg kandungan, kami telah meletakkan kandungan yang diberikan oleh halaman tertentu.

4. Tentukan halaman asas

Akan terdapat banyak halaman yang serupa dalam projek, seperti halaman log masuk, halaman borang, dsb. Di sini kita boleh menentukan templat halaman asas untuk warisan oleh halaman lain.

Dalam ThinkPHP, kami boleh meletakkan fail paparan awam dalam folder aplikasi/biasa/lihat direktori projek. Sekarang kami akan menyimpan fail paparan yang mentakrifkan halaman asas di sini.

{extend name="base"}
{% block content %}
    <div class="layui-container">
        {% block super %}{% endblock %}
    </div>
{% endblock %}

Salin selepas log masuk

Dalam halaman asas ini, kami mewarisi templat yang ditakrifkan sebelum ini, mentakrifkan bekas layui dan meletakkan kandungan yang diberikan oleh halaman tertentu dalam teg super.

5. Tentukan halaman tertentu

Ia juga sangat mudah untuk menentukan halaman tertentu Anda hanya perlu mewarisi halaman asas dan menulis kod HTML dalam tag super.

{extend name="base"}
{% block super %}
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户管理</div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-normal">添加用户</button>
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>等级</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>admin</td>
                                <td>超级管理员</td>
                                <td><span class="layui-badge layui-badge-green">已启用</span></td>
                                <td>
                                    <button class="layui-btn layui-btn-xs">编辑</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

Salin selepas log masuk

Dalam halaman ini, kami mewarisi halaman asas yang ditakrifkan sebelum ini dan melaksanakan halaman pengurusan pengguna menggunakan komponen Layui.

3. Kelebihan Layui berkapsul
Apabila menggunakan Layui berkapsul, kita dapat melihat bahawa kod menjadi lebih jelas, kod bahagian hadapan dan bahagian belakang dipisahkan, dan ia mudah diselenggara dan disusun. Pada masa yang sama, mendapat manfaat daripada mekanisme pewarisan templat, kami boleh menggunakan semula halaman asas dengan mudah, menjadikan pembangunan projek lebih cekap.

Selain itu, Layui yang dikapsulkan juga boleh menyesuaikan diri dengan pembangunan pasukan hanya perlu memfokuskan pada halaman yang mereka bertanggungjawab tanpa perlu memahami pelaksanaan asas secara mendalam. Dengan cara ini, pembangun boleh memberi lebih tumpuan kepada bidang mereka sendiri dan menjadikan pembangunan projek lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk merangkum Layui dalam ThinkPHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!