How to encapsulate Layui in ThinkPHP-ThinkPHP-php.cn

How to encapsulate Layui in ThinkPHP

PHPz

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

Original

1005 people have browsed it

ThinkPHP is a very excellent PHP development framework, and layui is a very popular front-end framework that is used in many projects. Therefore, this article will introduce how to encapsulate Layui in ThinkPHP.

1. Why encapsulate Layui in ThinkPHP
In actual development, we often use the Layui framework to achieve front-end effects, but there are also many problems when using Layui directly in projects, such as the front-end The code is mixed with the backend code, is difficult to maintain, and is not suitable for team development.

Therefore, encapsulating Layui in the ThinkPHP framework can effectively solve the above problems, making the code clearer, easier to maintain, and more suitable for team development.

2. How to encapsulate Layui in ThinkPHP
Encapsulating Layui in ThinkPHP can be divided into the following steps:

1. Download Layui

Go to Layui official website http ://www.layui.com/Download the latest version of Layui files.

2.Introduce Layui files

After decompressing the downloaded Layui file, store the files you need (such as layui.js, layui.css) in the public folder of the project directory Down. Then import these files into the project.

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

Copy after login

3. Define templates

In ThinkPHP, templates usually use template engines such as smarty. Here we take smarty as an example to define a basic template.

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

Copy after login

In this template, you can see that we have defined a basic HTML structure, introduced Layui's style and script files, and in the content tag, we have placed the content rendered by the specific page.

4. Define the basic page

There will be many similar pages in the project, such as login page, form page, etc. Here we can define a basic page template for inheritance by other pages.

In ThinkPHP, we can place public view files in the application/common/view folder of the project directory. Now we will store the view file that defines the base page here.

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

Copy after login

In this basic page, we inherit the previously defined template, define a layui container, and place the content rendered by the specific page in the super tag.

5. Define specific pages

It is also very simple to define specific pages. You only need to inherit the basic page and write HTML code in the super tag.

{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 %}

Copy after login

In this page, we inherit the previously defined basic page and implement a user management page using Layui components.

3. Advantages of encapsulated Layui
When using encapsulated Layui, we can see that the code becomes clearer, the front-end and back-end code are separated, and it is easy to maintain and organize. At the same time, benefiting from the template inheritance mechanism, we can easily reuse basic pages, making project development more efficient.

In addition, encapsulated Layui can also adapt to team development. Developers only need to focus on the pages they are responsible for without having to understand the underlying implementation in depth. In this way, developers can focus more on their own fields and make project development more efficient.

The above is the detailed content of How to encapsulate Layui in ThinkPHP. For more information, please follow other related articles on the PHP Chinese website!