关于php:thinkphp配置环境引入UI

39次阅读

共计 1579 个字符，预计需要花费 4 分钟才能阅读完成。

配置减速源, 装置 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
```

间接将 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"}

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

正文完