知识点4--SSM项目首页登录注册

尘世壹俗人

已于 2022-09-17 19:11:37 修改

阅读量704

点赞数

分类专栏： SSM 文章标签： javascript 前端 html

于 2022-09-16 08:46:33 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/126882966

版权

SSM 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

在知识点2开发首页的时候，有在头部黑框右侧留了两个按钮，并有与之绑定的JS事件如下

<!-- 黑框右侧的内容 -->
<div class="col-md-2 bg-dark pt-2">
	<!-- 如果没有登录 -->
	<c:if test="${sessionScope.user==null }">
		<button class="btn btn-link btn-sm text-decoration-none "
			data-toggle="modal" data-target="#exampleModal" onclick="reg()">
			<font color="white">注册</font>
		</button>
		<button class="btn btn-link btn-sm text-decoration-none"
			data-toggle="modal" data-target="#exampleModal" onclick="login()">
			<font color="white">登录</font>
		</button>
	</c:if>
</div>

在这里插入图片描述

//注册
function reg() {
	$("#title").text("用户注册");
	$("#modalbody").load("/passport/reg.do");
}
function login() {
	$("#title").text("用户登录");
	$("#modalbody").load("/passport/login.do");
}

本篇知识点我们就来完善它的开发，首先在代码中可以知道，我们需要两个很简单的页面，在不同的情况下加载到模态框中，下面我们来写这两个页面，首先是注册用的

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link href="/resource/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<span id="msg" class="text-danger"></span>
		<form id="form1">
			<div class="form-group">
				<label for="username">用户名</label> <input type="text"
					class="form-control" name="username" id="username">
			</div>
			<div class="form-group">
				<label for="password">密码</label> <input type="password"
					class="form-control" name="password" id="password">
			</div>
			<div class="form-group">
				<label for="repassword">确认密码</label> <input type="password"
					class="form-control" name="rePassword" id="repassword">
			</div>
			性别
			<div class="form-group form-check form-check-inline">
				<input type="radio" class="form-check-input" name="gender" value="1" id="boy" checked="checked">
				<label class="form-check-label" for="boy">男</label>
			</div>
			<div class="form-group form-check form-check-inline">
				 <input type="radio" class="form-check-input" name="gender" value="0" id="goril">
				 <label class="form-check-label" for="goril">女</label>
			</div>
			<div>
				<button type="submit" class="btn btn-primary">注册</button>
				<button type="reset" class="btn btn-dark">重置</button>
			</div>
			
		</form>
	</div>
	<script type="text/javascript">
		$("#form1").validate(
				{
					//1.定义校验规则
					rules : {
						username : {
							required : true,//用户名非空
							rangelength : [ 2, 6 ],//用户名长度在2-6之间
							remote:{
								type:"post",
								data:{username:function(){
									return $("[name='username']").val();
								}},
								url:"/passport/checkpass.do"
							}
						},
						password : {
							required : true,//密码非空
							rangelength : [ 6, 12 ]//密码长度在6-10之间
						},
						repassword : {
							equalTo : "#password"
						}
					},
					//2:如果不满足规则，进行提示
					messages : {
						username : {
							required : "用户名不能为空",
							rangelength : "用户名长度在2-6之间",
							remote:"用户已存在"
						},
						password : {
							required : "密码非空",
							rangelength : "密码长度在6-10之间"
						},
						rePassword : {
							equalTo : "两次密码输入不一致"
						}
					},
					submitHandler : function() {
						$.post("/passport/reg.do", $("#form1").serialize(),
								function(result) {
									if (result.code == 200) {//如果注册成功跳转到登录页面
										//$("#msg").text(result.msg);
										$("#modalbody").load("/passport/login.do");
									} else {//注册失败
										$("#msg").text(result.msg);
									}
								});
					}
				}
		);
	</script>
</body>
</html>

随后是登录用的

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link href="/resource/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
    	<span id="msg" class="text-danger"></span>
		<form id="form1">
			<div class="form-group">
				<label for="username">用户名</label> <input type="text"
					class="form-control" name="username" id="username">
			</div>
			<div class="form-group">
				<label for="password">密码</label> <input type="password"
					class="form-control" name="password" id="password">
			</div>
			
			<div class="form-group">
				<button type="submit" class="btn btn-info" >登录</button>
				<button type="reset" class="btn btn-primary">重置</button>
			</div>

		</form>
	</div>

