【ThinkPHP6.x/微实战】(2)配置环境引入UI

最新推荐文章于 2024-07-19 21:20:28 发布

CATs_001

最新推荐文章于 2024-07-19 21:20:28 发布

阅读量298

点赞数

分类专栏： ThinkPHP6.x/微实战后端菜鸟的逆袭之路文章标签：后端

本文链接：https://blog.csdn.net/happyxghero/article/details/119269965

版权

后端菜鸟的逆袭之路同时被 2 个专栏收录

38 篇文章 5 订阅

订阅专栏

ThinkPHP6.x/微实战

6 篇文章 2 订阅

订阅专栏

这一篇主要来介绍在tp6环境中引入Bootstrap。在使用tp6框架开发时，一般会做如下的准备工作，这里稍微做一下整理：

使用composer命令在指定的目录安装Thinkphp6.x；
修改.env文件，主要是注意配置数据库账号密码、开启调试；
使用命令或直接开启Nginx服务打开首页。

引入UI

直接将Bootstrap包含js和css文件夹拷贝项目中public/static里，在引用时使用相对路径即可，下面会有实例说明。接着配置config/view.php，使用模板替换输出，字段为'tpl_replace_string'：

// 模版替换输出
'tpl_replace_string' => [
    '__JS__' => '../static/js', 
    '__CSS__' => '../static/css'
],

这里需要注意一点：最好是在引用该变量的页面使用路由，不然容易出现路径错误的问题。

在默认控制器Index.php创建一个test()方法，用于测试UI引入的正确性（需要安装think-view扩展）：

return View::fetch('test');

前端测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap CSS -->
    {css href="__CSS__/bootstrap.min.css"}
    {css href="__CSS__/style.css"}

    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

<!--核心部分-->
<div class="container pt-5 mt-5">
    <div class="row">
        <div class="col-3">
            <button class="btn btn-secondary">用户管理</button>
        </div>
        <div class="col-9">
            <table class="table table-bordered">
                <thead class="bg-light">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>



<!-- 引入 JS 文件 -->
{js href="__JS__/jquery-3.3.1.min.js"}
{js href="__JS__/bootstrap.bundle.min.js"}
</body>
</html>