Getting Started: MVC Pattern

ThinkPHP6 Getting Started

• ThinkPHP supports the traditional MVC (Model-View-Controller) mode and the popular MVVM (Model-View-ViewModel) Pattern application development

1. MVC

• MVC software system is divided into three basic parts: Model (Model ), view (View) and controller (Controller)

• ThinkPHP is a typical MVC architecture

Controller - Responsible for forwarding requests and processing them.

View - Interface designers design graphical interfaces.

Model - Programmers write the functions that the program should have (implementing algorithms, etc.), and database experts perform data management and database design (can realize specific functions).

2. Single application mode access

• Project access path: www.xxx.com/index.php/ index/index

index.php Entry file

index Controller

index Operation

├─app Application Catalog

│ ├─controller  Controller Catalog

│ ├─model         Model Catalog

│ ├─ ...         More class library directories

│ │

│ ├─common.php │ Public function file

│ └─event.php Event definition file

│

├─config Configuration directory

│ ├─app.php       Application configuration

│ ├─cache.php         Cache configuration

│ ├─console.php        Console configuration

│ ├ ─cookie.php         Cookie configuration

│ ├─database.php       Database configuration

│ ├─filesystem.php      File disk configuration

│   ├─lang.php         Multi-language configuration

│ ├─log.php Log configuration

│ ├─middleware.php Middleware configuration

│ ├─route.php URL and routing configuration

│ ├─session.php Session configuration

│ ├─trace.php Trace configuration

│ └─view.php View configuration

│

├─view         View directory

├─route              Route definition directory

│ ├─route.php Route definition file

│ └─...

│

├─public WEB directory (external access directory)

│ ├─index.php │ Entry file

│ ├─router.php Quick test file

│ └─.htaccess Rewrite for apache

│

├─extend                                                                                                   ’ ’s ’ ’ s                   ’ ’ ’       ’ t - - n- m t ,                                                                                                     to  

├ ─.example.env Environment variables for example files

# ─Composer.json composer definition file

# ——License.txt authorization file

─ Readme .md README file

├─think Command line entry file

3. Installation view

The view function is provided by

\think \View class

is completed together with the view driver (that is, template engine driver) class. The new version only has built-in PHP native template engine (mainly used for built-in exception page output). If you need to use other template engines, you need to install them separately. The template engine extension

• ThinkPHP6 has an independent set of templates named: ThinkTemplate template engine;

  To use the think-template template engine, you need to install think-view;

composer require topthink/think-view

The view directory can be in the root directory or the app application directory

• 4. Template rendering
  

To use View, you must first introduce the

think\facade\View

facade class

• fetch method renders the page

• Parameters: the path of the static page, the default corresponding static page
  controller code

<?php

namespace app\controller;

use think\facade\View;