</body>

<script type="text/javascript">
 $(function(){
	$("#form1").validate({
		//1.定义校验规则
		rules:{
			username:{
				required:true//用户名非空
			},
			password:{
				required:true//密码非空
			}
		},
		//2:如果不满足规则，进行提示
		messages:{
			username:{
				required:"用户名不能为空"
			},
			password:{
				required:"密码非空"
			}
		},
		submitHandler:function(){
			$.post("/passport/login.do",$("#form1").serialize(),function(result){
				if(result.code==200){//如果登录成功
					location.href="/index.do"
				}else{//登录失败
					$("#msg").text(result.msg)
				}
			});
		}
		
	}) 
	 
 })

</script>
</html>

此时前端页面就写好了，由于代码中访问页面都需要请求后台，所以我们要开发一个注册、登录用的Controller，且涉及到用户，所以我们需要开发用户Bean的Dao和Service层

首先是用户Dao层

package com.wy.dao;

import java.util.List;

import com.wy.bean.User;


/**
 * 
 * @ClassName: UserMapper
 * @Description: 用户信息
 * @author: charles
 * @date: 2020年4月7日 上午9:38:31
 */
public interface UserMapper {
	/**
	 * 
	 * @Title: selects
	 * @Description: 用户列表
	 * @param user
	 * @return
	 * @return: List<User>
	 */
	List<User> selects(User user);

	/**
	 * 
	 * @Title: update
	 * @Description: 修改用户
	 * @param user
	 * @return
	 * @return: int
	 */
	int update(User user);

	/**
	 * 
	 * @Title: insert 
	 * @Description:注册用户
	 * @param user
	 * @return
	 * @return: int
	 */
	int  insert(User user); 
	
	/**
	 * 
	 * @Title: selectByName 
	 * @Description: 根据用户名查询用户
	 * @param name
	 * @return
	 * @return: User
	 */
	User selectByName(String name);
	
	
}

