laravel使用ajax登录，和自定义生成验证码

news/2025/1/12 4:49:40/

使用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>

 


http://www.ppmy.cn/news/1270831.html

相关文章

VRRP协议详解

VRRP协议详解

目录 一、基础概念 1、概念 2、VRRP的基本结构 状态机 二、VRRP主备备份工作过程 1、备份工作过程 2、VRRP的负载分担工作 三、实验 一、基础概念 1、概念 VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的I…
阅读更多...
Vue 子传父 组件传参 defineEmits

Vue 子传父 组件传参 defineEmits

defineEmits 属性&#xff1a;用于创建自定义事件&#xff0c;接收子组件传递过来的数据。 注意&#xff1a;如果自定义事件的名称&#xff0c;和原生事件的名称一样&#xff0c;那么只会触发自定义事件。 defineEmits 仅适用于 setup 语法糖&#xff0c;其它写法请见&#x…
阅读更多...
oracle怎么导入dmp文件？？？？？？

oracle怎么导入dmp文件？？？？？？

目录 oracle怎么导入dmp文件&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 先看&#xff1a; 方法一&#xff1a;【推荐】 winR输入 输入&#xff1a; 检验&#xff1a; 导入成功&#xff01; 方法二&#xff1a; 直接在 PLSQL Developer…
阅读更多...
vue整个页面可以拖拽导入文件

vue整个页面可以拖拽导入文件

效果图 原理与源码 我们这里的思路是用ant组件库的upload组件&#xff0c;就是如下这个 用这个包裹住所有页面&#xff0c;你可以是包裹住App.vue&#xff0c;或者是你的homepage。但是这个涉及到一个问题&#xff0c;就是我们现在确实是可以拖拽导进来文件了&#xff0c;但是…
阅读更多...
克隆虚拟环境

克隆虚拟环境

conda虚拟环境 克隆clone 在服务器上想要使用别人搭好的环境&#xff0c;但是又怕自己对环境的修改更新会影响他人的使用&#xff0c;这个时候可以使用conda命令进行复制环境。 首先假设已经安装了Anaconda。 根据已有环境名复制生成新的环境 1、假设已有环境名为A&#xff0c…
阅读更多...
Smartgit许可证文件

Smartgit许可证文件

不知道为啥&#xff0c;还没到30天&#xff0c;或者安装完一打开就要求许可证文件。 1、打开“运行”或使用快捷键 windowsR ,输入 %APPDATA%\syntevo\SmartGit 2、进入对应版本 3、删除license文件和preferences文件&#xff0c;重新运行smartGit 4、同意条款并选择免费30天&…
阅读更多...
Peter算法小课堂—简单建模（3）

Peter算法小课堂—简单建模（3）

国王的奖赏系列 国王的奖赏1 题目描述&#xff1a; 你作为战斗英雄得到国王的奖赏&#xff0c;可以在地图上选一块土地。地图里共n*m格土地&#xff0c;第x行第y列的土地格子里标记着d[x][y]的整数价值&#xff0c;可能出现负数。国王让你选择若干列土地&#xff0c;只要是连…
阅读更多...
go-zero开发入门之网关往rpc服务传递数据2

go-zero开发入门之网关往rpc服务传递数据2

go-zero 的网关服务实际是个 go-zero 的 API 服务&#xff0c;也就是一个 http 服务&#xff0c;或者说 rest 服务。http 转 grpc 使用了开源的 grpcurl 库&#xff0c;当网关需要往 rpc 服务传递额外的数据&#xff0c;比如鉴权数据的时候&#xff0c;通过 http 的 header 进行…
阅读更多...
最新文章

Copyright @ 2022~2023