class Index{

public function index() {

                                                                   return View::fetch(); Corresponds to the directory under the view

Note: The index method corresponds to the static file in the directory under the view

5. Template variables

The assignment method belongs to Global variable assignment

Template output{$name}

controller code

namespace app\controller;

• use think\facade\View;
  class Index{
• public function index(){
  // Template variable assignment

View::assign('name','Ouyang Ke');

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

// Or batch assignment

View :: assign ([

'name' = & gt; 'Ouyangke',

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

]);

// Template output

return View::fetch();

}

}

viewcode

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ThinkPHP6</title>

</head>

<body>

Name: {$name}

<br>

Email: {$email}

</body>

< ;/html>

6. Entrance

• The public directory is the only web-accessible directory

• Resource files are placed in public/static

• entry file, the default is index.php



7. Example

• Put the html page into the ThinkPHP framework

• This page is a static file

<!DOCTYPE html>

<html>

<head>

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

        <span>【欧阳克】<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>

                                                                                                     lt;ul class=" layui-nav layui-nav-tree" lay-filter="test">

                                                                                                                             li> ="list.html">Product list</a></li>

                                                                                       ;/li>

                                                                                                                                                                   

#                                                                                                                                                          Test "& gt;

& lt; li & gt; & lt; a href =" list.html "& gt; product list & lt;/a & gt;/li & gt;

& lt; & lt; & lt; a href="list.html">Product list</a></li>

                                                                                                   ;</li>

                                                                                                                                                                                                                                                                       ;

                                                                                                                                                                                                                               ;

        </div>

    </div>

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

        <div>

            <span>商品列表</span>

            <div></div>

        </div>

# & lt; table & gt;

& lt; thead & gt;

## & LT TR & GT ##                                                                                      t;

                                                                                    </thead>

                                                                                               <td>Xi World 2019 Autumn and Winter New Style Long-sleeved apricot top hooded loose embroidered literary drop sleeve thick sweatshirt BF style</td>

                                                                                             ;/td>

                                                                                                         </tr>

                                                                                                                                                               Dress up the temperament suit collar in contrasting wool Women's coats </td>

                                                                                                 <td>Open </td>

                                                                                                                                                                                                                                                                                                td>

                                                                                                                                                                               >         been having been having slender clothing to have been worn. ;

                                                                                                                                   gt;2019-12-12</td> ;

                                                                                                                         <td>Qiushui Yiren double-faced Winter Winter 2019 new women's temperament suit neck color wool coat 外 & female & lt;/td & gt;

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

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

                                                                                                         /tr>

                                                                                                                                                                         women's contrast collar wool coat </td>

                                                                                                                         <td>Close</ td>

                                                                                                                                                                                                                                                                                                td>

                                                                                                                                                                             >             been having been having slender clothing to have been worn in 2019. ;

                                                                                                                                   gt;2019-12-12</td> ;

                                                                                                                                                                             ​      ;

</body>

</html>

<script>

layui.use(['element','layer ','laypage'], function(){

var element = layui.element;

var laypage = layui.laypage;

$ = layui.jquery;

layer = layui.layer;

resetMenuHeight();

});

// Reset menu container height

function resetMenuHeight(){

var height = document.documentElement.clientHeight - 50;

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

}

</script>

controller code, this data is test data, which will be read from the database later

namespace app\controller;

use think\facade\View;

class Index{

public function index(){

$title = 'Mall';

$login = ‘Ouyang Ke’; ' =>                  ] ,

                                                                                                                                                                                                                                                                             ]

                                                                                                                                                                                                                                                                                            ”

# [

'ID' = & GT; 3,

## 'Title' = & GT; 'User List',

                                                                                                                 

                                                                                                                                                              to  gt; 'Shopping Cart',

                                                                                   ,

                                                                                                                                                                                                                                                                                         ],

[

'ID' = & GT; 6,

## 'Title' = & GT;

##],

[

'Title' = & GT; 'Backstage Management',

## 'Lists' = & GT [

'id' = & gt; 7,

'title' = & gt;

## 'ID' = & gt; 8,

'Title' = & GT; 'ID' = & gt; 9,

'title' = & gt; 'left menu column',

##]

#/

                                                                                                                                                                                                                          title' => 'Xi World 2019 Autumn and Winter New Long-sleeved Apricot Top Hooded Loose Embroidered Art Drop Shoulder Sleeve Thickened Sweatshirt BF Style',

'cat' => 'Women's Clothing',

                'price' => 189,

                                                                                                                                                            using         using   using                   use       use     use     through   through out through out through out through out through through off ‐ through ‐ ‐‐ ‐‐‐ and ​ to => 'Open',

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

// 'add_time' => '1576080000'

]

# [

'ID' = & GT; 2,

## 'Title' = & GT; Wool coats for women',

            'cat' => 'Women's clothing',

                      'price' => 699,

                  'discount' => 7,

# 'STATUS' = & GT; 1,

## // 'STATUS' = & GT; ',

                                                                                                                                                                                          

## 'Title' = & GT; 'Micro Bouncing Medium high -waisted straight -footed jeans',

'Cat' = & GT; 179;

                                                                                                                                                                                                     1576080000'

                                                                                                                                                                                                                                                                               Round neck black and white T-shirt T-shirt solid color tops and bottoming shirts',

            'cat' => 'Men's clothing',

                  'price' => 99,

                ' discount' => 9,

                                                                                              using using use using                 through ’''''' out's' out out'sps out outps out out out out out's out out's out out's' out's' out's out's' out's' out's''' out'''''’’’’’'-'' ; '2019-12-12',

                                                                                                                                                                                      ​;

## 'Right' = & GT; $ right

];

Return view :: fetch ();

##}

##}

view code, controller data is used in the view

<!DOCTYPE html>

<html>

<head>

<title>{$title}--Backend management system</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>--后台管理系统</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>商品标题</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>