Thinkphp6 + layui 實現后臺登錄（驗證碼刷新）

nbsp;html&gt;   ????<meta> ????<title>Title</title> ????<link><div> ????<div> ????????<div> ????????????<div>后臺登錄</div> ????????????<form> ????????????????<div> ????????????????????<label>用戶名</label> ????????????????????<div> ????????????????????????<input> ????????????????????</div> ????????????????</div> ????????????????<div> ????????????????????<label>密碼</label> ????????????????????<div> ????????????????????????<input> ????????????????????</div> ????????????????</div> ????????????????<div> ????????????????????<label>驗證碼</label> ????????????????????<div> ????????????????????????<input> ????????????????????????<div>@@##@@</div> ????????????????????</div> ????????????????</div> ????????????????<div> ????????????????????<div> ????????????????????????<input> ????????????????????????<button>重置</button> ????????????????????</div> ????????????????</div> ????????????</form> ????????</div> ????</div>  <script></script><script>     //只需要引入layui.all.js就ok     //這里我們需要用到form表單，jquery的ajax提交，layui的彈彈窗     //所以需要引用，下面數組就是引入的組件。     layui.use([&#39;form&#39;, &#39;jquery&#39;, &#39;layer&#39;], function(){         var form = layui.form;         var $ = layui.jquery;         //上兩行就是引用form 和$ ，下面需要用到          //監聽表單提交，獲取表單信息：submit(formDemo)數據對應這個lay-filter="formDemo"         form.on(&#39;submit(formDemo)&#39;, function(data){         //從表單中獲取相應數據             var name = data.field.name;             var password = data.field.password;             var yzm = data.field.yzm;             $.ajax({                 url:"userLogin",//請求地址，當前在admin/user/userLogin下，提交給當前方法即可                 data: {//發送給服務器的數據                     &#39;name&#39;:name,                     &#39;password&#39;:password,                     &#39;yzm&#39;:yzm                 },                 type:"Post",//提交方式                 dataType:"json",                 success:function(data){//成功回調                     if(data.status==0){//登錄失敗，status后臺自定義狀態碼                         layer.msg(data.msg);//layer自帶的彈窗，msg后臺自定義消息，                         emm 就是最開始layui.use中引用的layer，不然這里沒法使用。                     }else{//登錄成功 msg后臺自定義消息                         layer.msg(data.msg);                         //行吧，這里是自定義跳轉，登錄成功過后直接跳到主頁                         window.location.href = "{:url(&#39;admin/index/index&#39;)}"                     }                      return false;                 },                 error:function(data){                     console.log(&#39;==錯誤信息==&#39;);                     return false;                 }             });               return false;         });         //提交數據結束         // 驗證碼刷新，，通過jquery獲取圖片dom，并實現點擊功能。         $("#captcha").click(function(event){         // jqery中獲取id是上面這樣的，如果是獲取class就是 $(".captcha")         // 當然我這里不涉及類名。             console.log(&#39;我被點擊了&#39;);控制臺輸出這鬼東西被點擊了沒有             console.log(event);             //給當前圖片的src換一個新的url，后面帶上一個隨機數。             //雖然我還不知道原理，             //但是這樣就能讓驗證碼刷新，             //請求tp6這個captcha_src()方法，如果不加后面那串估計后臺認為             //什么也不給你請求個錘子，原來那個給你             this.src = "{:captcha_src()}?"+Math.random();              console.log(this.src);//我打印了一下值得變化，事實上只有后面隨機數變了         })     }); </script><p>前臺代碼基本上是這樣：驗證碼哪一行有毛病，我不想解決。</p> <p>三、后臺邏輯實現。</p> <p>需要用到一張數據表：我這是admin表，包含了以下字段如圖3-1</p> <p><img  alt="Thinkphp6 + layui 實現后臺登錄（驗證碼刷新）" ></p> <p>圖3-1 數據庫設計表</p> <p>其實登錄 不需要group_id last_login_time 等字段。這里我是有其他功能要實現。如果我開心過兩天發張博客。</p> <p>我沒用模型，你也可以用模型：這里我建立一個模型吧：</p> <p>admin模型如下：</p> <p>創建模型命令php think make:mode admin@UserModel</p> <p>我這里開啟了多應用模式，admin是我的應用，如果你沒有使用多應用模式，把admin@去掉，當然，你也可以手動創建哈。</p> <p>得到以下模型：：圖3-2</p> <p><img src="https://img.php.cn/upload/image/931/902/584/1591584315372831.png" title="1591584315372831.png" alt=")@$G%JOCEQ`9RSXJ{~[G[W6.png"></p> <p>圖3-2 模型位置圖：UserModel</p> <p>模型代碼：</p> <pre class="brush:php;toolbar:false"><?php declare (strict_types = 1); namespace appdminmodel; use thinkModel;  class UserModel extends Model {     //綁定主鍵     protected $pk = &#39;id&#39;;     //綁定表 表名     protected $table=&#39;msg_admin&#39;;     //開啟自動時間戳     protected $autoWriteTimestamp =true;     // 設置字段信息。。雖然可以不用，但文檔說可以減少一次查詢，還是用吧     protected $schema = [         &#39;id&#39; =>?'int', ????????'name'?=&gt;?'string', ????????'password'?=&gt;?'string', ????????'status'?=&gt;?'tinyint', ????????'group_id'?=&gt;?'int', ????????'create_time'?=&gt;?'datetime', ????????'update_time'?=&gt;?'datetime', ????????'last_login_time'?=&gt;?'datetime', ????]; ????//?模型初始化 ????protected?static?function?init() ????{ ????????//TODO:初始化內容 ????} }

