交互 · 程序員講師課件

# ThinkPHP6 交互 --- ## 一、`ThinkPHP6` 容器和依賴注入 * 支持使用依賴注入的場景 > 控制器架構方法 > 控制器操作方法 > 路由的閉包定義 > 事件類的執行方法 > 中間件的執行方法 ## 二、`ThinkPHP6` 門面 `Facade` * 門面為容器中的（動態）類提供了一個靜態調用接口，相比于傳統的靜態方法調用，帶來了更好的可測試性和擴展性，你可以為任何的非靜態類庫定義一個 `facade` 類。 * 系統已經為大部分核心類庫定義了 `Facade` ，所以你可以通過 `Facade` 來訪問這些系統類，當然也可以為你的應用類庫添加靜態代理。 ## 三、容器和依賴注入、門面 **系統類庫**|**容器綁定標識**|**Facade類** ---|---|--- think\\App|app|think\\facade\\App think\Cache|cache|think\facade\Cache think\Config|config|think\facade\Config think\Cookie|cookie|think\facade\Cookie think\Console|console| think\Db|db|think\facade\Db think\Debug|debug| think\Env|env|think\facade\Env think\Event|event|think\facade\Event think\Http|http| think\Lang|lang|think\facade\Lang think\Log|log|think\facade\Log think\Middleware|middleware|think\facade\Middleware think\Request|request|think\facade\Request think\Response|response|think\facade\Response think\Route|route|think\facade\Route think\Session|session|think\facade\Session think\Validate|validate|think\facade\Validate think\View|view|think\facade\View ## 三、案例 > 1、實現前端代碼 ``` <!DOCTYPE html> <html> <head> <title>管理系統</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> </head> <body style="padding:30px;"> <table> <thead> <tr> <th>ID</th> <th>手機號</th> <th>昵稱</th> <th>性別</th> <th>頭像</th> <th>狀態</th> <th>最后登錄時間</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </body> </html> ``` > 2、代碼交互 ```php // php代碼 namespace app\index\controller; use think\View; use think\facade\Db; class Index { public function index(View $view){ $user = Db::table('user')->select(); $view->assign([ 'user' => $user ]); return $view->fetch(); } } ``` ```html <!DOCTYPE html> <html> <head> <title>管理系統</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> </head> <body style="padding:30px;"> <table> <thead> <tr> <th>ID</th> <th>手機號</th> <th>昵稱</th> <th>性別</th> <th>頭像</th> <th>狀態</th> <th>最后登錄時間</th> </tr> </thead> <tbody> {foreach $user as $v} <tr> <td>{$v['uid']}</td> <td>{$v['phone']}</td> <td>{$v['nickname']}</td> <td>{$v['sex']}</td> <td>{$v['avatar']}</td> <td>{$v['status']}</td> <td>{$v['last_time']}</td> </tr> {/foreach} </tbody> </table> </body> </html> ``` ## 四、請求 * 請求對象由 `think\Request` 類負責 > 獲取當前請求信息方法 **方法**|**功能** ---|--- host|當前訪問域名或者IP scheme|當前訪問協議 port|當前訪問的端口 remotePort|當前請求的REMOTE_PORT protocol|當前請求的SERVER_PROTOCOL contentType|當前請求的CONTENT_TYPE domain|當前包含協議的域名 subDomain|當前訪問的子域名 panDomain|當前訪問的泛域名 rootDomain|當前訪問的根域名 url|當前完整URL baseUrl|當前URL（不含QUERY_STRING） query|當前請求的QUERY_STRING參數 baseFile|當前執行的文件 root|URL訪問根地址 rootUrl|URL訪問根目錄 pathinfo|當前請求URL的pathinfo信息（含URL后綴） ext|當前URL的訪問后綴 time|獲取當前請求的時間 type|當前請求的資源類型 method|當前請求類型 rule|當前請求的路由對象實例 ```php // php代碼 namespace app\index\controller; use think\facade\Request; class Index { public function index(){ print_r(Request::host().'<br/>'); print_r(Request::scheme().'<br/>'); print_r(Request::port().'<br/>'); print_r(Request::domain().'<br/>'); } } ``` > 獲取參數方法 **方法**|**功能** ---|--- param|獲取當前請求的變量 get|獲取 $_GET 變量 post|獲取 $_POST 變量 file|獲取 $_FILES 變量 put|獲取 PUT 變量 delete|獲取 DELETE 變量 session|獲取 $_SESSION 變量 cookie|獲取 $_COOKIE 變量 request|獲取 $_REQUEST 變量 server|獲取 $_SERVER 變量 env|獲取 $_ENV 變量 route|獲取路由（包括PATHINFO）變量 middleware|獲取中間件賦值/傳遞的變量 ```php // php代碼 namespace app\admin\controller; use think\Request; class Index{ // 在index方法引入Request public function index(Request $request){ // parma 表示接收所有傳過來的參數不管是post請求還是get請求 parma都能接收到參數 $data = $request->param(); // post表示只接收 post方式傳出來的參數 $data1= $request->post(); // get表示只接收get方式傳出來的參數 $data2= $request->get(); // 假如你只想拿到一個id值，這時我們可以在括號里面加上id即可。 $data = $request->param('id'); } } ``` > 判斷請求類型 **方法**|**功能** ---|--- method|獲取當前請求類型 isGet|判斷是否GET請求 isPost|判斷是否POST請求 isPut|判斷是否PUT請求 isDelete|判斷是否DELETE請求 isAjax|判斷是否AJAX請求 isPjax|判斷是否PJAX請求 isJson|判斷是否JSON請求 isMobile|判斷是否手機訪問 isHead|判斷是否HEAD請求 isPatch|判斷是否PATCH請求 isOptions|判斷是否OPTIONS請求 isCli|判斷是否為CLI執行 isCgi|判斷是否為CGI模式 ```php // php代碼 namespace app\index\controller; use think\facade\Request; class Index { public function index(){ var_dump(Request::method()); var_dump(Request::isGet()); var_dump(Request::isPost()); } } ``` > 獲取HTTP頭信息 **方法**|**功能** ---|--- header|獲取當前請求的HTTP請求頭信息 ```php // php代碼 namespace app\index\controller; use think\facade\Request; class Index { public function index(){ $info = Request::header(); var_dump($info); } } ``` ## 五、上傳 * 內置的上傳只是上傳到本地服務器，上傳到遠程或者第三方平臺的話需要安裝額外的擴展 > 單圖上傳 ```php // php代碼 namespace app\index\controller; use think\facade\View; use think\facade\Db; use think\facade\Request; class Index { public function index(){ return View::fetch(); } public function upload(){ # image 是input的name $file = Request::file('image'); if($file==null){ exit(json_encode(array('code'=>1,'msg'=>'沒有文件上傳'))); } $info = $file->validate(['ext'=>'jpg,png,gif,jpeg'])->move('./uploads'); if(empty($info)){ exit(json_encode(array('code'=>1,'msg'=>$file->getError()))); } $img = '/uploads/'.$info->getSaveName(); exit(json_encode(array('code'=>0,'data'=>$img))); } } ``` ```html <!DOCTYPE html> <html> <head> <title>上傳</title> </head> <body> <form action="index.php/index/index/upload" enctype="multipart/form-data" method="post"> <input type="file" name="image" /> <br> <input type="submit" value="上傳" /> </form> </body> </html> ``` > 多圖上傳 ```php // php代碼 namespace app\index\controller; use think\facade\View; use think\facade\Db; use think\facade\Request; class Index { public function index(){ return View::fetch(); } public function upload(){ # image 是input的name $file = Request::file('image'); if($file==null){ exit(json_encode(array('code'=>1,'msg'=>'沒有文件上傳'))); } foreach($file as $file_v){ $info = $file_v->validate(['ext'=>'jpg,png,gif,jpeg'])->move('./uploads'); if(empty($info)){ exit(json_encode(array('code'=>1,'msg'=>$file_v->getError()))); } $img[] = '/uploads/'.$info->getSaveName(); } exit(json_encode(array('code'=>0,'data'=>$img))); } } ``` ```html <!DOCTYPE html> <html> <head> <title>上傳</title> </head> <body> <form action="index.php/index/index/upload" enctype="multipart/form-data" method="post"> <input type="file" name="image" /><br> <input type="file" name="image[]" /><br> <input type="file" name="image[]" /><br> <input type="submit" value="上傳" /> </form> </body> </html> ``` ## 六、后臺管理案例 * 前端框架使用layui > php代碼 ```php namespace app\index\controller; use think\facade\View; use think\facade\Db; use think\facade\Request; class User { public function index(){ $get = Request::get(); if(isset($get['wd'])){ if($get['select'] == 'phone'){ $where[] = ['phone','like','%'.$get['wd'].'%']; }else{ $where[] = ['u_name','like','%'.$get['wd'].'%']; } }else{ $where = true; } $user = Db::table('user')->where($where)->paginate([ 'list_rows' => 5, 'query' => request()->param() ]); View::assign([ 'user' => $user ]); return View::fetch(); } public function add(){ if(Request::isPost()){ $post = Request::post(); $post['last_time'] = time(); $add = Db::table('user')->insert($post); if($add){ exit(json_encode(array('code'=>0,'msg'=>'添加成功'))); }else{ exit(json_encode(array('code'=>1,'msg'=>'添加失敗'))); } }else{ return View::fetch(); } } public function edit(){ if(Request::isPost()){ $uid = Request::post('uid'); $post = Request::post(); $post['last_time'] = time(); $edit = Db::table('user')->where('uid',$uid)->update($post); if($edit){ exit(json_encode(array('code'=>0,'msg'=>'修改成功'))); }else{ exit(json_encode(array('code'=>1,'msg'=>'修改失敗'))); } }else{ $uid = Request::get('uid'); $user = Db::table('user')->where('uid',$uid)->find(); View::assign([ 'user' => $user ]); return View::fetch(); } } public function delete(){ $uid = Request::post('uid'); $delete = Db::table('user')->where('uid',$uid)->delete(); if($delete){ exit(json_encode(array('code'=>0,'msg'=>'刪除成功'))); }else{ exit(json_encode(array('code'=>1,'msg'=>'刪除失敗'))); } } } ``` > 數據列表頁 ```html <!DOCTYPE html> <html> <head> <title>后臺管理系統</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js"></script> <style type="text/css"> .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination > li { display: inline; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; } </style> </head> <body style="padding:30px;"> <div style="margin-top:10px;" class="layui-form"> <div class="layui-form-item layui-form-pane" style="width:800px;"> <div class="layui-input-inline"> <select id="select" lay-filter="aihao"> <option value="phone" {if $select=='phone'?'selected':''}>手機號</option> <option value="u_name" {if $select=='u_name'?'selected':''}>姓名</option> </select> </div> <input type="text" class="layui-input" style="display:inline-block;width:150px;" id="wd" value="{$wd}" placeholder="輸入關鍵詞"> <button class="layui-btn" onclick="searchs()"><i class="layui-icon"></i>搜索</button> </div> </div> <button class="layui-btn" onclick="add()">添加</button> <table class="layui-table"> <thead> <tr> <th>ID</th> <th>手機號</th> <th>昵稱</th> <th>性別</th> <th>頭像</th> <th>狀態</th> <th>最后登錄時間</th> <th>操作</th> </tr> </thead> <tbody> {foreach $user as $v} <tr> <td>{$v['uid']}</td> <td>{$v['phone']}</td> <td>{$v['nickname']}</td> <td>{$v['sex']}</td> <td>{$v['avatar']}</td> <td>{$v['status']}</td> <td>{$v['last_time']}</td> <td> <button class="layui-btn layui-btn-xs" onclick="edit({$v['uid']})">編輯</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$v['uid']})">刪除</button> </td> </tr> {/foreach} </tbody> </table> {$user|raw} </body> </html> <script type="text/javascript"> layui.use(['laypage','layer','form'], function(){ var laypage = layui.laypage; layer = layui.layer; $ = layui.jquery; var form = layui.form; }); // 添加、編輯 function add(){ layer.open({ type: 2, title: '添加', shade: 0.3, area: ['480px', '450px'], content:'/index.php/index/User/add' }); } // 編輯 function edit(uid){ layer.open({ type: 2, title: '添加', shade: 0.3, area: ['480px', '450px'], content:'/index.php/index/User/edit?uid='+uid }); } // 刪除 function del(uid){ layer.confirm('確定要刪除嗎？', { btn: ['確定','取消'] }, function(){ $.post('/index.php/index/User/del',{'uid':uid},function(res){ if(res.code>0){ layer.alert(res.msg,{icon:2}); }else{ layer.msg(res.msg); location.reload(); } },'json'); }); } // 搜索 function searchs(page){ var wd = $.trim($('#wd').val()); var select = $.trim($('#select').val()); var url = '/index.php/index/User/index?'; if(wd){ url += '&wd='+wd; } if(select){ url += '&select='+select; } window.location.href = url; } </script> ``` > 添加數據頁 ```html <!DOCTYPE html> <html> <head> <title>添加</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js"></script> </head> <body style="padding:10px;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">手機號</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="phone" value=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">昵稱</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="nickname" value=""> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">頭像</label> <div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上傳圖片</button> <div class="layui-upload-list"> <label class="layui-form-label">圖片預覽</label> <img class="layui-upload-img" style="widht:50px;height:50px;" id="img"> <input type="hidden" id="avatar" name="avatar" value=""> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性別</label> <div class="layui-input-inline"> <select name="sex" lay-filter="aihao"> <option value=""></option> <option value="0">保密</option> <option value="1">男</option> <option value="2">女</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">狀態</label> <div class="layui-input-inline"> <select name="status" lay-filter="aihao"> <option value=""></option> <option value="1">開啟</option> <option value="0">關閉</option> </select> </div> </div> </form> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" onclick="save()">提交</button> </div> </div> <script type="text/javascript"> layui.use(['form','layer','upload'],function(){ var layer = layui.layer; $ = layui.jquery; var form = layui.form; var upload = layui.upload; var uploadInst = upload.render({ elem: '#test1', url: "/index.php/index/index/upload", before: function(obj){ obj.preview(function(index, file, result){ $("#img").attr("src", result); }); }, done: function(res){ if(res.code > 0){ return layer.msg("上傳失敗，"+res.msg); }else{ $("#avatar").val(res.data); } } }); }); function save(){ $.post('/index.php/index/User/add',$('form').serialize(),function(res){ if(res.code>0){ layer.alert(res.msg,{icon:2}); }else{ layer.msg(res.msg); setTimeout(function(){parent.window.location.reload();},1000); } },'json'); } </script> </body> </html> ``` > 數據修改頁 ```html <!DOCTYPE html> <html> <head> <title>修改</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js"></script> </head> <body style="padding:10px;"> <form class="layui-form"> <input type="hidden" name="uid" value="{$user['uid']}"> <div class="layui-form-item"> <label class="layui-form-label">手機號</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="phone" value="{$user['phone']}"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">昵稱</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="nickname" value="{$user['nickname']}"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">頭像</label> <div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上傳圖片</button> <div class="layui-upload-list"> <label class="layui-form-label">圖片預覽</label> <img class="layui-upload-img" style="widht:50px;height:50px;" src="{$user['avatar']}" id="img"> <input type="hidden" id="avatar" name="avatar" value="{$user['avatar']}"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年齡</label> <div class="layui-input-inline"> <input type="text" class="layui-input" name="age" value="{$user['age']}"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性別</label> <div class="layui-input-inline"> <select name="sex" lay-filter="aihao"> <option value=""></option> <option value="0" {$user['sex']==0?'selected':''}>保密</option> <option value="1" {$user['sex']==1?'selected':''}>男</option> <option value="2" {$user['sex']==2?'selected':''}>女</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">狀態</label> <div class="layui-input-inline"> <select name="status" lay-filter="aihao"> <option value=""></option> <option value="1" {$user['status']==1?'selected':''}>開啟</option> <option value="0" {$user['status']==0?'selected':''}>關閉</option> </select> </div> </div> </form> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" onclick="save()">提交</button> </div> </div> <script type="text/javascript"> layui.use(['form','layer','upload'],function(){ var layer = layui.layer; $ = layui.jquery; var form = layui.form; var upload = layui.upload; var uploadInst = upload.render({ elem: '#test1', url: "/index.php/index/index/upload", before: function(obj){ obj.preview(function(index, file, result){ $("#img").attr("src", result); }); }, done: function(res){ if(res.code > 0){ return layer.msg("上傳失敗，"+res.msg); }else{ $("#avatar").val(res.data); } } }); }); function save(){ $.post('/index.php/index/User/edit',$('form').serialize(),function(res){ if(res.code>0){ layer.alert(res.msg,{icon:2}); }else{ layer.msg(res.msg); setTimeout(function(){parent.window.location.reload();},1000); } },'json'); } </script> </body> </html> ```