thinkphp-配置環境引入UI

1. 配置環境

配置加速源,安裝orm擴充套件,安裝composer,安裝驅動,使用composer命令在指定的目錄安裝Thinkphp6.x;

配置conposer中國源
composer config -g repo.packagist composer https://packagist.phpcomposer.com
下載orm
composer require topthink/think-orm
安裝composer
apt install composer
安裝mysqli
apt install php-pdo php-mysqli
使用composer命令在指定目錄安裝thinkphp
composer create-project topthink/think tp6demo

將.example.env檔案修改為.env檔案,配置資料庫賬號密碼,以及開啟除錯;
```
root 123456 student true
```

在命令列使用以下命令開啟虛擬伺服器,可配置域名或本地ip,我個人使用
```
php think run     //localhost:8000
```

2. 引入UI

直接將bootstrap包含js和css資料夾複製專案中public/static裡;
配置config/view.php,設定靜態呼叫的模板路徑;

//模板替換輸出
'tp1_replace_string' => [
    '__JS__'=> '../static/js',
    '__CSS__' => '../static/css',
],

控制器裡新建test方法,用於測試UI引入的正確性,這時訪問頁面會報錯提示沒有安裝驅動。下一步去安裝驅動。

在命令列中執行以下命令安裝驅動
```
composer require topthink/think-view
```

修改config/view.php檔案為'view_suffix' => 'php',新建模板檔案index/test.php

bootstrap-theme.min.css引入UI,注意UI在<head><title></title></hrad>下面引入

<!-- 引入Bootstrap CSS -->
{css href="/static/css/bootstrap.min.css"}
{css href="/static/css/style.css"}

<!-- 移動裝置優先-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit-no">

建立模板檔案view/index/test.html,引入UI
由於我們還沒有style.css檔案,所以要去靜態檔案下的css裡建立一個,內容為@charset "UTF-8";
在元素裡找到引入的檔案,右鍵來到樣式編輯器,看會不會顯示檔案內容,顯示則表示引入成功

body裡引入js檔案

<!-- 引入js檔案 -->
{js href="/static/js/jquery-3.3.1.min.js"}
{js href="/static/js/bootstrap.bundle.min.js"}

3. 核心程式碼

按鈕<button>
表格<table>


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

本作品採用《CC 協議》，轉載必須註明作者和本文連結

thinkphp-配置環境引入UI

1. 配置環境

2. 引入UI

3. 核心程式碼

相關文章