基于layui框架的登录验证

开发工具：idea,tomcat，ssm框架，以及引入的layui
一些关于框架的搭建在此略过，以后可能会发布一些相关文章
这里只改变了背景图片,是一个现成的页面

//form表单部分代码
<form class="layui-form"><div class="login_face"><img src="/sources/lay/images/face.jpg" class="userAvatar"></div><div class="layui-form-item input-item"><label for="userName">用户名</label><input type="text" placeholder="请输入用户名" autocomplete="off" id="userName" name="username" class="layui-input" lay-verify="required"></div><div class="layui-form-item input-item"><label for="password">密码</label><input type="password" placeholder="请输入密码" autocomplete="off" id="password" name="password" class="layui-input" lay-verify="required"></div><div class="layui-form-item input-item" id="imgCode"><label for="code">验证码</label><input type="text" placeholder="请输入验证码" autocomplete="off" id="code" name="code" class="layui-input" lay-verify="required"><img src="/user/getcode" onclick="this.src=this.src+'?'" id="codehz"></div><div class="layui-form-item"><button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button></div>
</form>

前端页面主要对三个框的name属性做了规范，以便controller入参自动封装，分别是username,password,和code
首先编写了一个工具类ResultObject，用来封装校验后的结果信息，属性code大小表示查询状态，msg则是弹出信息提示，-1，0，1三种状态分别表示验证码错误，无此用户，用户查询成功

这里编写controller，业务都在service里面处理

@Controller
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;/*登录验证*/@RequestMapping("/login")@ResponseBodypublic ResultObject login(UserVo user, HttpServletRequest request, HttpServletResponse response){ResultObject resultObject=userService.login(user, request, response);return resultObject;}/*获取验证码*/@RequestMapping("/getcode")public void getCode(HttpServletRequest request, HttpServletResponse response) throws IOException {userService.getCode(request,response );}}

service代码

@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UserDao userDao;@Overridepublic ResultObject login(UserVo user, HttpServletRequest request, HttpServletResponse response) {String code=user.getCode();//拿到验证码String session_code=request.getSession().getAttribute("code").toString();//拿到存储在服务器的校验验证码String msg="";Integer status_code=0;if(code.equals(session_code)){//验证码正确List<User> login = userDao.login(user);if(login.size()>0){msg="登陆成功";status_code=1;}else{msg="登陆失败";status_code=0;}}else {msg="验证码错误";status_code=-1;}/*将旧验证码失效*/request.getSession().setAttribute("code", "");ResultObject resultObject = new ResultObject(status_code,msg);return resultObject;}@Overridepublic void getCode(HttpServletRequest request, HttpServletResponse response) throws IOException {/*生成验证码*/ICaptcha captcha= CaptchaUtil.createLineCaptcha(116, 36);/*把码值存放在session*/request.getSession().setAttribute("code",captcha.getCode() );/*图片回写到前端*/captcha.write(response.getOutputStream());}
}

其中包括两个方法，分别对应controller中对service的调用,login方法拿到前台的用户数据，先与session中存放的验证码进行比较，一致后再进行数据库查询操作，最后返回一个ResultObject对象，包含用户登录状态，同时将session里存放的当前验证码设置失效（否则此验证码将长期有效，容易遭到破解），getcode方法则是直接参考链接的插件htool
直接通过输出流将验证码图片返回前台

login前台对应的js文件

 //登录按钮form.on("submit(login)",function(data){var _this=$(this);$(this).text("登录中...").attr("disabled","disabled").addClass("layui-disabled");$.ajax({url:'/user/login',type:"get",data:data.field,success:function(data){/*验证码通过*/if(data.code!=-1){/*查找到用户信息*/if(data.code>0){layer.msg(data.msg,function () {window.location.href = "/index.jsp";})}else{//未查找到信息layer.msg(data.msg);$("#codehz").click();//刷新验证码/*将按钮恢复为可登录状态*/_this.text("登录").attr("disabled",false).removeClass("layui-disabled");}}else{//验证码输入错误则重新生成layer.msg(data.msg);_this.text("登录").attr("disabled",false).removeClass("layui-disabled");$("#codehz").click();//刷新验证码}}})return false;})

值得一提的是，需要在用户登录失败后将登录按钮重置为可登录状态，同时需要在登录失败后再次发起getcode请求获取新的验证码（方法：在图片src属性增加’?'以保证请求更新，其实就是带假参数，这里采用点击事件是则利用了前台jsp里设置的点击时间更新请求的写法）

基于layui框架的登录验证相关推荐

OA系统八：用户登录一：基于LayUI框架开发登录页；
本篇博客就需要明白三点: (1)前端的东西,贵在[没事多试试]:多试试,看看效果,反复多次,总能看到希望的效果啦.没什么意思,没必要每个细节都深记:在实际中遇到一个业务的时候,多看官方文档的例子,多试 ...
基于LayUI框架的Jsp日记本系统
基于LayUI框架的Jsp日记本系统先看几张效果图下载地址: 链接: https://pan.baidu.com/s/1Aa_qUcpi2_B4-QIpl4FWGw 提取码: 5r5k
基于Springboot框架的登录注册页面
今天正式开始第一篇文章创作,很高兴大家能够见证我的成长,也祝愿大家早日升职加薪哈. 首先声明,本人是技术小白,我只做我自己学习的总结.如果有技术上的错误,误导了大家,希望大家能及时做出补充指正. 下面 ...
基于ThinkPHP框架下登录登出权限控制(一).
后台管理员表中做一个加盐处理 md5双从加密: function encrypt_password($password){//加盐$salt = '98765435678908bnjuiygvbnk ...
淘宝账号基于OAuth2.0的登录验证授权登陆第三方网站
首先得有一个注册的appkey和App Secret 该流程分三个步骤: 第一步:通过用户授权获取授权码Code: 第二步:用上一步获取的Code和应用密钥(AppSecret)通过Https P ...
基于Layui框架的NET后台管理系统
类图: CategoryController.cs using System.Data.Entity; using System.Data.Entity.Infrastructure; using S ...
mysql -ss -e_课内资源 - 基于ssm框架和mysql的网上选课系统
一.需求分析 1.1 业务需求随着社会的发展,学生的人数和课程种类急速增加,传统的选课管理模式已经无法满足当前的实际需求,为此我们开发了学生选课管理系统.本人结合学生选课管理的实际需要,完成了对学生 ...
轻量级的layui框架后台模板
基于layui框架与Vue.js构建,轻量不复杂简洁不简单.QAdmin 是一个轻量级的layui后台模板.主要有:用户管理.用户列表.添加用户.文章管理.栏目管理.文章管理.系统设置.网站设置.友 ...
基于SSH2框架Struts2拦截器的登录验证实现来自菠萝大象
本文为菠萝大象原创,如要转载请注明出处. 通过之前的 Struts2.1.6+Spring2.5.6+Hibernate3.3.1全注解实例详解系列文章,我们已经成功将这三种框架整合到了一起, 这次大 ...

基于layui框架的登录验证

基于layui框架的登录验证

基于layui框架的登录验证相关推荐

最新文章

热门文章