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>