前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >SSM整合之后实现简单的用户注册功能

SSM整合之后实现简单的用户注册功能

作者头像
姜同学
发布于 2022-10-27 15:53:46
1.1K0
发布于 2022-10-27 15:53:46
举报
文章被收录于专栏：姜同学姜同学

首先要先准备主页和登陆页面

代码语言：javascript
复制
index.jsp
代码语言：javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css"/>
  <title>欢迎光临EasyMall</title>
</head>
<body>
<%--静态包含--%>
<%@include file="/WEB-INF/view/_head.jsp"%>
<div id="index">
  <div id="line1">
    <img src="${pageContext.request.contextPath}/img/index/banner_big.jpg"/>
  </div>
  <div id="line2">
    <img id="line2_1" src="${pageContext.request.contextPath}/img/index/adv1.jpg"/>
    <img id="line2_2" src="${pageContext.request.contextPath}/img/index/adv2.jpg"/>
    <img id="line2_3" src="${pageContext.request.contextPath}/img/index/adv_l1.jpg"/>
  </div>
  <div id="line3">
    <img id="line3_1" src="${pageContext.request.contextPath}/img/index/adv3.jpg"/>
    <img id="line3_2" src="${pageContext.request.contextPath}/img/index/adv4.jpg"/>
    <div id="line3_right">
      <img id="line3_3" src="${pageContext.request.contextPath}/img/index/adv_l2.jpg"/>
      <img id="line3_4" src="${pageContext.request.contextPath}/img/index/adv_l3.jpg"/>
    </div>
  </div>
  <div id="line4">
    <img src="${pageContext.request.contextPath}/img/index/217.jpg"/>
  </div>
  <div id="line5">
				<span id="line5_1">
					<img src="${pageContext.request.contextPath}/img/index/icon_g1.png"/>&nbsp;&nbsp;500强企业 品质保证
				</span>
    <span id="line5_2">
					<img src="${pageContext.request.contextPath}/img/index/icon_g2.png"/>&nbsp;&nbsp;7天退货 15天换货
				</span>
    <span id="line5_3">
					<img src="${pageContext.request.contextPath}/img/index/icon_g3.png"/>&nbsp;&nbsp;100元起免运费
				</span>
    <span id="line5_4">
					<img src="${pageContext.request.contextPath}/img/index/icon_g4.png"/>&nbsp;&nbsp;448家维修网点 全国联保
				</span>
  </div>
</div>
<%--静态包含--%>
<%@include file="/WEB-INF/view/_foot.jsp"%>
</body>
</html>
html
代码语言：javascript
复制
_head.jsp
代码语言：javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<div id="common_head">
    <div id="line1">
        <%--如果没有登录状态，则显示如下内容--%>
        <div id="content">
        <%--如果有登录状态，则显示用户名，及一个登出按钮--%>
        <%--<%
            //如果有session对象，并且对象中包含username域属性，则证明是登录状态
            if(request.getSession(false) != null
                    && request.getSession().getAttribute("username") != null){
        %>--%>
            <c:if test="${sessionScope.user.username != null}">
                <a href="#">欢迎，${sessionScope.user.username} 回来</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/LogOutServlet">登出</a>
            </c:if>
           <%-- <%
            }else{
                %>--%>
            <c:if test="${sessionScope.user.username == null}">
                <a href="${pageContext.request.contextPath}/WEB-INF/view/login.jsp">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/forward/regist.action">注册</a>
            </c:if>


           <%-- <%
            }
        %>--%>


        </div>
    </div>
    <div id="line2">
        <img id="logo" src="${pageContext.request.contextPath}/img/head/logo.jpg"/>
        <input type="text" name=""/>
        <input type="button" value="搜 索"/>
        <span id="goto">
			<a id="goto_order" href="#">我的订单</a>
			<a id="goto_cart" href="#">我的购物车</a>
		</span>
        <img id="erwm" src="${pageContext.request.contextPath}/img/head/qr.jpg"/>
    </div>
    <div id="line3">
        <div id="content">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">手机数码</a></li>
                <li><a href="#">电脑平板</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">汽车用品</a></li>
                <li><a href="#">食品饮料</a></li>
                <li><a href="#">图书杂志</a></li>
                <li><a href="#">服装服饰</a></li>
                <li><a href="#">理财产品</a></li>
            </ul>
        </div>
    </div>