<?php namespace appdmincontroller; use appBaseController; use thinkacadeDb; use thinkRequest; use appalidateUserValidate; use thinkacadeView; use thinkacadesession;  class User extends BaseController {         protected $request;         /**      * 檢查用戶登錄      * 有登錄提交時，進入登錄功能，沒有登錄請求返回頁面      * 獲取用戶信息 校驗 查詢數據庫      * @param Request $request      * @return string|	hink esponseJson      * @throws Exception      */     public function userLogin(Request $request){         if(!empty(session(&#39;adminAccount&#39;)) ){             //如果用戶已經登錄，跳轉到后臺首頁             return redirect((string)url(&#39;index/index&#39;));         }         if($request->isPost()){ ????????????$name=?$request-&gt;param('name'); ????????????$password?=?$request-&gt;param('password'); ????????????$yzm?=?$request-&gt;param('yzm');  ????????????//判斷是否沒有數據 ????????????if(empty($name)&amp;&amp;empty($password)||empty($yzm)){ ????????????????return?json(['status'=&gt;0,'msg'=&gt;'未提交數據']); ????????????} ????????????//數據不為空，查詢用戶是否存在  ????????????$adminInfo?=?Db::name('msg_admin')-&gt;where('name','=',$name)-&gt;find(); ????????????//halt($adminInfo); ????????????if(!empty($adminInfo)?&amp;&amp;?$adminInfo['status']!=1){ ????????????????return?json(['statsu'=&gt;0,'msg'=&gt;'用戶不存在']); ????????????} ????????????if(!captcha_check($yzm)){ ????????????????return?json(['status'=&gt;0,'msg'=&gt;'驗證碼不正確']); ????????????} ????????????//md5加密密碼：：password_salt是一個自定義密碼加密具體 ????????????//具體是在common.php中實現，具體如下：：： ????????????/** ????????????<?php                         // 應用公共文件                          //通用密碼加密                         function password_salt($str){                             $salt=&#39;sttr&#39;;                             return md5($str.$salt);                         }             */            // if($adminInfo[&#39;password&#39;]!=password_salt($password)){            //這里數據庫信息是手動添加，所以沒有使用加密。            if($adminInfo[&#39;password&#39;]!=$password){                 return json([&#39;status&#39;=>0,'msg'=&gt;'密碼不正確']); ????????????} ????????????//將用戶存入session中? ????????????session('adminAccount',$adminInfo);  ????????????return?json(['status'=&gt;1,'msg'=&gt;'登錄成功']); ????????}else{ ????????????return?View::fetch(); ????????} ????} ????//退出登錄?? ????public?function?loginOut(){ ????????session::clear(); ????????//重定向到登錄界面》》》》 ????????return?redirect('userLogin'); ????} }

<?php declare (strict_types = 1); namespace appdmincontroller; use thinkacadeView; class Index {     public function index()     {         View::assign(&#39;user&#39;,session(&#39;adminAccount&#39;));         return View::fetch();     } }

nbsp;html&gt;   ????<meta> ????<title>Title</title> ????<link><div> ????<div> ????????<div>XXX后臺管理系統</div> ????????<!-- 頭部區域（可配合layui已有的水平導航） --> ????????<ul> ????????????<li><a>主頁</a></li> ????????????<li><a>商品管理</a></li> ????????????<li><a>用戶管理</a></li> ????????????<li> ????????????????<a>其它</a> ????????????????<dl> ????????????????????<dd><a>郵件管理</a></dd> ????????????????????<dd><a>消息管理</a></dd> ????????????????????<dd><a>授權管理</a></dd> ????????????????</dl> ????????????</li> ????????</ul> ????????<ul> ????????????<li> ????????????????<a> ????????????????????@@##@@ ????????????????????{$user.name} ????????????????????<!--                         具體看這里，取出session的值：：：：：                                          --> ????????????????</a> ????????????????<dl> ????????????????????<dd><a>個人資料</a></dd> ????????????????????<dd><a>安全設置</a></dd> ????????????????</dl> ????????????</li> ????????????<li><a>安全退出</a></li> ????????</ul> ????</div>  ????<div> ????????<div> ????????????<!-- 左側導航區域（可配合layui已有的垂直導航） --> ????????????<ul> ????????????????<li> ????????????????????<a>商品管理</a> ????????????????????<dl> ????????????????????????<dd><a>商品列表</a></dd> ????????????????????????<dd><a>添加商品</a></dd> ????????????????????</dl> ????????????????</li> ????????????????<li> ????????????????????<a>訂單管理</a> ????????????????????<dl> ????????????????????????<dd><a>訂單列表</a></dd> ????????????????????????<dd><a>待審核</a></dd> ????????????????????????<dd><a>配送中</a></dd> ????????????????????????<dd><a>完成訂單</a></dd> ????????????????????</dl> ????????????????</li> ????????????????<li><a>其他功能</a></li> ????????????</ul> ????????</div> ????</div>  ????<div> ????????<!-- 內容主體區域 -->  ????? ????</div> ????<div> ????????<!-- 底部固定區域 --> ??????????layui.com?-?底部固定區域 ????</div> </div> <script></script><script></script><script>     //JavaScript代碼區域     layui.use(&#39;element&#39;, function(){         var element = layui.element;      }); </script>