ThinkPHP6 起步

844次阅读
没有评论
  • ThinkPHP 支持传统的 MVC（Model-View-Controller）模式以及流行的 MVVM（Model-View-ViewModel）模式的应用开发

一、MVC

  • MVC  软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）
  • ThinkPHP  是一个典型的  MVC  架构

控制器 – 负责转发请求，对请求进行处理。
视图 – 界面设计人员进行图形界面设计。
模型 – 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

ThinkPHP6 起步

二、单应用模式访问

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        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                 命令行入口文件

三、安装视图

  • 视图功能由 \think\View 类配合视图驱动（也即模板引擎驱动）类一起完成，新版仅内置了 PHP 原生模板引擎（主要用于内置的异常页面输出），如果需要使用其它的模板引擎需要单独安装相应的模板引擎扩展

composer require topthink/think-view

  • 视图目录可以在根目录，也可以在 app 应用目录

四、模版渲染

  • 要使用 View，必须先引入  think\facade\View  门面类
  • fetch  方法渲染页面

controller 代码 

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

view 代码

  • 备：Index 类对应 view 下面的目录
  • 备：index 方法对应 view 下面的目录里的静态文件

五、模版变量

  • assign  方法赋值属于全局变量赋值
  • 模版输出  {$name}

controller 代码 

namespace app\controller; use think\facade\View; class Index{ public function index(){ // 模板变量赋值 View::assign('name','欧阳克'); View::assign('email','oyk@php.cn'); // 或者批量赋值 View::assign([ 'name' => '欧阳克', 'email' => 'oyk@php.cn' ]); // 模板输出 return View::fetch(); } }

view 代码 

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

六、示例

把 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%;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>

controller 代码 

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(); } }

view 代码 

<!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>
正文完
发表至： thinkphp
2020-03-28
 0
飞翔的mouse
版权声明：本站原创文章，由 飞翔的mouse 于2020-03-28发表，共计10242字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
ThinkPHP6 请求
ThinkPHP6 起步
ThinkPHP6 数据库链式操作
ThinkPHP6 数据库