</div>
html
代码语言：javascript
复制
_foot.jsp
代码语言：javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<div id="common_head">
    <div id="line1">
        <%--如果没有登录状态，则显示如下内容--%>
        <div id="content">
        <%--如果有登录状态，则显示用户名，及一个登出按钮--%>
        <%--<%
            //如果有session对象，并且对象中包含username域属性，则证明是登录状态
            if(request.getSession(false) != null
                    && request.getSession().getAttribute("username") != null){
        %>--%>
            <c:if test="${sessionScope.user.username != null}">
                <a href="#">欢迎，${sessionScope.user.username} 回来</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/LogOutServlet">登出</a>
            </c:if>
           <%-- <%
            }else{
                %>--%>
            <c:if test="${sessionScope.user.username == null}">
                <a href="${pageContext.request.contextPath}/WEB-INF/view/login.jsp">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="${pageContext.request.contextPath}/forward/regist.action">注册</a>
            </c:if>


           <%-- <%
            }
        %>--%>


        </div>
    </div>
    <div id="line2">
        <img id="logo" src="${pageContext.request.contextPath}/img/head/logo.jpg"/>
        <input type="text" name=""/>
        <input type="button" value="搜 索"/>
        <span id="goto">
			<a id="goto_order" href="#">我的订单</a>
			<a id="goto_cart" href="#">我的购物车</a>
		</span>
        <img id="erwm" src="${pageContext.request.contextPath}/img/head/qr.jpg"/>
    </div>
    <div id="line3">
        <div id="content">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">全部商品</a></li>
                <li><a href="#">手机数码</a></li>
                <li><a href="#">电脑平板</a></li>
                <li><a href="#">家用电器</a></li>
                <li><a href="#">汽车用品</a></li>
                <li><a href="#">食品饮料</a></li>
                <li><a href="#">图书杂志</a></li>
                <li><a href="#">服装服饰</a></li>
                <li><a href="#">理财产品</a></li>
            </ul>
        </div>
    </div>
</div>
html
代码语言：javascript
复制
regist.jsp
代码语言：javascript
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>欢迎注册EasyMall</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/regist.css"/>
    <!--引入jQuery函数库-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
           var formObj = {
                "checkData":function(){
                    var canSub = true;
                   /* //1.获取参数
                    var username = $("input[name='username']").val();
                    //清空操作
                    $("input[name='username']").nextAll("span").text("");
                    //2.非空
                    if(username == ""){
                        //1.找到当前元素后的span
                        $("input[name='username']").nextAll("span").text("用户名不能为空!");
                    }*/
                    canSub = this.checkNull("username","用户名不能为空!") && canSub;
                    canSub = this.checkNull("password","密码不能为空!")&& canSub;
                    canSub = this.checkNull("password2","确认密码不能为空!")&& canSub;
                    canSub = this.checkNull("nickname","昵称不能为空!")&& canSub;
                    canSub = this.checkNull("email","邮箱不能为空!")&& canSub;
                    canSub = this.checkNull("valistr","验证码不能为空!")&& canSub;
                    //3.密码一致性
                    canSub = this.checkPassword()&& canSub;

                    //4.邮箱格式
                    canSub = this.checkEmail()&& canSub;
                    return canSub;
                },
               "checkNull":function(name,msg){
                   //1.获取参数
                   var tag = $.trim($("input[name='"+name+"']").val());
                   //清空操作
                   $("input[name='"+name+"']").nextAll("span").text("");
                   //2.非空
                   if(tag == ""){
                       //1.找到当前元素后的span
                       $("input[name='"+name+"']").nextAll("span").text(msg);
                       return false;
                   }
                   return true;
               },
               "checkPassword":function(){
                   //获取两个密码框中的数据，作比对，如果不同，则作出提示
                   var password = $("input[name='password']").val();
                   var password2 = $("input[name='password2']").val();

                   if(password != password2){
                       $("input[name='password2']").nextAll("span").text("两次密码不一致");
                       return false;
                   }
                   return true;
               },
               "checkEmail":function(){
                    //1.邮箱正则   lishuai@tedu.cn
                   var reg = /\w+@\w+(\.\w+)+/;
                   //2.用户输入的邮箱
                   var email = $("input[name='email']").val();
                   if(email!="" && !reg.test(email)){
                       $("input[name='email']").nextAll("span").text("邮箱格式不正确!");
                       return false;
                   }
                   return true;
               }
            };
            //文档就绪事件
           $(function(){
               //鼠标离开输入框，则发生校验操作
               $("input[name='username']").blur(function(){
                   formObj.checkNull("username","用户名不能为空");
                   //获取输入框中的用户名
                   var username = $("input[name='username']").val();
                   if(username != ""){
                       //ajax用户名是否存在校验
                       $("#username").load("${pageContext.request.contextPath}/AjaxCheckUsername",{"username":username});
                   }
               });
               $("input[name='password']").blur(function(){
                   formObj.checkNull("password","密码不能为空");
               });
               $("input[name='password2']").blur(function(){
                   formObj.checkNull("password2","确认密码不能为空");
                   formObj.checkPassword();
               });
               $("input[name='nickname']").blur(function(){
                   formObj.checkNull("nickname","昵称不能为空");
               });
               $("input[name='email']").blur(function(){
                   formObj.checkNull("email","邮箱不能为空");
                   formObj.checkEmail();
               });
               $("input[name='valistr']").blur(function(){
                   formObj.checkNull("valistr","验证码不能为空");
               });

               //图片单击事件--单击时更换验证码
               $("#img").click(function(){
                   var date = new Date();
                   var time = date.getTime();
                   $(this).attr("src","${pageContext.request.contextPath}/forward/valistr.action?time="+time);
               });
           });
    </script>
