SpringBoot+jquery 登入+驗證碼校驗
阿新 • • 發佈：2018-12-25
展示頁面
首先我貼上前端程式碼
<div class="container"> <div class="col-md-4 location"> <div class="form-signin text-center"> <h2 class="form-signin-heading">請登入</h2> <label for="inputUserName" class="sr-only">使用者名稱</label> <input type="text" id="username" class="form-control s-margin-2" placeholder="使用者名稱" required="required" autofocus> <label for="inputPassword" class="sr-only">密碼</label> <input type="password" id="password" class="form-control s-margin-1" placeholder="密碼" > <input class="form-control" type="text" id="yan" placeholder="請輸入驗證碼" > <a href="javascript:void(0);" title="點選更換驗證碼"> <img id="img" alt="點選更換" title="點選更換" onclick="refresh()" src="/yan/getVerify" /> </a> <button class="btn btn-lg btn-primary btn-block s-margin-2" id="login">登入</button> </div> </div> </div>
點選驗證碼就進行更換驗證碼
更換驗證的js程式碼
function refresh() {
document.getElementById('captcha_img').src="/yan/getVerify?"+Math.random();
}
然後是jquery的ajax提交到後端
$(function(){ $("#login").bind("click",function(){ var username=document.getElementById("username").value; var password=document.getElementById("password").value; var yan=document.getElementById("yan").value; $.ajax({ type:'Get', url:comm.ServerUrl+"admins/login", data:{ username:username, password:password, yan:yan }, contentType:'application/json', dataType : 'json', success:function(data){ console.log(data); if(data.status == 200){ window.location.href=comm.ServerUrl+"admin/index"; }else{ alert(data.msg); } } }); }); });
前端整體就到這裡
思路就是
獲取username、password、yan輸入框為id的內容 然後傳給後端進行校驗
驗證碼的思路
生成驗證碼
然後存放到session
然後取出驗證碼，和前端傳過來的進行校驗
先貼上驗證碼工具程式碼 這個驗證碼我也忘了在哪裡找的
/** * 驗證碼生成工機 * @author binglian * */ public class RandomValidateCodeUtil { public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key private String randString = "0123456789";//隨機產生只有數字的字串 如果要其他字母數字 自己在裡面加 private int width = 95;// 圖片寬 private int height = 25;// 圖片高 private int lineSize = 40;// 干擾線數量 private int stringNum = 4;// 隨機產生字元數量 private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class); private Random random = new Random(); /** * 獲取字型 */ private Font getFont() { return new Font("Fixedsys", Font.CENTER_BASELINE, 18); } /** * 獲得顏色 */ private Color getRandColor(int fc,int bc){ if(fc>255){ fc=255; } if(bc>255){ bc=255; } int r=fc+random.nextInt(bc-fc-16); int g=fc+random.nextInt(bc-fc-14); int b=fc+random.nextInt(bc-fc-18); return new Color(r, g, b); } /** * 生成隨機圖片 */ public void getRandcode(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); // BufferedImage類是具有緩衝區的Image類,Image類是用於描述影象資訊的類 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR); Graphics g = image.getGraphics();// 產生Image物件的Graphics物件,改物件可以在影象上進行各種繪製操作 g.fillRect(0, 0, width, height);//圖片大小 g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字型大小 g.setColor(getRandColor(110, 133));//字型顏色 //繪製干擾線 for (int i = 0; i <= lineSize; i++) { drowLine(g); } // 繪製隨機字元 String randomString = ""; for (int i = 1; i <= stringNum; i++) { randomString = drowString(g, randomString, i); } logger.info(randomString); //將生成的隨機字串儲存到session中 session.removeAttribute(RANDOMCODEKEY); session.setAttribute(RANDOMCODEKEY, randomString); g.dispose(); try { // 將記憶體中的圖片通過流動形式輸出到客戶端 ImageIO.write(image, "JPEG", response.getOutputStream()); } catch (Exception e) { logger.error("將記憶體中的圖片通過流動形式輸出到客戶端失敗>>>> ", e); } } /** * 繪製字串 */ private String drowString(Graphics g, String randomString, int i) { g.setFont(getFont()); g.setColor(new Color(random.nextInt(101), random.nextInt(111), random .nextInt(121))); String rand = String.valueOf(getRandomString(random.nextInt(randString .length()))); randomString += rand; g.translate(random.nextInt(3), random.nextInt(3)); g.drawString(rand, 13 * i, 16); return randomString; } /** * 繪製干擾線 */ private void drowLine(Graphics g) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(13); int yl = random.nextInt(15); g.drawLine(x, y, x + xl, y + yl); } /** * 獲取隨機的字元 */ public String getRandomString(int num) { return String.valueOf(randString.charAt(num)); } }
生成驗證碼controller CodeController.java
@RestController
@RequestMapping("/yan")
@Slf4j
public class CodeController {
private static final Logger logger=LoggerFactory.getLogger(CodeController.class);
@RequestMapping(value="/getVerify")
public void getVerif(HttpServletRequest request,HttpServletResponse response){
try {
response.setContentType("image/jpeg");//設定相應型別,告訴瀏覽器輸出的內容為圖片
response.setHeader("Pragma", "No-cache");//設定響應頭資訊，告訴瀏覽器不要快取此內容
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expire", 0);
RandomValidateCodeUtil randomValidateCode = new RandomValidateCodeUtil();
randomValidateCode.getRandcode(request, response);//輸出驗證碼圖片方法
} catch (Exception e) {
logger.error("獲取驗證碼失敗>>>> ", e);
}
}
}然後我們現在接下來該實現賬戶的登入 驗證碼這些校驗了
我們先實現登入的業務實現
AdminService介面
public interface AdminService {
/**
* 判斷使用者名稱是否存在
* @param username
* @return
*/
public boolean queryUsernameIsExist(String username);
/**
* 查詢使用者是否匹配成功
* @param username
* @param pwd
* @return
*/
public Admin queryUserForLogin(String username,String password);
}AdminServiceImpl實現介面
@Service
public class AdminServiceImpl implements AdminService{
@Autowired
private AdminMapper AdminMapper;
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public boolean queryUsernameIsExist(String username) {
Admin user=new Admin();
user.setUsername(username);
Admin result=AdminMapper.selectOne(user);
return result !=null ? true:false;
}
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public Admin queryUserForLogin(String username, String password) {
Example example=new Example(Admin.class);
Criteria criteria=example.createCriteria();
criteria.andEqualTo("username", username);
criteria.andEqualTo("password", password);
Admin result=AdminMapper.selectOneByExample(example);
return result;
}
}
然後也就是最後的控制層 api 這裡的api路由地址就是jQuery提交的地址
AdminUserController
@RestController
@RequestMapping("admins")
public class AdminUserController {
@Autowired
private AdminService adminService;
@GetMapping("/login")
public BinglianJSONResult login(@RequestParam(name="yan") String yan,
@RequestParam(name="username") String username,
@RequestParam(name="password") String password,
HttpSession session) throws Exception{
//1.判斷使用者密碼是否為空
if(StringUtils.isBlank(username)
|| StringUtils.isBlank(password)){
return BinglianJSONResult.errorMsg("使用者名稱和密碼不能為空");
}
//判斷驗證碼不能為空
if(StringUtils.isBlank(yan)){
return BinglianJSONResult.errorMsg("驗證碼不能為空");
}
//從session中獲取隨機數
String random=(String) session.getAttribute("RANDOMVALIDATECODEKEY");
if(!yan.equalsIgnoreCase(random)){
return BinglianJSONResult.errorMsg("驗證碼錯誤");
}
boolean usernameIsExist=adminService.queryUsernameIsExist(username);
Admin Result=null;
if(usernameIsExist){
Result=adminService.queryUserForLogin(username,
MD5Utils.getMD5Str(password));
if(Result ==null){
return BinglianJSONResult.errorMsg("使用者名稱或密碼不正確...");
}
}
AdminVO adminVO=new AdminVO();
BeanUtils.copyProperties(Result, adminVO);
return BinglianJSONResult.ok(adminVO);
}
}