SSM项目store_SSM_v1 02注册功能
文章目录
1 注册
1.1 数据库和tb_user表设置
新建数据库store2021sys和tb_user表，属性如下：
1.2 返回注册页面register.html
controller包里新建 UserController 类
package com.qst.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
//用户模块
@Controller
@RequestMapping("/user")//访问时要加上一级目录/user
public class UserController {
//返回注册页面
//@RequestMapping(value = "/reg",method = RequestMethod.GET)
//spring4.3以后提供了简单的租注解方式，等于上面的注解
@GetMapping("/reg")
public String reg(){
return "web/register";// 默认使用转发/web/register.html
}
}
1.3 检查用户名是否可用
输入名字检查用户名是否可用，可用提示绿色信息，不可用提示红色信息。
按数据库属性的如下属性封装 BasePojo 类
package com.qst.pojo;
import java.util.Date;
public class BasePojo {
private Date createTime;
private Date modifyTime;
private String CreateUser;
private String modifiedUser;
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Date getModifyTime() {
return modifyTime;
}
public void setModifyTime(Date modifyTime) {
this.modifyTime = modifyTime;
}
public String getCreateUser() {
return CreateUser;
}
public void setCreateUser(String createUser) {
CreateUser = createUser;
}
public String getModifiedUser() {
return modifiedUser;
}
public void setModifiedUser(String modifiedUser) {
this.modifiedUser = modifiedUser;
}
@Override
public String toString() {
return "BasePojo{" +
"createTime=" + createTime +
", modifyTime=" + modifyTime +
", CreateUser='" + CreateUser + '\'' +
", modifiedUser='" + modifiedUser + '\'' +
'}';
}
}
按数据库属性的将所有属性封装 User 类继承之前的BasePojo 类
package com.qst.pojo;
import java.util.Date;
public class User extends BasePojo{
private Integer uid;
private String username;
private String password;
private String salt;
private String tel;
private String email;
private String sex;
private String avatar;
private Integer isDelete;
public Integer getUid() {
return uid;
}
public void setUid(Integer uid) {
this.uid = uid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSalt() {
return salt;
}
public void setSalt(String salt) {
this.salt = salt;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getEmail() {
return email;
}
public void setEamil(String email) {
this.email = email;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
public Integer getIsDelete() {
return isDelete;
}
public void setIsDelete(Integer isDelete) {
this.isDelete = isDelete;
}
@Override
public String toString() {
return "User{" +
"uid=" + uid +
", username='" + username + '\'' +
", password='" + password + '\'' +
", salt='" + salt + '\'' +
", tel='" + tel + '\'' +
", email='" + email + '\'' +
", sex='" + sex + '\'' +
", avatar='" + avatar + '\'' +
", isDelete=" + isDelete +
'}';
}
}
给前端注册页面的表单的 input 标签内加
id = “username”
前端写JS语句，使用ajax请求
<script>
//页面加载完成后写法
$(function(){
//给用户名输入框输入添加一个事件，失去焦点事件blur()
$("#username").blur(function (){//id=username
//获取用户名，将用户名发给后台进行验证，使用Ajax
//Ajax是用来向服务端发异步请求，实现页面局部刷新
var username = $("#username").val();
//if判断用户名是否为空，弹出弹框，返回空
if (username == null || username === ''){
alert("请填写用户名");
return ;
}
var url = "/user/checkName";
var param = {"username":username};
//发送Ajax请求
$.ajax({
"url":url,//向服务端请求地址
"type":"post",//请求类型 get或post
"dataType":"json",//服务端返回给前端页面的数据格式类型
"data":param,//向服务端提交参数（提交的数据）
success:function (data){//表示回调函数，当前请求执行完毕，服务端返回数据后执行该函数
if (data.state == 200){
$("#sp").html(data.msg);
$("#sp").css("color","green");
}else{
$("#sp").html(data.msg);
$("#sp").css("color","red");
}
}
});
});
});
//还可以用
// $(document).ready(function (){});
</script>
UserController类中的 user 模块里
//检查注册时的用户名
@PostMapping("/checkName")
@ResponseBody
public Map<String,Object> checkName(String username){
Map<String,Object> map = userService.findUserByUserName(username);
return map;
}
UserMapper.xml里写SQL语句
<!--
根据用户名查找当前用户信息
如果传入的是一个参数，比如Integer String 那么parameterType这个属性可以不写
-->
<select id="checkName" resultType="User" parameterType="java.lang.String">
select uid,username,password,salt,is_delete isDelete from tb_user where username=#{username}
</select>
mapper包里新建UserMapper接口
package com.qst.mapper;
import com.qst.pojo.User;
//用户模块持久层接口
public interface UserMapper {
//检查用户名是否被占用
public User checkName(String username);
}
service包里新建UserService接口
package com.qst.service;
import java.util.Map;
public interface UserService {
//根据用户名查询当前用户信息
Map<String,Object> findUserByUserName(String username);
}
service包里新建servicelmpl包，新建Userservicelmpl类
package com.qst.service.serviceImpl;
import com.qst.mapper.UserMapper;
import com.qst.pojo.User;
import com.qst.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@Service//表示当前类是业务层 表示这个类有Spring容器进行管理
public class UserServiceImpl implements UserService {
@Autowired//自动装配 注入
private UserMapper userMapper;//将持久层注入到业务层
@Override
public Map<String ,Object> findUserByUserName(String username){
Map<String,Object> map = new HashMap<>();
//判断参数 前端已做
//将参数传给持久层
System.out.println(username);
//User user = null;
/*try {
} catch (Exception e){
}*/
User user = userMapper.checkName(username);
//对查询到的数据进行判断
System.out.println(user);
if (user != null){//用户名不可用，被占用
map.put("state",201);
map.put("msg","用户名被占用");
return map;
}
map.put("state",200);
map.put("msg","用户名可用");
return map;
}
}
1.4 密码和确认密码进行匹配
密码和确认密码进行匹配，点击注册，上传用户名和密码（发送请求，用户名和密码插入到数据库)。
在前端进行密码验证。
给密码的input标签加入 id=“password”
给确认密码的input标签加入 id=“confirmPassword”
将之前的检查注册时的用户名用一个函数checkUserName()封装。
$(function(){
//检查注册用户名
checkUserName();
});
function checkUserName(){
//里面写上之前检查注册用户名的代码
}
检查密码是否一致的函数和注册跳转的函数
$(function(){
//检查注册用户名
checkUserName();
//页面加载完成后给确认密码的输入框事务焦点事件
checkConfirmPwd();
//注册
doReg();
});
给确认密码下面加span id=“sp1”
//检查密码是否一致
function checkConfirmPwd() {
//确认密码输入框添加失去焦点事件
$("#confirmPassword").blur(function(){
//取出密码和确认密码的值
var password=$("#password").val();
var confirmPassword=$("#confirmPassword").val();
if(password!=confirmPassword){
$("#sp1").html("密码不一致");
$("#sp1").css("color","red");
}else{
$("#sp1").html("密码一致");
$("#sp1").css("color","green");
}
});
}
效果：
1.5 实现注册功能，将用户名和通过Md5加密的密码插入数据库
给注册按钮的 input 标签内添加 id=“reg”
注册页面的前端JS里添加doReg()函数，给注册按钮添加事件 ，通过ajax 的第二种方式 ， $.post(url,参数,回调函数)，将用户名和密码传到后台，跳转登录页面。
//注册
function doReg() {
//给注册按钮添加事件 点击
$("#reg").click(function(){
//获取用户和密码
var username=$("#username").val();
var password=$("#password").val();
//ajax 的第二种方式 $.post(url,参数,回调函数);
var url="/user/toReg";
var param={"username":username,"pwd":password};
$.post(url,param,function(obj){
if(obj.state==200) {
alert(obj.msg);
//登录页面
//window.location.href="/web/login.html";
window.location.href="/user/login";
}else{
//弹出错误信息
alert(obj.msg);
}
},"json");
});
}
通过注解/toReg跳转到后台，将用户名和密码存储到map集合里，在业务层接口UserService里实现
//注册
@PostMapping("/toReg")
@ResponseBody//将对象、集合、字符串等等转成json格式回显到浏览器
public Map<String,Object> toReg(String username, String pwd){
Map<String, Object> map = userService.toReg(username, pwd);
return map;
}
在用户模块的业务层接口UserService里
//注册
Map<String,Object> toReg(String username,String password);
在servicelmpl包的Userservicelmpl类里实现功能：用户名密码不为空且没有被注册过时，将密码通过Md5进行加密，生成唯一且长度为36位的字符串，将其他的数据封装到User 对象中传给持久层
@Override
public Map<String, Object> toReg(String username, String password) {
Map<String, Object> map = new HashMap<>();
//判断参数
if (username == null || StringUtils.isEmpty(username)) {
map.put("state", 201);
map.put("msg", "用户不能为空");
return map;
}
if (password == null || StringUtils.isEmpty(password)) {
map.put("state", 202);
map.put("msg", "密码不能为空");
return map;
}
//判断当前用户是否存在
User user1 = userMapper.checkName(username);
if(user1!=null){
map.put("state", 203);
map.put("msg", "该用户已经注册过!");
return map;//返回map 结束当前方法 不再往下执行
}
//生成一个盐
String salt = UUID.randomUUID().toString();//生成唯一且长度为36位的字符串
//对密码加密
String md5PWD = getMd5PWD(password, salt);
//将其他的数据封装到User 对象中 传给 持久层
User user = new User();
user.setUsername(username);
user.setSalt(salt);
user.setPassword(md5PWD);
user.setIsDelete(0);//0表示未被删除
user.setCreateUser(username);
user.setModifiedUser(username);
//调用持久层addUser(User user)
int row = userMapper.addUser(user);
if(row<0){
map.put("state", 203);
map.put("msg", "注册失败");
return map;
}
map.put("state", 200);
map.put("msg", "注册成功");
return map;
}
//封装一个方法，对密码进行加密操作 密码加密以后生成32位
protected String getMd5PWD(String password, String salt) {
String md5Pwd = password + salt;
for (int i = 0; i < 10; i++) {
md5Pwd = DigestUtils.md5DigestAsHex(md5Pwd.getBytes());
}
return md5Pwd;
}
调用持久层addUser(User user)
UserMapper接口里
/**
* 注册
* @param user 封装数据
* @return 受影响行数
*/
int addUser(User user);
与UserMapper.xml文件中的sql语句映射，将注册信息插入到数据库里
<!--注册-->
<insert id="addUser" parameterType="User">
insert into tb_user
(uid,username,password,salt,tel,email,sex,avatar,createTime,modifyTime,is_delete,create_user,modified_user)
values (null,#{username},#{password},#{salt},#{tel},#{email},#{sex},#{avatar},
now(),now(),#{isDelete},#{createUser},#{modifiedUser})
</insert>
1.6 跳转登录页面
ajax将数据传回前端，进行判断obj.state==200，跳转window.location.href="/user/login";(登录界面）。
UserServicelmpl类里实现跳转登录页面
//跳转到登录页面
@GetMapping("/login")
public String toLoginPage(){
return "web/login";
}
扫一扫
2656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