</head>
<body>
<form action="${pageContext.request.contextPath}/user/regist.action" method="POST" onsubmit="return formObj.checkData()">
    <h1>欢迎注册EasyMall</h1>
    <table>
        <tr>
            <td class="tds" colspan="2" style="color:red;text-align: center">
                <%--后台传入此处的校验内容--%>
<%--                <%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>
                ${msg}
            </td>
        </tr>
        <tr>
            <td class="tds">用户名：</td>
            <td>
                <input type="text" name="username"
               value="${param.username}"/>
                <span id="username"></span>
            </td>
        </tr>
        <tr>
            <td class="tds">密码：</td>
            <td>
                <input type="password" name="password"/><span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">确认密码：</td>
            <td>
                <input type="password" name="password2"/><span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">昵称：</td>
            <td>
                <input type="text" name="nickname"
              value="${param.nickname}"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">邮箱：</td>
            <td>
                <input type="text" name="email"
         value="${param.email}"/>
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="tds">验证码：</td>
            <td>
                <input type="text" name="valistr"/>
                <img id="img" src="${pageContext.request.contextPath}/forward/valistr.action" width="" height="" alt="" />
                <span></span>
            </td>
        </tr>
        <tr>
            <td class="sub_td" colspan="2" class="tds">
                <input type="submit" value="注册用户"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
html

数据库表单设计

