使用到的工具
1,thinkphp5.0自带的验证码: think-captcha
可查看： https://www.kancloud.cn/manual/thinkphp5/154295
2,前台页面框架: layui
3,引用到的文件: jquery.min.js layui.css
登录样式最终图形
登录的html
<body style="background:#f2f2f2">
<div class="login-div"><h1 class="login-title">集团后台登录</h1><div class="web_login"><form class="layui-form" onsubmit="return to_login()"><div class="layui-form-item layui-center"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input type="text" name="admin_name" class="layui-input"/></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input type="password" name="password" class="layui-input"/></div></div><div class="layui-form-item"><label class="layui-form-label">验证码</label><div class="layui-input-inline"><input style="width:80px;float:left" type="text" name="captcha" class="layui-input"/><img id="captcha" style="width:100px;height:40px;display: inline-block;float:right;"src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}'"/></div></div><div class="layui-form-item"><div class="layui-center"><input type="submit" value="登 录" class="layui-btn login-button"/></div></div></form></div>
</div>
</body>
</html>
<script>//layui模块的使用layui.use(['layer'], function () {var layer = layui.layer,$ = layui.jquery;});
</script>
<script>function to_login() {$.ajax({type: 'POST',url: '/group_check',dataType: 'json',data: $("form").serialize(),//data:{aa:'aaa'},success: function (e) {layer.msg(e.error_msg);if (e == 'jr') {// layer.msg('请求成功');window.location.href = "/index";} else {layer.msg(e);$("#captcha").click(); //验证码输入错误的时候点击刷新}}});return false;}
</script>
登录控制器代码
public function login(){if (Request::instance()->isPost()) { //判断是否是是否为 POST 请求$data = input('post.');
// {admin_name: "admin", password: "123456", captcha: "m4r"}$username = $data['admin_name'];$password = md5($data['password']);$captcha = $data['captcha'];//调用验证器$validate = Loader::validate('Login');$data = ['username' => $username, 'password' => $password, 'captcha' => $captcha];//验证是否符合验证器里定义(验证码)的规范,不符合返回错误信息if (!$validate->check($data)) {return json($validate->getError());}//查询数据试库$where['admin_name'] = $username;$where['status'] = 1;$userInfo = Db::name('admin')->where($where)->find();if ($userInfo && $userInfo['password'] === $password) {
// 登录成功写入sessionSession::set('admin_id', $userInfo['id']);Session::set('admin_name', $userInfo['admin_name']);return json('jr');} else {return json('用户名或密码错误!');}} else {return $this->fetch('login');}}
验证器
class LoginValidate extends validate
{// 验证规则protected $rule = ['username|用户名' => 'require','password' => 'require','captcha' => 'require|checkCaptcha:null',];protected $message = ['captcha.require' => '验证码错误!', //验证码空的时候验证的它];protected function checkCaptcha($value) //验证码输入的进验证的它{$captcha = new Captcha();if ($captcha->check($value)) {return true;} else {return '验证码错误!';}}
}
修改密码
html
<div class="page-concent-div"><div class="layui-tab-content"><div class="layui-tab-item layui-show"><form class="layui-form form-container" action="{:url('password/passwordedit')}" method="post"><div class="layui-form-item"><label class="layui-form-label">原密码</label><div class="layui-input-block"><input type="password" name="password_origin" required lay-verify="required" placeholder="请输入原密码" class="layui-input" style="width:250px;"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input" style="width:250px;"></div></div><div class="layui-form-item"><label class="layui-form-label">再次输入</label><div class="layui-input-block"><input type="password" name="password_again" required lay-verify="required" placeholder="请再次输入密码" class="layui-input" style="width:250px;"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="*">保存</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div></div></div>
后台代码
class PasswordController extends BaseController
{public function passwordedit(){$admin_id = Session::get('admin_id');$data = input('post.');$admin = new AdminModel();$admin_info = $admin->where('id', $admin_id)->find();if ($data) {if ((md5($data['password_origin'])) == $admin_info['password']) {if ($data['password'] == $data['password_again']) {$md5_password = md5($data['password']);$result = AdminModel::where('id', $admin_id)->update(['password' => $md5_password]);if ($result) {return $this->success('修改成功啦!');} else {return $this->error('修改失败');}} else {return $this->error('再次输入不一致!');}} else {return $this->error('原密码输入错误!');}}return view();}
}
session失效后从新加载页面
exit('<script language="JavaScript">top.location.href="'.域名.'?s=/tous_login"</script>');
