[processus d'apprentissage thinkphp6] commencer

News 2023-07-16 12:29:35 views: null

Annuaire d'articles

Démarrage de ThinkPHP6

  • ThinkPHP prend en charge le développement d'applications du modèle traditionnel MVC (Model-View-Controller) et du modèle populaire MVVM (Model-View-ViewModel)

1. CVM

  • MVCUn système logiciel est divisé en trois parties de base : modèle (Model), vue (View) et contrôleur (Controller)
  • ThinkPHPest une MVCarchitecture typique

Contrôleur - responsable de la transmission des demandes et de leur traitement. Vue - les concepteurs d'interface réalisent la conception de l'interface graphique. Les modélisateurs-
programmeurs écrivent les fonctions que le programme doit avoir (implémenter des algorithmes, etc.), les experts en bases de données effectuent la gestion des données et la conception des bases de données (peuvent réaliser des fonctions spécifiques).

insérez la description de l'image ici

2. Accès au mode application unique

  • Chemin d'accès au projet : www.xxx.com/index.php/index/index

fichier d'entrée index.php opération d'
index du contrôleur d'index

├─app           应用目录
│  ├─controller      控制器目录
│  ├─model           模型目录
│  ├─view            视图目录
│  ├─ ...            更多类库目录
│  │
│  ├─BaseController.php    默认基础控制器类
│  ├─ExceptionHandle.php   应用异常定义文件
│  ├─common.php            全局公共函数文件
│  ├─middleware.php        全局中间件定义文件
│  ├─provider.php          服务提供定义文件
│  ├─Request.php           应用请求对象
│  └─event.php             全局事件定义文件
│
├─config                配置目录
│  ├─app.php            应用配置
│  ├─cache.php          缓存配置
│  ├─console.php        控制台配置
│  ├─cookie.php         Cookie配置
│  ├─database.php       数据库配置
│  ├─filesystem.php     文件磁盘配置
│  ├─lang.php           多语言配置
│  ├─log.php            日志配置
│  ├─middleware.php     中间件配置
│  ├─route.php          URL和路由配置
│  ├─session.php        Session配置
│  ├─trace.php          Trace配置
│  └─view.php           视图配置
│
├─view            视图目录
├─route                 路由定义目录
│  ├─route.php          路由定义文件
│  └─ ...
│
├─public                WEB目录（对外访问目录）
│  ├─index.php          入口文件
│  ├─router.php         快速测试文件
│  └─.htaccess          用于apache的重写
│
├─extend                扩展类库目录
├─runtime               应用的运行时目录（可写，可定制）
├─vendor                Composer类库目录
├─.example.env          环境变量示例文件
├─composer.json         composer 定义文件
├─LICENSE.txt           授权说明文件
├─README.md             README 文件
├─think                 命令行入口文件

3. Vue d'installation

  • La fonction d'affichage est complétée par la classe \think\View avec la classe de pilote d'affichage. La nouvelle version ne dispose que d'un moteur de modèle natif PHP intégré (principalement utilisé pour la sortie de page anormale intégrée). Si vous avez besoin d'utiliser d'autres moteurs de modèles, vous devez installer l'extension de moteur de modèles correspondante séparément
  • ThinkPHP6 a créé indépendamment un ensemble de modèles, nommé : ThinkTemplate template engine
  • Pour utiliser le moteur de modèles think-template, think-view doit être installé
composer require topthink/think-view
  • Le répertoire d'affichage peut se trouver 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 introduire la classe de façade think\facade\View
  • La méthode de récupération rend la page
    • Paramètre : le chemin de la page statique, la page statique correspondante par défaut

code du contrôleur

<?php
namespace app\controller;
use think\facade\View;
class Index{
    
    
    public function index(){
    
    
        return View::fetch();
    }
}

afficher le code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Thinkphp6</title>
    </head>
    <body>
        <div style="color:red;">红色欧阳克</div>
    </body>
</html>
  • Préparation : La classe Index correspond au répertoire sous la vue
  • Remarque : La méthode index correspond aux fichiers statiques du répertoire sous la vue

5. Variables de modèle

  • assignL'affectation de méthode appartient à l'affectation de variable globale
  • sortie du modèle{$name}

code du contrôleur

namespace app\controller;
use think\facade\View;
class Index{
    public function index(){
        // 1、模板变量赋值
        View::assign('name','欧阳克');
        View::assign('email','[email protected]');
        // 2、批量赋值
        View::assign([
            'name'  => '欧阳克',
            'email' => '[email protected]'
        ]);
        // 模板输出
        return View::fetch();
    }
}

afficher le code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>ThinkPHP6</title>
    </head>
    <body>
        姓名：{$name}
        <br />
        邮箱：{$email}
    </body>
</html>

6. Entrée

  • publicLe répertoire est le seul répertoire accessible sur le Web
  • Mettre les fichiers de ressources public/staticdans
  • fichier d'entrée, la valeur par défaut estindex.php
    insérez la description de l'image ici

7. Exemple

  • mettre htmlla page ThinkPHPdans le cadre
  • Cette page est un fichier statique
<!DOCTYPE html>
<html>
    <head>
        <title>列表页</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 class="header">
            <span class="title"><span style="font-size: 20px;">XXX</span>--后台管理系统</span>
            <span class="userinfo">【欧阳克】<span><a href="javascript:;">退出</a></span></span>
        </div>
        <div class="menu" id="menu">
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">商城管理</h2>
                    <div class="layui-colla-content layui-show">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">商城管理</h2>
                    <div class="layui-colla-content">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        </ul>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">商城管理</h2>
                    <div class="layui-colla-content">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        <li class="layui-nav-item"><a href="list.html">商品列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="main" style="padding:10px;">
            <div class="content">
                <span>商品列表</span>
                <div></div>
            </div>
            <table class="layui-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>商品标题</th>
                    <th>分类</th>
                    <th>价格</th>
                    <th>状态</th>
                    <th>添加时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>
                    熙世界2019秋冬新款长袖杏色上衣连帽宽松刺绣文艺落肩袖加厚卫衣BF风
                    </td>
                    <td>女装</td>
                    <td>189</td>
                    <td>开启</td>
                    <td>2019-12-12</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>
                    秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女
                    </td>
                    <td>女装</td>
                    <td>699</td>
                    <td>开启</td>
                    <td>2019-12-12</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>
                    秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女
                    </td>
                    <td>女装</td>
                    <td>699</td>
                    <td>开启</td>
                    <td>2019-12-12</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>
                    秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女
                    </td>
                    <td>女装</td>
                    <td>699</td>
                    <td>开启</td>
                    <td>2019-12-12</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>
                    秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女
                    </td>
                    <td>女装</td>
                    <td>699</td>
                    <td>关闭</td>
                    <td>2019-12-12</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>
                    秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女
                    </td>
                    <td>女装</td>
                    <td>699</td>
                    <td>开启</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();
  });
  // 重新设置菜单容器高度
  function resetMenuHeight() {
      
      
    var height = document.documentElement.clientHeight - 50;
    $("#menu").height(height);
  }
