网站建设要懂哪些技术,html6,幻灯片模板,做海淘的网站做海淘的网站目录
前言
1、验证码
1.1、引入pom
1.2、前端核心代码
1.3、后端核心代码
2、账户冻结
2.1、思路#xff1a;
2.2、核心代码示例#xff1a;
3、密码加密——加盐算法
3.1、思路#xff1a;
3.2、代码实现示例#xff1a;
4、小结#xff1a;展示我的项目
4…目录
前言
1、验证码
1.1、引入pom
1.2、前端核心代码
1.3、后端核心代码
2、账户冻结
2.1、思路
2.2、核心代码示例
3、密码加密——加盐算法
3.1、思路
3.2、代码实现示例
4、小结展示我的项目
4.1、后端代码
4.2、效果展示 前言 前端代码我只展示核心代码其他的代码需要小伙伴们自行编写哦~ 项目是Spring项目需要小伙伴们有一点点Spring基础~ 我这些实现方式只是一个参考并不是最优解~ 1、验证码 验证码这里我们使用的是easy-captcha对他感兴趣的伙伴可以自行查一下资料下面我只实现4位验证码有字母和数字组成的这种~
1.1、引入pom !-- 验证码 --dependencygroupIdcom.github.whvcse/groupIdartifactIdeasy-captcha/artifactIdversion1.6.2/version/dependency
1.2、前端核心代码
准备一个html:
div classrowinput typetext idauthCode classform-control nameverifyCode placeholder请输入验证码 requiredtrueimg classimgCode alt点击图片刷新 src/common/kaptcha onclickthis.src/common/kaptcha?dnew Date()*1
/div
说明
就是准备了一个input输入框供我们输入验证码准备一个图片显示我们的验证码重点要说的就是照片img标签中src的路径是一个URL也就是说这张照片的来源就是从这个URL来的点击照片时会触发onclick事件这个事件会改变该图片src的属性新的src为/common/kaptcha?dnew Date()*1这个表达式会生成一个新的日期时间戳并将其附加到图片的URL后面从而获取一个新的图片~ 【src中的URL由后端实现~】
1.3、后端核心代码
准备一个controller类
package com.example.demo.controller;import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.base.Captcha;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;Controller
RequestMapping(/common)
public class commonCotroller {GetMapping(/kaptcha)public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {httpServletResponse.setHeader(Cache-Control, no-store);httpServletResponse.setHeader(Pragma, no-cache);httpServletResponse.setDateHeader(Expires, 0);httpServletResponse.setContentType(image/gif);// 三个参数分别为宽、高、位数SpecCaptcha captcha new SpecCaptcha(150, 30, 4);// 设置字体captcha.setCharType(Captcha.FONT_9);// 验证码存入sessionhttpServletRequest.getSession().setAttribute(authCode, captcha.text().toLowerCase());// 输出图片流captcha.out(httpServletResponse.getOutputStream());}
}说明 到这里验证码的模块就实现完成了具体在登录时如何操作的下面第四点中会举例说明~ 2、账户冻结 2.1、思路 关于账户冻结我是在数据库设计中给用户表添加了两个字段状态state和冷却时间lTime。默认的state值为1默认的lTime为0。当用户每登录错误一次时给该用户的state加一当state大于3时表示该用户已经连续错误登录三次了该账户将被冻结冻结时间设置获取现在的时间戳加上30000换算成秒就是给当前时间加上30s在登录前先验证给账户是否被冻结了也就是查看当前时间戳是否小于该用户数据库中存储的冻结时间戳~ 2.2、核心代码示例 RequestMapping(/login)public AjaxResult login(HttpServletRequest request, String username, String password,String authCode) {//0.参数校验if(!StringUtils.hasLength(username) || username.length() 50) {return AjaxResult.fail(用户名输入违法请重新输入);}if(!StringUtils.hasLength(password) ||password.length() 10) {return AjaxResult.fail(密码输入违法请重新输入);}if(!StringUtils.hasLength(authCode)) {return AjaxResult.fail(验证码不能为空);}//1、校验验证码是否正确相关操作// ...//2、验证该用户的登录功能是否被冻结//2.1、先根据用户名查询出数据中的username的信息Userinfo userinfo userService.getUserExist(username);if(userinfo null) {return AjaxResult.fail(用户名或密码错误请重新输入~);}//2.2、查看该用户的登录功能是否被冻结了if(userinfo.getState() 3 userinfo.getLTime() System.currentTimeMillis()) {return AjaxResult.fail(登录已锁定请等待 (userinfo.getLTime() - System.currentTimeMillis())/1000 秒后重试);} else if(userinfo.getState() 3 userinfo.getLTime() System.currentTimeMillis()) {//放置state为1--时间过了解除冻结userinfo.setState(1);userService.stateOne(userinfo);}//3、对比密码是否正确相关操作// ...//3.3、可以正确登录将之间的state标记恢复原状userinfo.setState(1);userService.stateOne(userinfo);//4、可以正确登录后续操作// ....return AjaxResult.success(登陆成功);} 上述代码还是很好理解的我就不做过多解释了~ 3、密码加密——加盐算法 我们准备一个类这个类主要就是处理密码的加密和验证密码操作。 3.1、思路 1我们使用UUID生成一个随机盐值2密码加工1把密码和盐值加起来然后使用MD5哈希算法进行加密3密码加工2为了后续可以取出盐值从而来验证密码是否正确所以最终的密码盐值 $ 密码加工1 【这里是以字符串的形式拼接的】4密码验证先通过$符取出盐值再通过相同的加密方式加密验证新密码加密后的值是否与数据库中的值相等~ 3.2、代码实现示例 public class PasswordUtils {//密码加盐public static String encrypt(String password) {//1、生成一个32位的盐值String salt UUID.randomUUID().toString().replace(-,);//2、生成加盐后的密码并将盐值和加盐后的密码并在一起return splicing(password,salt);}//验证密码是否正确public static boolean check(String inputPassword,String finPassword) {//1、获取saltString salt finPassword.split(\\$)[0];//2、使用一样的盐值加密String inputFinPassword splicing(inputPassword,salt);if(inputFinPassword.equals(finPassword)) {return true;}return false;}//密码加盐的辅助方法private static String splicing(String password, String salt) {//1、使用md5生成加盐后的密码1String finpassword DigestUtils.md5DigestAsHex((salt password).getBytes());//2、返回最终密码【盐值 $ 密码1】return (salt $ finpassword);}
} 4、小结展示我的项目 上述重复的代码我就不展示了展示一下我的UserController类的实现吧~
4.1、后端代码
RestController
RequestMapping(/user)
public class UserController {Autowiredprivate UserService userService;RequestMapping(/login)public AjaxResult login(HttpServletRequest request, String username, String password,String authCode) {//0.参数校验if(!StringUtils.hasLength(username) || username.length() 50) {return AjaxResult.fail(用户名输入违法请重新输入);}if(!StringUtils.hasLength(password) ||password.length() 10) {return AjaxResult.fail(密码输入违法请重新输入);}if(!StringUtils.hasLength(authCode)) {return AjaxResult.fail(验证码不能为空);}//1、校验验证码是否正确HttpSession session request.getSession();//默认为true,有则获取无则会先新建再获取String trueAuthCode (String) session.getAttribute(authCode);if(!trueAuthCode.equalsIgnoreCase(authCode)) {return AjaxResult.fail(验证码输入错误);}//2、验证该用户的登录功能是否被冻结//2.1、先根据用户名查询出数据中的username的信息Userinfo userinfo userService.getUserExist(username);if(userinfo null) {return AjaxResult.fail(用户名或密码错误请重新输入~);}//2.2、查看该用户的登录功能是否被冻结了if(userinfo.getState() 3 userinfo.getLTime() System.currentTimeMillis()) {return AjaxResult.fail(登录已锁定请等待 (userinfo.getLTime() - System.currentTimeMillis())/1000 秒后重试);} else if(userinfo.getState() 3 userinfo.getLTime() System.currentTimeMillis()) {//放置state为1--时间过了解除冻结userinfo.setState(1);userService.stateOne(userinfo);}//3、对比密码是否正确if(!PasswordUtils.check(password,userinfo.getPassword())) {//3.1、如果密码错误则数据库中标记1userinfo.setState(userinfo.getState() 1);//给数据库中的state1userService.stateOne(userinfo);//3.2、错误次数达标设置冷却时间if(userinfo.getState() 3) {userinfo.setLTime(System.currentTimeMillis() 30000);userService.setLTime(userinfo);}return AjaxResult.fail(用户名或密码错误请重新输入~);}//3.3、可以正确登录将之间的标记恢复原状userinfo.setState(1);userService.stateOne(userinfo);//4、可以正确登录给session中存储给用户的信息-放置session信息session.setAttribute(AppVariable.USER_SESSION_KEY,userinfo);//5、返回登陆成功return AjaxResult.success(登陆成功);}
} 前端代码我就不展示了~ 大家自行发挥~~~
4.2、效果展示 好啦本期就到这里咯对效果展示中的弹窗感兴趣的伙伴可以看看持续关注我后续的动态会出一个简单的教程
