Premiers pas : modèle MVC
ThinkPHP6 Getting Started
ThinkPHP prend en charge le développement d'applications du mode MVC traditionnel (
Model-View-Controller
) et du populaire MVVM (Model-View-ViewModel
) modeModel-View-Controller
)模式以及流行的MVVM(Model-View-ViewModel
)模式的应用开发
一、MVC
MVC 软件系统分为三个基本部分:模型(
Model
)、视图(View
)和控制器(Controller
- 1. MVC
Modèle
), la vue (View
) et le contrôleur ( Contrôleur
)ThinkPHP est une architecture MVC typique
Contrôleur - responsable du transfert et du traitement des demandes.
View - Conception d'interface graphique par des concepteurs d'interfaces. Modèle - Les programmeurs écrivent les fonctions qu'un programme devrait avoir (implémentation d'algorithmes, etc.), les experts en bases de données effectuent la gestion des données et la conception de bases de données (peuvent réaliser des fonctions spécifiques).ThinkPHP6 dispose d'un ensemble indépendant de modèles, nommé : Moteur de modèle ThinkTemplate Utilisez le moteur de modèle think-template, vous devez installer think-view ;fichier d'entrée index.php
contrôleur d'index
Opération index
├─application Table des matières . │ ││ ├─common.php Fichier de fonction publique │ └─event.php Fichier de définition d'événement │├─config Répertoire de configuration │ ├ ─app.php Configuration de l'application │ ├─cache.php Configuration du cache│ ├─ console.php Configuration de la console│ ├─cookie.php Configuration des cookies│ ├─database.php Configuration de la base de données│ ├ ─filesystem.php Configuration du disque de fichiers│ ├─lang. php Configuration multilingue │ ├─log.php │ Configuration du journal│ ├─middleware.php Configuration du middleware│ ├─route.php URL et configuration de routage│ ├─session.php Configuration de session │ ├─trace.php Configuration de trace │ └─view.php Voir la configuration │├─view Voir le répertoire ├─route Répertoire de définition de route 🎜│ ├─route.php Fichier de définition de route
│ └─ ...
│
├─fichier d'entrée publique
│ ├─fichier de test rapide php
│ └─.htaccess Utilisé pour Apache re. écrire
│
├─étendre le répertoire de la bibliothèque de classes étendue
├─runtime Répertoire d'exécution de l'application (inscriptible, personnalisable)
├─ fournisseur Répertoire de la bibliothèque de classes Composer
├─.example.env Exemple de fichier de variable d'environnement
├─ composer.json fichier de définition du compositeur
├─LICENSE.txt Fichier de description de l'autorisation
├─fichier README.md README
├─ penser ly utilisé pour la sortie de page d'exception intégrée), si vous devez utiliser un autre modèle moteurs, vous devez installer l'extension de moteur de modèle correspondante séparément.
- composer nécessite topthink/think-view
thinkView类
配合视图驱动(也即模板引擎驱动)类一起完成,新版仅内置了PHP原生模板引擎(主要用于内置的异常页面输出),如果需要使用其它的模板引擎需要单独安装相应的模板引擎扩展
ThinkPHP6已独立出一套模版,命名为:ThinkTemplate模板引擎;
使用think-template模板引擎,需安装think-view;
composer require topthink/think-view
视图目录可以在根目录,也可以在app应用目录
四、模版渲染
要使用View,必须先引入
thinkfacadeView
Le répertoire de vue peut être dans le répertoire racine ou dans le répertoire d'application de l'application- 4. Rendu du modèle
Pour utiliser View, vous devez d'abord introduisez la classe de façade thinkfacadeView
méthode fetch pour restituer la pageParamètres : le chemin de la page statique, la page statique correspondante par défautcode du contrôleurclass Index{ Public function index(){ } return View::fetch(); }}
<? php
namespace appcontroller;
utilisez thinkfacadeView;
afficher le code
Remarque : La classe Index correspond au répertoire sous la vueRemarque : La méthode d'indexation correspond aux fichiers statiques dans le répertoire sous la vue
5 Variables de modèle
l'affectation de la méthode d'affectation appartient à l'affectation des variables globales. Sortie du modèle { $name}code du contrôleur🎜namespace appcontroller;🎜🎜use thinkfacadeView;🎜🎜class Index{🎜🎜 public function index(){🎜🎜 // affectation de variable de modèle🎜View::assign('name','Ouyang Ke');
View::assign('email','oyk@php.cn'); [
'name' = & gt; ,
'email' = & gt;'oyk@php.cn'
]);
}
}
afficher le code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> ;
<title>ThinkPHP6</title></head><body> Nom : {$name} <br> Email : {$email}</body&g t;Placez les fichiers de ressources dans</html>
6. Entrée
L'annuaire public est le seul annuaire accessible par le web
Le fichier d'entrée, la valeur par défaut est index.php
public/static
7. Exemple - Mettez la page html dans le framework ThinkPHP
Cette page est un fichier statique
<!DOCTYPE html>
<html> <head>
<title>Page de liste</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: absolue;left:200px;right:0px; }.layui-collapse{border: none;}
.layui-colla-item{border -top:aucun;}
.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 bouton{float : right;margin-top : -5px;}
</style>
< /head>
<body>
<div>
<span><span style="font-size: 20px;">XXX</span>--后台管理系统</span > ;
<span>
<div id="menu">
<div laïc-accordéon>
<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 ">>
<li> ; & lt; a href = "list.html" & gt; 商品 列表 & lt; / a & gt; & lt; / li & gt;
& lt; li & gt; & lt; a href = "list.html" & gt; 商品 列表 & lt; / a & gt; </li>
</ul>
</div>
</div>
<ul class="layui-nav layui-nav-tree" test" > ="list.html"> Liste des produits</a></li>
<li> ;< a href="list.html">Liste de produits</a></li>
div>
="test"> <a href="list.html"> ;Liste de produits</a></li> ;/li> a href="list.html" >Liste de produits</a></li> ;
</div>
</div>
<div style="padding:10px;">
<div>
<span&g t;商品列表</span>
<div></div>
</div>
th> </th>
<th>Ajouter une heure</th>
lt;/td> Sweat-shirt épais à manches tombantes style BF ~ <td>2019-12-12< /td> d>2</td> Les nouvelles couleurs de col de costume de tempérament pour femmes du manteau en laine coloré & lt;/td & gt; & lt; vêtements pour femmes & lt;/TD & gt; ; & lt; td & gt; 699 & lt;/td & lt;
Le nouveau tempérament féminin du nouveau costume pour femme, le manteau en laine contrasté & lt;/td & gt; & lt; vêtements pour femmes & lt;/TD & gt; gt; 699 & lt;/td & lt; td & gt; ouvert & lt;/ td> > Vêtements d'hiver 2019, nouveau style, col de costume pour femmes, manteau en laine de couleur contrastée pour femmes td> </td> ; ;tr> Qiushui Yiren vêtements d'hiver en laine double face 2019 nouveau style col de costume pour femmes manteau en laine contrasté pour femmes 99</td> td>Fermer</td>
Le nouveau tempérament féminin du nouveau costume pour femme, le manteau en laine contrasté & lt;/td & gt; & lt; vêtements pour femmes & lt;/TD & gt; gt; 699 & lt;/td & lt; td & gt; ouvert & lt;/ td> :;
</body>
</html>
<script>
layui.use(['element','layer','laypage'], function(){
var element = layui.element;
var laypage = layui.laypage;
$ = layui.jquery;
layer = layui.layer;
//Réinitialiser la hauteur du conteneur du menufunction resetMenuHeight(){ var hauteur = document. documentElement.clientHeight - 50; $('#menu').height(height); }</script>
code du contrôleur, ces données sont des données de test et seront lues à partir de la base de données ultérieurement
contrôleur d'application d'espace de noms;
utilisez thinkfacadeView;
index de classe{ public function index(){ = 'Ouyang Ke'; ; 'id' => 2, 'titre' =>Liste des utilisateurs',
'titre' => 'Panier',
'titre ' => 'Adresse de l'utilisateur', 'title' => 'Gestion des commandes',
'id' => , 'titre' = > 'Centre personnel', 'titre' 'titre' => 'Barre de menu de gauche',
'Titre' => Automne et hiver nouveau haut abricot à manches longues à capuche ample brodé Art manches tombantes sweat-shirt épais style BF', 'cat' => 'Vêtements pour femmes',
'price' => 189,
'remise' => 6,
'statut' => 1 ,
6080000'
],
[
'ID' = & gt; 2,
'titre' = & gt; 'Qiushui Yiren double face en laine hiver 2019 nouveau costume de tempérament pour femme veste extérieure en laine contrastée collaborative',
'chat' = & gt; ' => -12 -12',
'Micro-jean taille haute à pieds droits pour hommes'
'chat' = & gt; 'vêtements pour hommes',
'prix' = & gt; 179,
'remise' = & gt; 8,
'statut' = >
00'
'ID' = & gt 1,
'titre' = & gt; 'T-shirt à manches longues pour hommes en col d'automne chemises noires et blanches t-shirt pur bas de chemise',
'chat ' = & gt; 'vêtements pour hommes',
’ ’ ’ ’ s ’ ’ ’ // 'statut' => 'Ouvert',
'add_time' => 19-12- 12',
'Connexion' = & gt; $ connexion,
'gauche' = & gt; $ gauche,
'droite' = & gt;
}view code, les données du contrôleur sont utilisées dans la vue.
<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: absolue;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 : aucun;padding:0px;}
.content span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}
.content div{border-bottom: solid 2px # 009688;margin-top : 8px;}
.content bouton{float : right;margin-top : -5px;}
</style>
</head>
<body>
< ;div>
<span><span style="font-size: 20px;">{$title}</span>--后台管理系统</span>
<span>【 {$login}】<span><a href="javascript:;">退出</a></span></span>
</div>
<identifiant de div ="menu">
<div lay-accordéon>
<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>;
<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&g t;商品列表</span>
<div></div>
</div>
<table>
<thead>
<tr>
<th>ID</ th>
<th>商品标题</th>
<th>分类</th>
<th>价格</th>
<th>折扣</th>
<th>状态</th>
<th>添加时间< ;/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}& C'est ;/ 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();
});
// 重新设置菜单容器高度
function resetMenuHeight(){
var height = document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
</script>