</script>
  • controllerCode, ces données sont des données de test, qui seront lues ultérieurement à partir de la base de données
namespace app\controller;
use think\facade\View;
class Index{
    
    
    public function index(){
    
    
        $title = '商城';
        $login = '欧阳克';
        $left = [
            [
                'title' => '商品管理',
                'lists' => [
                    [
                        'id' => 1,
                        'title' => '商品列表',
                    ],
                    [
                        'id' => 2,
                        'title' => '商品分类',
                    ]
                ]
            ],
            [
                'title' => '用户管理',
                'lists' => [
                    [
                        'id' => 3,
                        'title' => '用户列表',
                    ],
                    [
                        'id' => 4,
                        'title' => '购物车',
                    ],
                    [
                        'id' => 5,
                        'title' => '用户地址',
                    ],
                    [
                        'id' => 6,
                        'title' => '订单管理',
                    ]
                ]
            ],
            [
                'title' => '后台管理',
                'lists' => [
                    [
                        'id' => 7,
                        'title' => '管理员列表',
                    ],
                    [
                        'id' => 8,
                        'title' => '个人中心',
                    ],
                    [
                        'id' => 9,
                        'title' => '左侧菜单列',
                    ]
                ]
            ]
        ];
        $right = [
            [
                'id' => 1,
                'title' => '熙世界2019秋冬新款长袖杏色上衣连帽宽松刺绣文艺落肩袖加厚卫衣BF风',
                'cat' => '女装',
                'price' => 189,
                'discount' => 6,
                // 'status' => 1,
                'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 2,
                'title' => '秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女',
                'cat' => '女装',
                'price' => 699,
                'discount' => 7,
                // 'status' => 1,
                'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 3,
                'title' => '微弹中高腰直脚牛仔裤男',
                'cat' => '男装',
                'price' => 179,
                'discount' => 8,
                // 'status' => 2,
                'status' => '关闭',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
            [
                'id' => 1,
                'title' => '男士长袖t恤秋季圆领黑白体恤T 纯色上衣服打底衫',
                'cat' => '男装',
                'price' => 99,
                'discount' => 9,
                // 'status' => 1,
                'status' => '开启',
                'add_time' => '2019-12-12',
                // 'add_time' => '1576080000'
            ],
        ];
        View::assign([
            'title'  => $title,
            'login' => $login,
            'left' => $left,
            'right' => $right
        ]);
        return View::fetch();
    }
}

afficher le code, les données du contrôleur sont utilisées dans la vue

<!DOCTYPE html>
<html>
    <head>
        <title>{$title}--后台管理系统</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 class="header">
            <span class="title"><span style="font-size: 20px;">{$title}</span>--后台管理系统</span>
            <span class="userinfo">【{$login}】<span><a href="javascript:;">退出</a></span></span>
        </div>
        <div class="menu" id="menu">
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{$left.0.title}</h2>
                    <div class="layui-colla-content layui-show">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.0.lists.0.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.0.lists.1.title}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{$left[1]['title']}</h2>
                    <div class="layui-colla-content">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.1.lists.0.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.1.lists.1.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.1.lists.2.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.1.lists.3.title}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{$left.2.title}</h2>
                    <div class="layui-colla-content">
                        <ul class="layui-nav layui-nav-tree" lay-filter="test">
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.2.lists.0.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.2.lists.1.title}</a>
                            </li>
                            <li class="layui-nav-item">
                                <a href="index.html">{$left.2.lists.2.title}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="main" style="padding:10px;">
            <div class="content">
                <span>商品列表</span>
                <div></div>
            </div>
            <table class="layui-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}</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>

Je suppose que tu aimes

Origine blog.csdn.net/qzmlyshao/article/details/130971890
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com