起步：MVC模式
ThinkPHP 6.0 支持傳統(tǒng)的MVC（Model-View-Controller）模式以及流行的MVVM（Model-View-ViewModel）模式的應(yīng)用開(kāi)發(fā)
ThinkPHP6 起步
ThinkPHP支持傳統(tǒng)的MVC（
Model-View-Controller）模式以及流行的MVVM（Model-View-ViewModel）模式的應(yīng)用開(kāi)發(fā)
一、MVC
MVC 軟件系統(tǒng)分為三個(gè)基本部分：模型（
Model）、視圖（View）和控制器（Controller）ThinkPHP 是一個(gè)典型的 MVC 架構(gòu)
控制器 - 負(fù)責(zé)轉(zhuǎn)發(fā)請(qǐng)求，對(duì)請(qǐng)求進(jìn)行處理。
視圖 - 界面設(shè)計(jì)人員進(jìn)行圖形界面設(shè)計(jì)。
模型 - 程序員編寫(xiě)程序應(yīng)有的功能（實(shí)現(xiàn)算法等等）、數(shù)據(jù)庫(kù)專(zhuān)家進(jìn)行數(shù)據(jù)管理和數(shù)據(jù)庫(kù)設(shè)計(jì)(可以實(shí)現(xiàn)具體的功能)。
二、單應(yīng)用模式訪問(wèn)
項(xiàng)目訪問(wèn)路徑：www.xxx.com/index.php/index/index
index.php 入口文件
index 控制器
index 操作
├─app 應(yīng)用目錄
│ ├─controller 控制器目錄
│ ├─model 模型目錄
│ ├─ ... 更多類(lèi)庫(kù)目錄
│ │
│ ├─common.php 公共函數(shù)文件
│ └─event.php 事件定義文件
│
├─config 配置目錄
│ ├─app.php 應(yīng)用配置
│ ├─cache.php 緩存配置
│ ├─console.php 控制臺(tái)配置
│ ├─cookie.php Cookie配置
│ ├─database.php 數(shù)據(jù)庫(kù)配置
│ ├─filesystem.php 文件磁盤(pán)配置
│ ├─lang.php 多語(yǔ)言配置
│ ├─log.php 日志配置
│ ├─middleware.php 中間件配置
│ ├─route.php URL和路由配置
│ ├─session.php Session配置
│ ├─trace.php Trace配置
│ └─view.php 視圖配置
│
├─view 視圖目錄
├─route 路由定義目錄
│ ├─route.php 路由定義文件
│ └─ ...
│
├─public WEB目錄（對(duì)外訪問(wèn)目錄）
│ ├─index.php 入口文件
│ ├─router.php 快速測(cè)試文件
│ └─.htaccess 用于apache的重寫(xiě)
│
├─extend 擴(kuò)展類(lèi)庫(kù)目錄
├─runtime 應(yīng)用的運(yùn)行時(shí)目錄（可寫(xiě)，可定制）
├─vendor Composer類(lèi)庫(kù)目錄
├─.example.env 環(huán)境變量示例文件
├─composer.json composer 定義文件
├─LICENSE.txt 授權(quán)說(shuō)明文件
├─README.md README 文件
├─think 命令行入口文件
三、安裝視圖
視圖功能由
\think\View類(lèi)配合視圖驅(qū)動(dòng)（也即模板引擎驅(qū)動(dòng)）類(lèi)一起完成，新版僅內(nèi)置了PHP原生模板引擎（主要用于內(nèi)置的異常頁(yè)面輸出），如果需要使用其它的模板引擎需要單獨(dú)安裝相應(yīng)的模板引擎擴(kuò)展
ThinkPHP6已獨(dú)立出一套模版，命名為：ThinkTemplate模板引擎；
使用think-template模板引擎，需安裝think-view；
composer require topthink/think-view
視圖目錄可以在根目錄，也可以在app應(yīng)用目錄
四、模版渲染
要使用View，必須先引入
think\facade\View門(mén)面類(lèi)fetch 方法渲染頁(yè)面
參數(shù)：靜態(tài)頁(yè)面的路徑，默認(rèn)對(duì)應(yīng)的靜態(tài)頁(yè)面
controller代碼
<?php
namespace app\controller;
use think\facade\View;
class Index{
public function index(){
return View::fetch();
}
}
view代碼
備：Index類(lèi)對(duì)應(yīng)view下面的目錄
備：index方法對(duì)應(yīng)view下面的目錄里的靜態(tài)文件
五、模版變量
assign 方法賦值屬于全局變量賦值
模版輸出 {$name}
controller代碼
namespace app\controller;
use think\facade\View;
class Index{
public function index(){
// 模板變量賦值
View::assign('name','歐陽(yáng)克');
View::assign('email','oyk@php.cn');
// 或者批量賦值
View::assign([
'name' => '歐陽(yáng)克',
'email' => 'oyk@php.cn'
]);
// 模板輸出
return View::fetch();
}
}
view代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ThinkPHP6</title>
</head>
<body>
姓名：{$name}
<br>
郵箱：{$email}
</body>
</html>
六、入口
public目錄為唯一的web可訪問(wèn)目錄
把資源文件放到
public/static中入口文件，默認(rèn)為index.php
七、示例
把html頁(yè)面放到ThinkPHP框架里
此頁(yè)面是靜態(tài)文件
<!DOCTYPE html>
<html>
<head>
<title>列表頁(yè)</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<style type="text/css">
.header{width:100%;height: 50px;line-height: 50px;background: #2e6da4;color:#ffffff;}
.title{margin-left: 20px;font-size: 20px;}
.userinfo{float: right;margin-right: 10px;}
.userinfo a{color:#ffffff;}
.menu{width: 200px;background:#333744;position:absolute;}
.main{position: absolute;left:200px;right:0px;}
.layui-collapse{border: none;}
.layui-colla-item{border-top:none;}
.layui-colla-title{background:#42485b;color:#ffffff;}
.layui-colla-content{border-top:none;padding:0px;}
.content span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
.content div{border-bottom: solid 2px #009688;margin-top: 8px;}
.content button{float: right;margin-top: -5px;}
</style>
</head>
<body>
<div>
<span><span style="font-size: 20px;">XXX</span>--后臺(tái)管理系統(tǒng)</span>
<span>【歐陽(yáng)克】<span><a href="javascript:;">退出</a></span></span>
</div>
<div id="menu">
<div lay-accordion>
<div>
<h2>商城管理</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
</ul>
</div>
</div>
<div>
<h2>商城管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
</ul>
</div>
</div>
<div>
<h2>商城管理</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
<li><a href="list.html">商品列表</a></li>
</ul>
</div>
</div>
</div>
</div>
<div style="padding:10px;">
<div>
<span>商品列表</span>
<div></div>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>商品標(biāo)題</th>
<th>分類(lèi)</th>
<th>價(jià)格</th>
<th>狀態(tài)</th>
<th>添加時(shí)間</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>熙世界2019秋冬新款長(zhǎng)袖杏色上衣連帽寬松刺繡文藝落肩袖加厚衛(wèi)衣BF風(fēng)</td>
<td>女裝</td>
<td>189</td>
<td>開(kāi)啟</td>
<td>2019-12-12</td>
</tr>
<tr>
<td>2</td>
<td>秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女</td>
<td>女裝</td>
<td>699</td>
<td>開(kāi)啟</td>
<td>2019-12-12</td>
</tr>
<tr>
<td>3</td>
<td>秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女</td>
<td>女裝</td>
<td>699</td>
<td>開(kāi)啟</td>
<td>2019-12-12</td>
</tr>
<tr>
<td>4</td>
<td>秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女</td>
<td>女裝</td>
<td>699</td>
<td>開(kāi)啟</td>
<td>2019-12-12</td>
</tr>
<tr>
<td>5</td>
<td>秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女</td>
<td>女裝</td>
<td>699</td>
<td>關(guān)閉</td>
<td>2019-12-12</td>
</tr>
<tr>
<td>6</td>
<td>秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女</td>
<td>女裝</td>
<td>699</td>
<td>開(kāi)啟</td>
<td>2019-12-12</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
layui.use(['element','layer','laypage'], function(){
var element = layui.element;
var laypage = layui.laypage;
$ = layui.jquery;
layer = layui.layer;
resetMenuHeight();
});
// 重新設(shè)置菜單容器高度
function resetMenuHeight(){
var height = document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
</script>
controller代碼，此數(shù)據(jù)為測(cè)試數(shù)據(jù)，后面會(huì)從數(shù)據(jù)庫(kù)中讀取
namespace app\controller;
use think\facade\View;
class Index{
public function index(){
$title = '商城';
$login = '歐陽(yáng)克';
$left = [
[
'title' => '商品管理',
'lists' => [
[
'id' => 1,
'title' => '商品列表',
],
[
'id' => 2,
'title' => '商品分類(lèi)',
]
]
],
[
'title' => '用戶管理',
'lists' => [
[
'id' => 3,
'title' => '用戶列表',
],
[
'id' => 4,
'title' => '購(gòu)物車(chē)',
],
[
'id' => 5,
'title' => '用戶地址',
],
[
'id' => 6,
'title' => '訂單管理',
]
]
],
[
'title' => '后臺(tái)管理',
'lists' => [
[
'id' => 7,
'title' => '管理員列表',
],
[
'id' => 8,
'title' => '個(gè)人中心',
],
[
'id' => 9,
'title' => '左側(cè)菜單列',
]
]
]
];
$right = [
[
'id' => 1,
'title' => '熙世界2019秋冬新款長(zhǎng)袖杏色上衣連帽寬松刺繡文藝落肩袖加厚衛(wèi)衣BF風(fēng)',
'cat' => '女裝',
'price' => 189,
'discount' => 6,
'status' => 1,
// 'status' => '開(kāi)啟',
'add_time' => '2019-12-12',
// 'add_time' => '1576080000'
],
[
'id' => 2,
'title' => '秋水伊人雙面呢冬裝2019年新款女裝氣質(zhì)西裝領(lǐng)撞色羊毛大衣外套女',
'cat' => '女裝',
'price' => 699,
'discount' => 7,
'status' => 1,
// 'status' => '開(kāi)啟',
'add_time' => '2019-12-12',
// 'add_time' => '1576080000'
],
[
'id' => 3,
'title' => '微彈中高腰直腳牛仔褲男',
'cat' => '男裝',
'price' => 179,
'discount' => 8,
'status' => 2,
// 'status' => '關(guān)閉',
'add_time' => '2019-12-12',
// 'add_time' => '1576080000'
],
[
'id' => 1,
'title' => '男士長(zhǎng)袖t恤秋季圓領(lǐng)黑白體恤T 純色上衣服打底衫',
'cat' => '男裝',
'price' => 99,
'discount' => 9,
'status' => 1,
// 'status' => '開(kāi)啟',
'add_time' => '2019-12-12',
// 'add_time' => '1576080000'
],
];
View::assign([
'title' => $title,
'login' => $login,
'left' => $left,
'right' => $right
]);
return View::fetch();
}
}
view代碼，控制器數(shù)據(jù)在視圖中使用
<!DOCTYPE html>
<html>
<head>
<title>{$title}--后臺(tái)管理系統(tǒng)</title>
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<script type="text/javascript" src="/static/layui/layui.js"></script>
<style type="text/css">
.header{width:100%;height: 50px;line-height: 50px;background: #2e6da4;color:#ffffff;}
.title{margin-left: 20px;font-size: 20px;}
.userinfo{float: right;margin-right: 10px;}
.userinfo a{color:#ffffff;}
.menu{width: 200px;background:#333744;position:absolute;}
.main{position: absolute;left:200px;right:0px;}
.layui-collapse{border: none;}
.layui-colla-item{border-top:none;}
.layui-colla-title{background:#42485b;color:#ffffff;}
.layui-colla-content{border-top:none;padding:0px;}
.content span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
.content div{border-bottom: solid 2px #009688;margin-top: 8px;}
.content button{float: right;margin-top: -5px;}
</style>
</head>
<body>
<div>
<span><span style="font-size: 20px;">{$title}</span>--后臺(tái)管理系統(tǒng)</span>
<span>【{$login}】<span><a href="javascript:;">退出</a></span></span>
</div>
<div id="menu">
<div lay-accordion>
<div>
<h2>{$left.0.title}</h2>
<div class="layui-colla-content layui-show">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="index.html">{$left.0.lists.0.title}</a></li>
<li><a href="index.html">{$left.0.lists.1.title}</a></li>
</ul>
</div>
</div>
<div>
<h2>{$left[1]['title']}</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="index.html">{$left.1.lists.0.title}</a></li>
<li><a href="index.html">{$left.1.lists.1.title}</a></li>
<li><a href="index.html">{$left.1.lists.2.title}</a></li>
<li><a href="index.html">{$left.1.lists.3.title}</a></li>
</ul>
</div>
</div>
<div>
<h2>{$left.2.title}</h2>
<div>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li><a href="index.html">{$left.2.lists.0.title}</a></li>
<li><a href="index.html">{$left.2.lists.1.title}</a></li>
<li><a href="index.html">{$left.2.lists.2.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
<div style="padding:10px;">
<div>
<span>商品列表</span>
<div></div>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>商品標(biāo)題</th>
<th>分類(lèi)</th>
<th>價(jià)格</th>
<th>折扣</th>
<th>狀態(tài)</th>
<th>添加時(shí)間</th>
</tr>
</thead>
<tbody>
<tr>
<td>{$right.0.id}</td>
<td>{$right.0.title}</td>
<td>{$right.0.cat}</td>
<td>{$right.0.price}</td>
<td>{$right.0.discount}</td>
<td>{$right.0.status}</td>
<td>{$right.0.add_time}</td>
</tr>
<tr>
<td>{$right.1.id}</td>
<td>{$right.1.title}</td>
<td>{$right.1.cat}</td>
<td>{$right.1.price}</td>
<td>{$right.1.status}</td>
<td>{$right.0.discount}</td>
<td>{$right.1.add_time}</td>
</tr>
<tr>
<td>{$right.2.id}</td>
<td>{$right.2.title}</td>
<td>{$right.2.cat}</td>
<td>{$right.2.price}</td>
<td>{$right.2.status}</td>
<td>{$right.0.discount}</td>
<td>{$right.2.add_time}</td>
</tr>
<tr>
<td>{$right.3.id}</td>
<td>{$right.3.title}</td>
<td>{$right.3.cat}</td>
<td>{$right.3.price}</td>
<td>{$right.3.status}</td>
<td>{$right.0.discount}</td>
<td>{$right.3.add_time}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
layui.use(['element','layer','laypage'], function(){
var element = layui.element;
var laypage = layui.laypage;
$ = layui.jquery;
layer = layui.layer;
resetMenuHeight();
});
// 重新設(shè)置菜單容器高度
function resetMenuHeight(){
var height = document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
</script>