Rumah > Artikel > rangka kerja php > Bagaimana untuk merangkum Layui dalam ThinkPHP
Bagaimana untuk merangkum Layui dalam ThinkPHP
- PHPzke hadapan
- 2023-05-30 17:42:43775semak imbas
1. Mengapa merangkumkan Layui dalam ThinkPHP
Dalam pembangunan sebenar, kami sering menggunakan rangka kerja Layui untuk mencapai kesan bahagian hadapan, tetapi ia digunakan secara langsung dalam projek Layui juga mempunyai banyak masalah, seperti kod front-end dan back-end bercampur bersama, sukar untuk diselenggara, 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 versi terkini fail Layui dari laman web rasmi Layui http://www.layui.com/.
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>
3. Tentukan templat
Apabila menggunakan ThinkPHP, orang biasanya menggunakan enjin templat seperti smarty untuk mencipta templat. Berikut menggunakan smarty sebagai contoh untuk memperkenalkan cara 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>Dalam templat ini, anda dapat melihat bahawa kami telah menentukan 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 %}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 %}Dalam halaman ini, kami mewarisi halaman asas yang ditakrifkan sebelum ini dan melaksanakan halaman pengurusan pengguna menggunakan komponen Layui.
3. Kelebihan Layui berkapsulApabila menggunakan Layui berkapsul, kita dapat melihat bahawa kod menjadi lebih jelas, kod bahagian hadapan dan bahagian belakang dipisahkan, mudah diselenggara dan menyusun. 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. Melakukannya membolehkan pembangun menumpukan lebih pada domain mereka, 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!