使用larave框架操作ajax发送get请求，和自义定验证码
1. 后端登录代码
<?phpnamespace CriusWeb\FzUserAdmin\Http\Controllers;use App\Models\Admin;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\Cache;class LoginController extends Controller
{/*** 登录界面*/public function login(){return view('fzuseradmin::login.index');}/*** 处理登录*/public function checkLogin(Request $request){$admin_name = trim($request->input('admin_name'));$admin_password = trim($request->input('admin_password'));$code = trim($request->input('code'));$captchaCode = $request->session()->get('fzUserAdminCaptcha');if ($code != $captchaCode) {return response()->json(['msg' => '验证码错误', 'code' => 400]);}$admin = Admin::where('admin_name', $admin_name)->first();if (!$admin) {return response()->json(['msg' => '账号不存在', 'code' => 400]);}if ($admin->admin_gid != 25) {return response()->json(['msg' => '此账号暂无权限', 'code' => 400]);}if (md5($admin_password) != $admin->admin_password) {return response()->json(['msg' => '密码错误', 'code' => 400]);}$array = array();$array['admin_name'] = $admin->admin_name;$array['admin_id'] = $admin->admin_id;$array['admin_login_time'] = time();$array['admin_gid'] = $admin->admin_gid;$request->session()->put('fzUserAdminInfo', $array);Admin::where('admin_id', $admin->admin_id)->update(['admin_login_time' => time(),'admin_login_num' => $admin->admin_login_num + 1,]);$request->session()->forget('fzUserAdminCaptcha');return response()->json(['msg' => '登录成功', 'code' => 200]);}/*** 图像验证码*/public function captcha(Request $request){session_start();header("Content-type: image/png");$width = 100; //宽度$height = 40; //高度$length = 4; //位数$code = '';for ($i = 0; $i < $length; $i++) {$code .= rand(0, 9);}//存验证码$request->session()->put('fzUserAdminCaptcha', $code);$image = imagecreatetruecolor($width, $height);$bgColor = imagecolorallocate($image, 255, 255, 255);imagefill($image, 0, 0, $bgColor);//打印验证码$font = 12;for ($i = 0; $i < $length; $i++) {$x = $width / ($length + 1) * ($i + 1) + rand(-5, 5);$y = $height / 2 - $font + rand(-5, 5);$color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));imagestring($image, $font, $x, $y, $code[$i], $color);}//随机线条干扰8for ($i = 0; $i < 8; $i++) {$x1 = rand(0, $width);$y1 = rand(0, $height);$w2 = rand(0, $width);$h2 = rand(0, $height);$color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));imageline($image, $x1, $y1, $w2, $h2, $color);}//随机噪点80for ($i = 0; $i < 80; $i++) {$x = rand(0, $width);$y = rand(0, $height);$color = imagecolorallocate($image, rand(0, 120), rand(0, 120), rand(0, 120));imagesetpixel($image, $x, $y, $color);}//输出图片并销毁内存imagepng($image);imagedestroy($image);}/*** 退出登录*/public function logout(Request $request){$request->session()->forget('fzUserAdminInfo');return response()->json(['msg' => '退出登陆成功', 'code' => 200]);}}
2. 前端界面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="csrf-token" content="{{ csrf_token() }}"><title></title><style>* {margin: 0;padding: 0;}.login-box {width: 100%;height: 100vh;background-image: url("{{fzuser_admin('/images/bg1.jpg')}}");background-size: cover;background-position: 50%;position: relative;}.login-box-content {width: 400px;position: absolute;top: 30%;right: 20%;background: #fff;border-radius: 10px;box-shadow: 0px 0px 20px #9AB6F6;padding-bottom: 20px;}.yzm {width: 100px;height: 38px;margin-top: 30px;margin-right: 15px;}.login-box-title {width: 100%;height: 60px;text-align: center;line-height: 60px;color: #000;font-size: 16px;border-bottom: 1px solid #f2f2f2;}.input-item {width: calc(100% - 30px);margin: 0 15px;margin-top: 30px;font-size: 16px;height: 40px;box-sizing: border-box;padding-left: 15px;border-radius: 5px;outline: none;border: 1px solid #9AB6F6;}.input-item2 {width: calc(100% - 150px);margin: 0 15px;margin-top: 30px;font-size: 16px;height: 40px;box-sizing: border-box;padding-left: 15px;border-radius: 5px;outline: none;border: 1px solid #9AB6F6;}.denglu-btn {width: calc(100% - 30px);margin: 0 15px;margin-top: 40px;height: 40px;background: #409eff;color: #fff;border: none;border-radius: 5px;cursor: pointer;}.login-bottom {width: 400px;position: absolute;right: 10%;top: calc(20% + 410px);line-height: 30px;font-size: 16px;color: #757575;}.jj-box {position: absolute;top: 8%;right: calc(10% + 600px);color: #333;font-weight: bold;font-size: 23px;}.login-bottom img {width: 50px;height: 50px;border-radius: 8px;}</style><script src="{{fzuser_admin('/js/jquery-3.1.1.min.js')}}"></script></head>
<body>
<div class="login-box"><div class="login-box-content"><div class="login-box-title">欢迎登录</div><input type="text" name="admin_name" id="admin_name" class="input-item" placeholder="请输入账号"><input type="password" name="admin_password" id="admin_password" class="input-item" placeholder="请输入密码"><div style="width:100%;display:flex;flex-direction: row;align-items: center;justify-content: space-between;"><input type="text" name="code" id="code" class="input-item2" placeholder="请输入图形验证码"><img src="{{lurl('/app/fzuser_admin/captcha')}}" alt="" id="yzmImg" class="yzm"onclick="this.src='{{lurl("/app/fzuser_admin/captcha")}}?'+Math.random()"></div><button class="denglu-btn" onclick="getLogin()">登录</button></div>
</div><script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
<script>function getLogin() {var admin_name = $("#admin_name").val();var admin_password = $("#admin_password").val();var code = $("#code").val();if (!admin_name) {layer.msg('请输入账号');return false;}if (!admin_password) {layer.msg('请输入密码');return false;}if (!code) {layer.msg('请输入验证码');return false;}$.ajax({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},url: '{{lurl('/app/fzuser_admin/checkLogin')}}',type: 'get',data: {"admin_name": admin_name,"admin_password": admin_password,"code": code},dataType: 'json',success: function (res) {if (res.code == 400) {layer.msg(res.msg);return false;} else {layer.msg(res.msg);window.location.href = "{{lurl('/app/fzuser_admin/')}}"}}})}
</script>
</body>
</html>
 私有化部署-实现 binlog 中间件适配)
