はじめに: MVC パターン


ThinkPHP6 入門

  • ThinkPHP は、従来の MVC (Model-View-Controller) モードと一般的な MVVM (Model-View-ViewModel) をサポートしています。 ) パターン アプリケーション開発

1. MVC

  • MVC ソフトウェア システムは 3 つの基本部分に分かれています: モデル (Model) )、ビュー (View)、およびコントローラー (Controller)

  • ThinkPHP は典型的な MVC アーキテクチャです

コントローラー - リクエストの転送と処理を担当します。

表示 - インターフェイス デザイナーは、グラフィカル インターフェイスを設計します。

モデル - プログラマーはプログラムが持つべき機能（アルゴリズムの実装など）を書き、データベースの専門家はデータ管理とデータベースの設計を行います（特定の機能を実現できます）。

mvc.gif

#2. シングル アプリケーション モード アクセス

  • プロジェクト アクセス パス: www.xxx.com/index.php/ Index/index

index.php エントリ ファイル

index コントローラ

index 操作

----------------------------app アプリケーション カタログ

│ §─controller コントローラー カタログ

│ §─model モデル カタログ

│ §─ ... その他のクラス ライブラリ ディレクトリ

│ │

│ §─common.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 セッション構成

│ §─trace.php トレース構成

│ └─view.php ビュー構成

│

§─ view ビューディレクトリ

─route ルート定義ディレクトリ

│ §─route.php ルート定義ファイル

│ lux─...

│

─公開WEBディレクトリ（外部アクセスディレクトリ）

│ §─index.php │ エントリファイル

│ §─router.php クイックテストファイル

│ └─.htaccess apache 用書き換え

│

├├·ックスエクスンド '' s '' '' '' '' '' '' '' '' '' '' '' n -m t、to

エントリーファイル

3. インストールビュー

ビュー機能は

\think \Viewクラス

によって提供され、ビューとともに完成します。ドライバー (つまり、テンプレート エンジン ドライバー) クラス。新しいバージョンには、組み込みの PHP ネイティブ テンプレート エンジン (主に組み込みの例外ページ出力に使用されます) のみが含まれています。他のテンプレート エンジンを使用する必要がある場合は、個別にインストールする必要がありますテンプレート エンジン拡張機能

ThinkPHP6 には、ThinkTemplate テンプレート エンジンという名前の独立したテンプレート セットがあります。

think-template テンプレート エンジンを使用するには、think をインストールする必要があります。 -view;

    composer require topthink/think-view

  • ビュー ディレクトリはルート ディレクトリまたはアプリ アプリケーション ディレクトリにあります

4. テンプレートのレンダリング

View を使用するには、まず
think\facade\View
    ファサードを導入する必要がありますclass


  • fetch メソッドはページをレンダリングします