以及对应的Xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.wy.dao.UserMapper">
	<select id="selects" resultType="com.wy.bean.User">
		select * from cms_user
		<where>
			<if test="username!=null and username!=''">
				username like "%"#{username}"%"
			</if>
			<if test="locked!=null">
				and locked=#{locked}
			</if>
		</where>
	</select>
	
	<update id="update">
		update cms_user
		<trim prefix="set" suffix="where id =#{id}">
			<if test="locked!=null">
				locked =#{locked}
			</if>
		</trim>
	</update>

	<!-- 注册用户 -->
	<insert id="insert">
		insert into cms_user (username,password,gender)
		values(#{username},#{password},#{gender})
	</insert>


	<select id="selectByName" resultType="com.wy.bean.User">
		select * from cms_user where username =#{usename}
	</select>
</mapper>

之后是Service层

package com.wy.service;


import com.github.pagehelper.PageInfo;
import com.wy.bean.User;

public interface UserService {

	/**
	 * 
	 * @Title: selects
	 * @Description: TODO
	 * @param user
	 * @param page
	 * @param pageSize
	 * @return
	 * @return: Pageinfo<User>
	 */
	PageInfo<User> selects(User user, Integer page, Integer pageSize);

	/**
	 * 
	 * @Title: update
	 * @Description: 管理员修改用户修改用户
	 * @param user
	 * @return
	 * @return: int
	 */
	int update(User user);
	
	/**
	 * 
	 * @Title: insert 
	 * @Description:注册用户
	 * @param user
	 * @return
	 * @return: int
	 */
	boolean  insert(User user); 
	
	/**
	 * 
	 * @Title: selectByName 
	 * @Description: 根据用户名查询用户
	 * @param name
	 * @return
	 * @return: User
	 */
	User selectByName(String name);
	/**
	 * 
	 * @Title: login 
	 * @Description: TODO
	 * @param user
	 * @return
	 * @return: User
	 */
	User login(User user);
	
	
}

以及对应的实现类

package com.wy.service;

import java.util.List;


import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.wy.dao.UserMapper;
import com.wy.utils.CMSException;
import com.wy.utils.Md5Util;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wy.bean.User;
import com.wy.common.util.StringUtil;

@Service
public class UserServiceImpl implements UserService {

	@Resource
	private UserMapper userMapper;
	@Override
	public PageInfo<User> selects(User user ,Integer page, Integer pageSize) {
		
		PageHelper.startPage(page, pageSize);
		List<User> list = userMapper.selects(user);
		return new PageInfo<User>(list);
	}

	@Override
	public int update(User user) {
		// TODO Auto-generated method stub
		return userMapper.update(user);
	}

	@Override
	public boolean insert(User user) {
		//使用工具类处理注册业务逻辑
		//1用户名不能为空
		if(!StringUtil.hasText(user.getUsername()))
		throw new CMSException("用户名不能为空");
		//2用户名的长度
		if(!(user.getUsername().length()>=2 && user.getUsername().length()<=6) )
			throw new CMSException("用户名的长度应该在2-6之间");
		//3.密码
		if(!StringUtil.hasText(user.getPassword()))
			throw new CMSException("密码不能为空");
		//4密码长度
		if(!(user.getPassword().length()>=6 && user.getPassword().length()<=10) )
			throw new CMSException("密码长度6-10之间");
		//5确认密码是否为空
		if(!StringUtil.hasText(user.getRePassword()))
			throw new CMSException("确认密码不能为空");
		//6两次密码是否一致
		if(!user.getRePassword().equals(user.getPassword()))
			throw new CMSException("两次密码是不一致");
		//加密用户密码
		user.setPassword(Md5Util.encode(user.getPassword()));
		return userMapper.insert(user)>0;
	}

	@Override
	public User selectByName(String name) {
		return userMapper.selectByName(name);
	}

	@Override
	public User login(User user) {
		//1用户名不能为空
		if(!StringUtil.hasText(user.getUsername()))
		throw new CMSException("用户名不能为空");	
		//2.密码
		if(!StringUtil.hasText(user.getPassword()))
			throw new CMSException("密码不能为空");
		//3.先根据用户查询是否有该用户
		User u = this.selectByName(user.getUsername());
	   if(null ==u)
			throw new CMSException("用户名不正确"); 
	   //4.比较密码
		if(!u.getPassword().equals(Md5Util.encode(user.getPassword())))
			throw new CMSException("密码不正确"); 
		//5不可让禁用用户登录
		if(u.getLocked()==1)
			throw new CMSException("账户被禁用"); 
		return u;
	}

}

用户Bean的Service写完后，会有三个类找不到

import com.wy.utils.CMSException;
import com.wy.utils.Md5Util;
import com.wy.common.util.StringUtil;

CMSException 是自定义的异常类，用来统一抛出CMS项目中的业务异常

package com.wy.utils;
/**
 * 
 * @ClassName: CMSException 
 * @Description: cms的自定义异常
 * @author: charles
 * @date: 2020年4月9日 上午10:59:06
 */
public class CMSException extends RuntimeException {

	/**
	 * @fieldName: serialVersionUID
	 * @fieldType: long
	 * @Description: TODO
	 */
	private static final long serialVersionUID = 1L;

	public String message;//消息

	public CMSException() {

	}

	public CMSException(String message) {
		super(message);
		this.message = message;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
	
}

Md5Util 是用户注册时对密码的加盐加密

package com.wy.utils;

import org.apache.commons.codec.digest.DigestUtils;

/**
 * 
 * @ClassName: Md5Util 
 * @Description: 对密码进行加密处理
 * @author: charles
 * @date: 2020年3月12日 上午9:51:41
 */
public class Md5Util {
	
	/**
	 * 直接对密码进行散列，那么黑客可以对通过获得这个密码散列值，
	 * 然后通过查散列值字典（例如MD5密码破解网站），得到某用户的密码。
	 * 加Salt可以一定程度上解决这个问题
	 */
	private static String salt ="qazwsx1234";
	
	
	public static String encode(String password) {
       return DigestUtils.md5Hex(password + salt);
	}

}

StringUtil 是我自己日常的工具类，我没有在项目的pom中导入，是让大家可以选择你可以自己写一个，或者是从我们github上拉取下来我的工具类，然后自己使用，我的工具类连接 https://github.com/wangyang159/CommonUtil

依赖补充完成后我们就可以开发注册登录的Controller了

package com.wy.controller;

import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.wy.bean.User;
import com.wy.service.UserService;
import com.wy.utils.CMSException;
import com.wy.utils.CMSResult;


@RequestMapping("passport")
@Controller
public class PassportController {
	@Resource
	private UserService userService;
	
	/**
	 * 
	 * @Title: reg 
	 * @Description: 去注册
	 * @return
	 * @return: String
	 */
	@GetMapping("reg.do")
	public String reg() {
		
		return "passport/reg";
	}
	/**
	 * 
	 * @Title: reg 
	 * @Description: 执行注册
	 * @param user
	 * @return
	 * @return: boolean
	 */
	@ResponseBody
	@PostMapping("reg.do")
	public CMSResult<User> reg(Model model,User user) {
		CMSResult<User> result =new CMSResult<User>();
		try {
			userService.insert(user);
			result.setCode(200);//状态码
			result.setMsg("恭喜注册成功,请登录");//错误消息
		} catch (CMSException e) {//捕获自定义异常
			e.printStackTrace();
			result.setCode(300);//状态码
			result.setMsg(e.message);//错误消息
			
		}catch (Exception e) {
			e.printStackTrace();
			result.setCode(400);//状态码
			result.setMsg("未知错误，请联系管理员");//错误消息
		}
		
		
		return result;
	}
	/**
	 * 
	 * @Title: login 
	 * @Description: 普通用户去登录
	 * @return
	 * @return: String
	 */
	@GetMapping("login.do")
	public String login() {
		
		return "passport/login";
	}
	
	/**
	 * 
	 * @Title: login 
	 * @Description: 普通用户执行登录
	 * @param user
	 * @return
	 * @return: CMSResult<User>
	 */
	@ResponseBody
	@PostMapping("login.do")
	public CMSResult<User> login(User user,HttpSession session){
		CMSResult<User> result =new CMSResult<User>();
		try {
			User u = userService.login(user);
			result.setCode(200);
			result.setMsg("登录成功");
			//登录成功 存session
			session.setAttribute("user", u);
		} catch (CMSException e) {//捕获自定义异常
			e.printStackTrace();
			result.setCode(300);//状态码
			result.setMsg(e.message);//错误消息
			
		}catch (Exception e) {
			e.printStackTrace();
			result.setCode(400);//状态码
			result.setMsg("未知错误，请联系管理员");//错误消息
		}
		return result;
	
		
		
	}
	
	/**
	 * 
	 * @Title: logout 
	 * @Description: 注销
	 * @param session
	 * @return
	 * @return: String
	 */
	@RequestMapping("logout.do")
	public String logout(HttpSession session) {
		session.invalidate();
		return "redirect:/index.do";
	}
	
	@RequestMapping("checkpass.do")
	@ResponseBody
	public boolean checkpass(String username){
		User user = userService.selectByName(username);
		return user==null;
	}

	/**
	 * 
	 * @Title: loginAdmin 
	 * @Description: 跳转到管理员的登录页面
	 * @return
	 * @return: String
	 */
	@RequestMapping("admin/toLogin.do")
	public String loginAdmin() {
		return  "passport/login_admin";
		
	}
	
	
	/**
	 * 
	 * @Title: login 
	 * @Description: 管理用户执行登录
	 * @param user
	 * @return
	 * @return: CMSResult<User>
	 */
	@ResponseBody
	@PostMapping("admin/login.do")
	public CMSResult<User> loginAdmin(User user,HttpSession session){
		CMSResult<User> result =new CMSResult<User>();
		try {
			User u = userService.login(user);
			result.setCode(200);
			result.setMsg("登录成功");
			//如果是普通用户
			if(u.getRole().equals("0")) {//role：1:管理员  0：普通用户
				throw new CMSException("没有登录权限");
			}
			session.setAttribute("admin", u);
		} catch (CMSException e) {//捕获自定义异常
			e.printStackTrace();
			result.setCode(300);//状态码
			result.setMsg(e.message);//错误消息
			
		}catch (Exception e) {
			e.printStackTrace();
			result.setCode(400);//状态码
			result.setMsg("未知错误，请联系管理员");//错误消息
		}
		return result;
	}
}

当上面的Controller写完，你会短一个CMSResult，这个是统一返回模板作用是统一后端给前端返回非页面路径时值的格式

package com.wy.utils;
/**
 * 
 * @ClassName: Result 
 * @Description: 返回统一的结果值
 * @author: charles
 * @date: 2020年1月11日 下午3:09:12 
 * @param <T>
 */
public class CMSResult<T> {
   //返回结果的状态
	private Integer code;
	private String  msg;
	private T data;
	public Integer getCode() {
		return code;
	}
	public void setCode(Integer code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public T getData() {
		return data;
	}
	public void setData(T data) {
		this.data = data;
	}
	
}

这里修复一个bug，在首页页面的登录、注册事件中标题动态修改代码选择器的ID值用错了，改过来

function reg() {
	$("#exampleModalLabel").text("用户注册");
	$("#modalbody").load("/passport/reg.do");
}
function login() {
	$("#exampleModalLabel").text("用户登录");
	$("#modalbody").load("/passport/login.do");
}

修复完成上面的Bug，你就可以运行项目，查看效果了
在这里插入图片描述

上面是普通用户的登录，正常情况下，还会有一个管理员页面，这个页面的访问路径只有开发者知道，我们需要准备一个管理员登录页面，在本Demo中不允许管理员直接注册，所以也没有开发，大家可以自己扩展

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 视窗 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员登录</title>
<link href="/resource/css/bootstrap.min.css" rel="stylesheet">
<link href="/resource/css/jquery/screen.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>

<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container  col-md-5">
	  <h1>管理员登录</h1>
	  <hr>
     <span id="msg" class="text-danger">${msg } </span>
		<form id="form1">
			<div class="form-group">
				<label for="username">用户名</label> <input type="text"
					class="form-control" name="username" id="username">
			</div>
			<div class="form-group">
				<label for="password">密码</label> <input type="password"
					class="form-control" name="password" id="password">
			</div>
			
			<div class="form-group">
				<button type="submit" class="btn btn-info" >登录</button>
				<button type="reset" class="btn btn-primary">重置</button>
			</div>

		</form>
	</div>

</body>

<script type="text/javascript">
 $(function(){
	$("#form1").validate({
		//1.定义校验规则
		rules:{
			username:{
				required:true//用户名非空
				
			},
			password:{
				required:true//密码非空
				
			}
		},
		//2:如果不满足规则，进行提示
		messages:{
			username:{
				required:"用户名不能为空"
			},
			password:{
				required:"密码非空"
			}
		},
		submitHandler:function(){
			$.post("/passport/admin/login.do",$("#form1").serialize(),function(result){
				if(result.code==200){//如果登录成功
					location.href="/admin/index.do";//进入管理员后台页面
				}else{//登录失败
					$("#msg").text(result.msg)
				}
			});
		}
		
	}) 
	 
 })

</script>
</html>

本章中，我们先只做到管理登录成功，至于成功后跳转的管理页面，我们后面再去开发，现在运行代码查看是否登录成功
在这里插入图片描述
如果你用的是知识点1的环境，则在此页面使用admin/123456登录，由于还没有开发后续功能，所以报一个404是正常的

到此登录注册功能开发完成

本项目目前以上传github ：https://github.com/wangyang159/cmsdemo

尘世壹俗人

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
知识点4--SSM项目首页登录注册

在知识点2开发首页的时候，有在头部黑框右侧留了两个按钮，并有与之绑定的JS事件如下本篇知识点我们就来完善它的开发，首先在代码中可以知道，我们需要两个很简单的页面，在不同的情况下加载到模态框中，下面我们来写这两个页面，首先是注册用的随后是登录用的此时前端页面就写好了，由于代码中访问页面都需要请求后台，所以我们要开发一个注册、登录用的Controller，且涉及到用户，所以我们需要开发用户Bean的Dao和Service层首先是用户Dao层以及对应的Xml之后是Service层以及对应的实现类
复制链接

扫一扫

专栏目录