01-模版页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆系统</title> <!-- 引入 Bootstrap CSS --> {css href="__CSS__/bootstrap.min.css"} {css href="__CSS__/style.css"} <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <!--系统提示--> <div class="d-flex vw-100 vh-100 justify-content-center align-items-center " > <form class="p-5 m-5 shadow"> <fieldset class=""> <div class="form-group row"> <label for="name" class="col-4 col-form-label text-right">管理员名</label> <div class="col-6"> <input type="text" name="name" id="name" class="form-control" placeholder="请输入管理员名"></input> </div> <span class="col-2 text-danger col-form-label">*</span> </div> <div class="form-group row"> <label for="password" class="col-4 col-form-label text-right">密码</label> <div class="col-6"> <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码"></input> </div> <span class="col-2 text-danger col-form-label">*</span> </div> <div class="form-group row"> <div class="col-4 col-form-label" style="position: relative ; top:-6px">{:captcha_img()}</div> <div class="col-6 "> <input type="text" name="captcha" id="captcha" class="form-control " placeholder="请输入验证码"></input> </div> <span class="col-2 text-danger col-form-label">*</span> </div> <div class="form-group row"> <div class="col-2"> <input type="hidden" value="{:token()}" name="__token__"> </div> <div class="col-8"> <input type="button" class="btn btn-success w-100" id="btn-submit" value="登陆"></input> </div> </div> </fieldset> </form> </div> <!-- 引入 JS 文件 --> {js href="__JS__/jquery-3.5.1.min.js"} {js href="__JS__/bootstrap.bundle.min.js"} <script type="text/javascript"> //ajax登陆 $("#btn-submit").click(()=> { $.ajax({ url:"{:url('/login_ajax')}", type:"POST", data:$('form').serialize(),//表单序列化 dataType:'json', timeout:3000, success:function (data) { //data中存放的是错误数据，格式为json字符串 if (data.length>0) { alert(data); } else { alert('登陆成功'); //页面重定向 window.location.href='{:url("/index")}'; } }, error:function () { alert('数据库通讯错误'); } }) }) </script> </body> </html>thinkPHP的登陆控制器
<?php namespace app\controller; use think\Request; class Login { public function index() { return \view('indexAjax'); } public function Logajax(Request $request) { //获取数据 $data = $request->param(); //错误集合 $errors = []; //验证用户名和密码 //声明验证规则，数据方式使用了auth Model $validate = \think\facade\Validate::rule([ 'name|管理员名' => 'unique:auth,name^password' ]); //验证用户名和密码 $result = $validate->check([ 'name' => $data['name'], 'password' => sha1($data['password']) ]); if ($result) { $errors[] = '用户名或密码不正确'; } //验证验证码 if (!captcha_check($data['captcha'])) { $errors[] = '验证码错误'; } //如果没有错误，登陆成功，记录session if (empty($errors)) { session('admin', $data['name']); } return json($errors); } public function logout() { //删掉session ->admin session('admin',null); //返回首页 return redirect('/'); } }