代码语言：javascript
复制
mysql> show create table user;
+-------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Table | Create Table                                                                                                                                                                                                                                                                                           |
+-------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| user  | CREATE TABLE `user` (
  `id` int() NOT NULL AUTO_INCREMENT,
  `username` varchar() DEFAULT NULL,
  `password` varchar() DEFAULT NULL,
  `nickname` varchar() DEFAULT NULL,
  `email` varchar() DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT= DEFAULT CHARSET=utf8 |
+-------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 row in set (0.00 sec)
sql

三层架构

代码语言：javascript
复制
web层
代码语言：javascript
复制
@Controller
@RequestMapping("/user")
public class UserController {

	@Autowired
	UserService userService = null;
	@RequestMapping("regist.action")
	public String registUser(User user,Model model,String valistr, HttpSession session,HttpServletResponse response){
		// 验证码校验
		String code = (String) session.getAttribute("code");
		if (!valistr.equalsIgnoreCase(code)) {
			model.addAttribute("msg","验证码不一致亲~~");
			return "forward:/WEB-INF/view/regist.jsp";
		}
		// 验证用户信息
		if (userService.findUserByUsername(new User(,user.getUsername(),null,null,null)) != null) {
			model.addAttribute("msg","用户名太抢手哦亲~~");
			return "forward:/WEB-INF/view/regist.jsp";
		} else {
			// 添加用户信息
			userService.registUser(user);
			return "redirect:/index.jsp";
		}
		
	}
}
java
代码语言：javascript
复制
@Controller
@RequestMapping("/forward")
public class ForwardController {

	@RequestMapping("/regist.action")
	public String regist() {
		return"regist";
	}
	
	@RequestMapping("/valistr.action")
	public void valistr(HttpServletResponse response, HttpSession session ) {
		// 控制浏览器不使用缓存
		response.setHeader("cache-Control", "no-cache");
		// 打印验证码
		try {
			VerifyCode verifyCode = new VerifyCode();
			verifyCode.drawImage(response.getOutputStream());
			System.out.println(verifyCode.getCode());
			// 将验证码保存带session域中
			session.setAttribute("code", verifyCode.getCode());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}
java
代码语言：javascript
复制
service层
代码语言：javascript
复制
@Service
public class UserServiceImpl implements UserService {

	@Autowired
	UserMapper userMapper = null;
	@Override
	public User findUserByUsername(User user) {
		System.out.println(user);
		return userMapper.findUser(user);
	}
	@Override
	public void registUser(User user) {
		userMapper.addUser(user);
	}

}
java
代码语言：javascript
复制
数据访问层mapper以及userMapper.xml
代码语言：javascript
复制
public interface UserMapper {

	public User findUser(User user);

	public void addUser(User user);

}

java
代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<!-- 描述表Sql与bean映射的关系 -->
<!DOCTYPE mapper
	PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
	"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
	<mapper namespace="com.easymall.mapper.UserMapper">
		<select id="findUser" resultType="com.easymall.domain.User">
			select * from user 
				<where>
					<if test="id != 0">id = #{id}</if>
					<if test="username != null">and username = #{username}</if>
					<if test="password != null">and password = #{password}</if>
					<if test="nickname != null">and nickname = #{nickname}</if>
					<if test="email != null">and email = #{email}</if>
				</where>
		</select>
		
		<insert id="addUser">
			insert into user values(#{id},#{username},#{password},#{nickname},#{email});
		</insert>
	</mapper>
html
代码语言：javascript
复制
UserBean
代码语言：javascript
复制
public class User {
	 
	private int id;
	private String username;
	private String password;
	private String nickname;
	private String email;
	
	public User() {
		super();
	}
	public User(int id, String username, String password, String nickname, String email) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
		this.nickname = nickname;
		this.email = email;
	}
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	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 getNickname() {
		return nickname;
	}
	public void setNickname(String nickname) {
		this.nickname = nickname;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
	@Override
	public String toString() {
		return "User [id=" + id + ", username=" + username + ", password=" + password + ", nickname=" + nickname
				+ ", email=" + email + "]";
	}
}

html

用到的验证码工具包

代码语言：javascript
复制
import javax.imageio.ImageIO;
/**
 * 动态生成图片
 */
public class VerifyCode {
	// {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
	private static String[] fontNames = { "宋体", "华文楷体", "黑体", "微软雅黑",  "楷体_GB2312" };
	// 可选字符
	//"23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
	private static String codes = "23456789abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
	// 背景色
	private Color bgColor = new Color(, , );
	// 基数(一个文字所占的空间大小)
	private int base = ;
	// 图像宽度
	private int width = base * ;
	// 图像高度
	private int height = base;
	// 文字个数
	private int len = ;
	// 设置字体大小
	private int fontSize = ;
	// 验证码上的文本
	private String text;

	private BufferedImage img = null;
	private Graphics2D g2 = null;

	/**
	 * 生成验证码图片
	 */
	public void drawImage(OutputStream outputStream) {
		// 1.创建图片缓冲区对象, 并设置宽高和图像类型
		img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 2.得到绘制环境
		g2 = (Graphics2D) img.getGraphics();
		// 3.开始画图
		// 设置背景色
		g2.setColor(bgColor);
		g2.fillRect(, , width, height);

		StringBuffer sb = new StringBuffer();// 用来装载验证码上的文本

		for (int i = ; i < len; i++) {
			// 设置画笔颜色 -- 随机
			// g2.setColor(new Color(255, 0, 0));
			g2.setColor(new Color(getRandom(, ), getRandom(, ),getRandom(, )));

			// 设置字体
			g2.setFont(new Font(fontNames[getRandom(, fontNames.length)], Font.BOLD, fontSize));

			// 旋转文字(-45~+45)
			int theta = getRandom(-, );
			g2.rotate(theta * Math.PI / ,  + i * base, height - );

			// 写字
			String code = codes.charAt(getRandom(, codes.length())) + "";
			g2.drawString(code,  + i * base, height - );
			sb.append(code);
			g2.rotate(-theta * Math.PI / ,  + i * base, height - );
		}

		this.text = sb.toString();

		// 画干扰线
		for (int i = ; i < len + ; i++) {
			// 设置画笔颜色 -- 随机
			// g2.setColor(new Color(255, 0, 0));
			g2.setColor(new Color(getRandom(, ), getRandom(, ),
					getRandom(, )));
			g2.drawLine(getRandom(, ), getRandom(, ), getRandom(, ),
					getRandom(, ));
		}
		// 4.保存图片到指定的输出流
		try {
			ImageIO.write(this.img, "JPEG", outputStream);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}finally{
			// 5.释放资源
			g2.dispose();
		}
	}

	/**
	 * 获取验证码字符串
	 * @return
	 */
	public String getCode() {
		return this.text;
	}

	/*
	 * 生成随机数的方法
	 */
	private static int getRandom(int start, int end) {
		Random random = new Random();
		return random.nextInt(end - start) + start;
	}

	/*public static void main(String[] args) throws Exception {
		VerifyCode vc = new VerifyCode();
		vc.drawImage(new FileOutputStream("d:/vc.jpg"));
		System.out.println("执行成功~!");
	}*/
}
java

一个简单的注册功能研究了小半天 累呦~~

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-06T，如有侵权请联系 cloudcommunity@tencent.com 删除
数据库
验证码
表单
架构
设计

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

数据库
验证码
表单
架构
设计
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 首先要先准备主页和登陆页面
  • 数据库表单设计
  • 三层架构
相关产品与服务
验证码
腾讯云新一代行为验证码（Captcha），基于十道安全栅栏， 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时，提供更精细化的用户体验。
免费体验产品介绍产品文档
618年中盛惠，限时抢
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论