主要是通过表单提交访问数据库判断密码是否正确。没什么好说的,直接进入正文。
前置条件:耐性100%;IDEA2019;SSM框架;了解Ajax异步请求;Mysql5.7
数据库创建用户表
- phone字段是登录账号,最好加唯一约束
- deleteflag字段是记录该用户是否删除,数据保留一个月后通过初始化函数在数据库删除,一定程度减缓误删用户信息带来的问题;
- updatetime字段选择timestamp类型是方便数据更新时自动获取更新时间,在实际开发中时间戳挺重要的,方便数据清洗等其他操作
- email字段主要用于通过邮箱验证码找回密码(下篇会写),不用该功能可以不加该字段
login表(主要用于记录登录信息并且优先执行初始化函数,可跳过)
create trigger in_login_lsh
On Login
Before INSERT
begin
set new.loginid=getLSH('LG');
end
创建登录页面输入框
一个简单的表单,忽略我的css样式,主要是功能实现:账号、密码、登录按钮
<body style="text-align: center;" id="background">
<div id="login">
<img class="login-logo" src="images/timg.jpg">
<div id="form">
<fieldset>
<legend>饭店后台登陆界面</legend>
<form name="form1" action="user/login" method="post" id="form1">
<input type="text" name="phone" id="phone" class="login-input" placeholder="请输入账号"/><br/>
<input type="password" name="password" id="password" class="login-input" placeholder="请输入密码"/><br/>
<button id="btn1" class="login-button" type="button">登录</button><br/>
</form>
<a href="#" class="btn-link">忘记密码?</a>
</fieldset>
</div>
</div>
</body>
创建对应的实体类
这里用了**lombok插件**,省去了get/set方法;
包路径改成实际项目对应的路径
package com.qiang.domain;
import lombok.Data;
import java.sql.Timestamp;
/**
* @author Mr.锵
* date 2020-02-16
*/
@Data
public class User1 {
private String userid;
private String username;
private String phone;
private String password;
private String job;
private Integer deleteflag;
private Timestamp createtime;
private Timestamp updatetime;
private String email;
}
梳理登录流程
- 输入账号密码;
- 点击登录,系统判断账号密码是否为空;
- jsp页面ajax异步将账号密码发给Controller控制器;
- 控制器调用service业务层的方法查询有无该账号,该账号的密码是什么;
- 对应service方法的实现类调用dao访问数据库查询数据;
- dao通过账号(phone)查询数据库并将查到的密码(password)返回service;
- service将数据返回给controller控制器;
- 控制器比较表单提交的密码与返回的密码是否相同,相同则返回true,不相同则返回false;
- jsp页面接收异步返回的结果,false则弹窗“账号或密码不正确”,阻止表单提交,true则将表单提交到控制器;
- 或者,true则ajax请求控制器查询application对象“Count”里面有没有该账号,存在对应账号则弹窗拒绝登录,否则将表单提交到控制器(可跳过);
- 控制器限制只能post请求,防止通过地址栏直接访问
- 查询对应用户信息后调用service对应的Dao向数据库login表插入一条登录数据(可跳过);
- 获取application对象“Count”,将账号写入列表,列表加入“Count”中(可跳过);
- 跳转到系统主界面
创建Dao接口
package com.qiang.dao;
import com.qiang.domain.User1;
import org.apache.ibatis.annotations.*;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
* @author Mr.锵
* date 2020-02-16
*/
@Repository
public interface IUserDao {
/**
* 根据phone查询用户密码
* @param phone
* @return
*/
@Select("select password from user1 where phone=#{phone} and deleteflag=0")
String findPasswordByphone(String phone);
}
login表的Dao(可跳过)
package com.qiang.dao;
import org.apache.ibatis.annotations.Insert;
import org.springframework.stereotype.Repository;
/**
* @author Mr.锵
* date 2020-04-02
*/
@Repository
public interface ILoginDao {
/**
* 新增登录记录
* @param userid
*/
@Insert("insert into login(userid)values(#{userid})")
void savelogin(String userid);
}
创建Service接口及实现类(仅用户表)
接口
package com.qiang.service;
import com.qiang.domain.User1;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @author Mr.锵
* date 2020-02-16
*/
public interface IUserService {
/**
* 根据phone查询用户密码
* @param phone
* @return
*/
String findPasswordByphone(String phone);
}
实现类
package com.qiang.service.impl;
import com.qiang.dao.IUserDao;
import com.qiang.domain.User1;
import com.qiang.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* @author Mr.锵
* date 2020-02-16
* user1表业务层
*/
@Service("userService")
public class IUserServiceImpl implements IUserService{
@Autowired
private IUserDao userDao;
@Override
public String findPasswordByphone(String phone) {
return userDao.findPasswordByphone(phone);
}
创建控制器
package com.qiang.controller;
import com.qiang.domain.*;
import com.qiang.service.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;
/**
* @author Mr.锵
* date 2020-02-16
*/
@Controller
@RequestMapping("/user")
public class UserController{
@Autowired
private IUserService userService;
@Autowired
private ILoginService loginService;
/**
* 通过phone查找密码
*/
@RequestMapping("/findByPhone")
public @ResponseBody boolean findByPhone(@RequestBody User1 user) {
String passwordByphone = userService.findPasswordByphone(user.getPhone());
if(user.getPassword().equals(passwordByphone)){
System.out.println("查找成功");
return true;}
else{
System.out.println("查找失败");
return false;
}
}
/**
* 登录操作
*/
@RequestMapping(value = {"/login"},method = RequestMethod.POST)
public ModelAndView login(String phone, HttpSession httpSession) {
System.out.println("表现层:密码正确,登录。。。");
ModelMap modelMap=new ModelMap();
//调用service的方法
List<User1> allByPhone = userService.findAllByPhone(phone);
for(User1 user1:allByPhone){
loginService.savelogin(user1.getUserid());
}
ArrayList<String> list = new ArrayList<String>();
if(httpSession.getServletContext().getAttribute("Count")!=null){
list=(ArrayList<String>)httpSession.getServletContext().getAttribute("Count");}
list.add(list.size(),phone);
httpSession.getServletContext().setAttribute("Count",list);
modelMap.addAttribute("uphone",phone);
ModelAndView mv=new ModelAndView("manager",modelMap);
return mv;
}
/**
* 查看application对象中有没有该账号
*/
@RequestMapping("/checkapplication")
public @ResponseBody boolean checkapplication(HttpSession httpSession,@RequestParam String phone){
ArrayList<String> list = new ArrayList<String>();
if(httpSession.getServletContext().getAttribute("Count")!=null){
list=(ArrayList<String>)httpSession.getServletContext().getAttribute("Count");}
boolean equals = list.contains(phone);
return equals;
}
}
JavaScript实现异步请求
<Script>
//页面加载,绑定单击事件
$(function () {
var flag=false;
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#btn1").trigger("click");
}
});
$("#btn1").click(function () {
if($("#phone").val()==""){
alert("账号不能为空");
$("#phone").focus();
flag=false;
return flag;
}
else if ($("#password").val() == "") {
alert("密码不能为空");
$("#password").focus();
flag=false;
return flag;
}
//发送ajax请求
$.ajax({
// 编写json格式,设置属性和值
url:"user/findByPhone",
contentType:"application/json;charset=UTF-8",
data:"{\"phone\":\""+$("#phone").val()+"\",\"password\":\""+$("#password").val()+"\"}",
dataType:"json",
type:"post",
success:function(result){
// data服务器端响应的json的数据,进行解析
if(result==true)
{$.ajax({
url:'user/checkapplication',
datatype : "json",
type : "post",
data:{
phone:$("#phone").val()
},
success:function(res){
if(res==false){
$("#form1").submit();return true;
}else{
alert("该账号已登录");return false;
}
}
})
} else if(result==flag)
{alert("账号或密码不正确");return false;}
}
});
});
});
</Script>
结尾
简单表单提交登录功能+login表记录每次登录信息且优先执行初始化函数+application对象实现在线用户唯一及在线用户统计;
各位盆友按需了解,因为存储用户数的application对象是列表,所以在线统计用户数异步请求查询,控制器返回列表长度既是在线用户数
觉得有用点个赞呗~
下一篇写一下如何通过邮箱发送验证码修改密码