パラメータ: 静的ページのパス、デフォルトの対応する静的ページ
  • コントローラ コード

    <?php

    • namespace app\controller;

  • use think\facade\View;

    • class Index{

public functionindex() {

return View::fetch(); ビュー配下のディレクトリに対応

注: インデックスメソッドは、ディレクトリ内の静的ファイルに対応します。ビューの下

#5. テンプレート変数

割り当てメソッドはグローバル変数割り当てに属します

テンプレート出力{$name }

コントローラー コード

名前空間 app\controller;

use think\facade\View;

class Index {

public functionindex(){

// テンプレート変数の割り当て

    View::assign('name','欧陽柯');

    View::assign('email','oyk@php.cn');

    //またはバッチ割り当て

    View :: assign ([

    'name' = & gt; 'Ouyangke',

    'email' = & gt;'oyk@php. cn '

    ]);

    // テンプレート出力

    return View::fetch();

    }

    }

    ビューコード

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>ThinkPHP6</title>

    </head>

    <body>

    名前: {$name}

    <br>

    メール: {$email}

    </body>

    < ;/html>

    6. 入口

    • パブリック ディレクトリは、Web からアクセスできる唯一のディレクトリです

    • リソース ファイルは public/static

    • エントリ ファイルに配置されます。デフォルトは、index.php

    12870f3d5e20e2e356baf864a59c6ee.png です。

    7. 例

    • HTML ページを ThinkPHP フレームワークに挿入します

    • このページは静的ファイルです

    <!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 % ;高さ: 50px;行の高さ: 50px;背景: #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 : 絶対;}

    .main{位置: 絶対;左:200px;右:0px;}


    # .layui-collapse{ボーダー: なし;}

    .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>--后台管理系统</span>

    <span> ;【欧阳克】<span><a href="javascript:;">退出</a></span></span>

    </div>

    <div id="menu">

    <divlay-accordion>

    <div>

    <h2>商城管理< ;/h2>

    <div class="layui-colla-contentlayui-show">

    <ul class="layui-navlayui-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>

    lt; lay-filter="テスト">

    li> ="list.html"> 商品リスト< /a＆gt;＆lt;/li＆gt;

    ;/li＆gt;

    ＃

    test "＆gt;

    ＆lt; li＆gt;＆lt; a a a a href =" list.html "& gt; 商品リスト & lt;/a & gt;/li & gt;

    & lt; & lt; & lt; a href="list.html">製品リスト＆lt;/a＆gt;＆lt;/li＆gt;

    ;＆lt;/li＆gt;

    ;

    ##;

    </div>

    </div>

    <div style="padding:10px;">

    < div>

    <span>商品列表</span>

    <div></div>

    </div>

    # & lt; 表 & gt;

    & lt; 表 & gt;

    ## & LT TR & GT

    # #

    <td>Xi World 2019 Autumnと冬の新しいスタイル長袖アプリコットトップフード付きルーズ刺繍文学ドロップスリーブ厚手のスウェットシャツBFスタイル</td>

    ;/td>

    #＆lt;/tr＆gt;

    # dressup the気質スーツの襟をコントラストするウールの女性のコート＆/td＆gt;

    #＆lt; td＆gt; open＆lt;/td＆gt;

    td＆gt;

    #>着用するために細い服を着ていた。;

    GT; 2019-12-12＆lt;/td＆gt; ;Qiushui Yiren 両面冬 2019 新作女性の気質スーツネックカラーウールコート外 & 女性 & lt;/td & gt;

    # & lt; td & gt & lt & lt & lt;

    & lt; TD & LT;/TD & GT. ;

    /tr>

    レディースコントラストカラーウールコート</td>

    < td>閉じる

    td＆gt;

    #>着用するために細い服を着ていた。

    GT; 2019-12-12＆lt;;

    </body>

    </html>

    <script>

    layui.use(['要素','レイヤー','laypage'], function(){

    var element =layui.element;

    varlaypage =layui.laypage;

    $ =layui.jquery;

    layer =layui.layer;

    resetMenuHeight();

    });

    // メニューコンテナの高さをリセット

    function replaceMenuHeight (){

    var height = document.documentElement.clientHeight - 50;

    $('#menu').height(height);

    }

    </script>

    コントローラー コード、このデータはテスト データであり、後でデータベースから読み取られます

    namespace app\controller;

    think\facade\View を使用;

    クラス インデックス{

    パブリック関数インデックス(){

    $title = 'Mall';

    $ login = 'ouyang ke'; '=>]、

    ]

    ”

    # [

    ' id '=＆gt; 3、

    ## 'タイトル' = & GT; 'ユーザーリスト',

    to gt; 'Shopping Cart'、

    、

    ]、

    [

    'id' =＆ GT; 6,

    ## 'タイトル' = & GT;

    ##],

    [

    'タイトル' = & GT; 'バックステージマネジメント',

    ## 'リスト' = & GT [

    'id' = & gt; 7,

    'タイトル' = & gt;

    ## 'ID' = & gt; 8,

    'タイトル' = & GT; 'ID' = & gt; 9,

    'タイトル' = & gt; '左メニュー列',

    ##]

    #/

    ] title' => 'Xi World 2019秋冬新作長袖アプリコットトップフード付きルーズ刺繍アートドロップショルダースリーブ厚みのあるスウェットシャツBFスタイル',

    'cat' => '婦人服',

    '価格' => 189,

    を通じてスルーアウト スルーアウト スルースルー オフ ‐ スルー ‐ ‐‐ ‐‐‐ そしてto => '開く',

    'add_time' => '2019-12-12',

    // 'add_time' => '1576080000'

    ]

    # [

    'ID' = & GT; 2,

    ## 'Title' = & GT; ウール コート アウター ジャケット 女性 ',

    'cat' =＆gt; '女性服'、

    '価格' =＆gt

    to '、

    ##' title '=＆gt ; 'マイクロ バウンシング ミディアム ハイウエスト ストレート フット ジーンズ',

    '猫' = & GT; 179;

    1576080000 '

    #ラウンドネックブラックアンドホワイトTシャツTシャツSolid Color Tops and Bottoming Shirts'、

    'cat' =＆gt; 'Men's Clothing'、

    「価格」 => 99,

    「割引」 => 9,

    using using use using through '''''' out's' out out'ss out outps Out Out Out Out Out's Out's Out's Out's 'Out's' out's out's 'out's' '' out '' '' '' '' '' ';' 2019-12-12 '、

    ;

    ## 'Right' = & GT; $ right

    ];

    Return view :: fetch ();

    ##}

    ## }

    ビュー コード、コントローラ データはビューで使用されます

    <!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{幅: 200px;背景:#333744;位置:絶対;}

    .main{位置: 絶対;左:200px;右:0px;}


    # .layui-collapse{border: none;}

    .layui-colla-item{border-top:none;}

    .layui-colla-title{背景:#42485b;色:#ffffff;}

    .layui-colla-content{border-top:none;padding:0px;}


    .content spa{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}

    .content div{border-bottom: 実線 2px #009688;margin-top: 8px; }

    .content button{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>

    </div>

    <div id="menu">

    <divlay-accordion>

    <div>

    <h2>{$left.0.title}</h2>

    <div class="layui-colla-contentlayui-show ">

    <ul class="layui-navlayui-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>

    <表>

    <thead>

    <tr>

    <th>ID</th>

    商品标题

    分类

    价格

    折扣

    状態

    追加時間g t;

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

    <t開発> ;{$right.1.title}</td>

    <td>{$right.1.cat}</td>

    <td>{$right .1.価格}</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.割引}</td>

    <td>{$right.3.add_time}</td>

    </tr>

    </ tbody>

    </table>

    </div>

    </body>

    </html>

    <script>

    layui.use(['要素','レイヤー','laypage'], function(){

    var element =layui.element;

    varlaypage =layui.laypage;

    $ =layui.jquery;

    layer =layui.layer;

    resetMenuHeight();

    });

    // 重新設置菜单容器の高さ

    function resetMenuHeight(){

    var height = document.documentElement.clientHeight - 50;

    $('#menu').height(height);

    }

    </script>