毕业实习项目-7

用户模块-用户注销

思路

前台:top.jsp

  1. 设置注销超链接的href属性,点击访问后台

后台: UserServlet

  1. 清除session中的user
  2. 清除Cookie
  3. 跳转首页

实操

  1. 编辑top.jsp文件的相关代码

top.jsp文件相关代码:

...
		<!--用户已登陆-->
		<c:if test="${!empty user }">
		
			<a href="" class="shopping">购物车</a>
			<a href="">${user.userName }</a>
			
			<!--用户注销-->
			<!--使用action向后台传一个参数-->
			<a href="user?action=logout">注销</a>
			
			<a href="register.jsp">注册</a>
			<a href="">留言板</a>	
			
		</c:if>
...
  1. 编辑UserServlet文件的相关代码

UserServlet文件相关代码:

...		
		if("login".equals(action)){
			
			//登陆 
			login(request,response);  //login报红按CTRL+1,选第二个创建一个方法
			
		}else if("logout".equals(action)){
			
			//注销
			logout(request,response);  //logout报红按CTRL+1,创建一个方法
			
		}else{
			response.sendRedirect("index");
		}	
		
	}
	
	//注销功能
	private void logout(HttpServletRequest request, HttpServletResponse response) throws IOException {
		// TODO Auto-generated method stub
		
		//清除session中的user
		request.getSession().removeAttribute("user");
		
		//清除Cookie,直接用空的cookie覆盖原来的cookie
		Cookie cookie = new Cookie("user",null);
		cookie.setMaxAge(0);
		response.addCookie(cookie);
		
		//跳转首页
		response.sendRedirect("index.jsp");
	}
...

用户模块-用户注册

需要的资源

链接: https://pan.baidu.com/s/1hv20O2mUggp_A4QQrPXp1w .
提取码:csb8

思路

1. 新建一个register.jsp注册页面(资源已有);
2. 用户名输入框失焦事件:

前台:

  1. 给用户名输入框绑定失焦事件,进行非空判断,空则提醒,不空则使用Ajax实现不刷新页面发送请求到后台,再通过回调函数接受的后台数据判断result
    result == 1 用户名可用
    result == 2 用户名不能为空(防止用户直接跨过注册界面)
    result == 3 用户名已存在,不可用

后台:

  1. 接受参数
  2. 非空判断,空,响应2,不为空则调用service通过用户名查询用户对象user(登录已写过,代码可复用),再进行非空判断,若空则响应1,不为空则响应3
3. 注册功能

前台:register.jsp

  1. 提交注册按钮绑定点击事件
  2. 接受参数
  3. 非空判断
    空,用户提示
  4. 提交表单

后台:UserServlet

  1. 接受参数
  2. 非空判断空,跳转注册页面并提示用户
  3. 判断密码和确认密码是否一致,不一致,跳转注册页面并提示用户
  4. 后台需要再判断用户名的唯一性,不唯一,跳转注册页面并提示用户
  5. 调用service添加用户,返回受影响的行数row
    row <= 0;失败,跳转注册页面并提示用户
  6. 成功,跳转登录页面

实操

  1. 将资源里的register.jsp文件复制粘贴到WebContent文件夹下;
  2. 将资源里的reg-result.jsp文件复制粘贴到WebContent文件夹下;
    此文件是注册成功跳转界面,不需要更改任何内容
  3. register.jsp文件写相关代码,完成前台功能:

register.jsp文件更新代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
	<title>易买网 - 注册</title>
	</head>
	<body>
		<!-- 头部 -->
		<div id="header" class="wrap">
			<jsp:include page="common/top.jsp" /> 
		</div>
		<div id="register" class="wrap">
			<div class="shadow" style="margin: 20px auto;">
				<em class="corner lb"></em>
				<em class="corner rt"></em>
				<div class="box">
					<h1>欢迎注册易买网</h1>
					<ul class="steps clearfix">
						<li class="current"><em></em>填写注册信息</li>
						<li class="last"><em></em>注册成功</li>
					</ul>
					
					<!-- action后跳转后台 -->
					<form id="regForm" method="post" action="user">
					
					<!-- 多传一个数据用来标示模块 -->
					<input type="hidden" name="action" value="register"></input>
					
						<table>				
							<tr>
								<td class="field">用户名(*)</td>
								<td>
									<input class="text" type="text" id="userName" name="userName"/>
									&nbsp;<font id="userErrorInfo" color="red"></font>
								</td>
							</tr>
							<tr>
								<td class="field">登录密码(*)</td>
								<td>
									<input class="text" type="password" id="password" name="password"/>
								</td>
							</tr>
							<tr>
								<td class="field">确认密码(*)</td>
								<td>
									<input class="text" type="password" id="rePassWord" name="rePassWord"/>
								</td>
							</tr>
							<tr>
								<td class="field">性别(*)</td>
								<td>
							    	<input type="radio" name="sex" value="男" checked="checked"/>&nbsp;&nbsp;
							    	<input type="radio" name="sex" value="女"/></td>						
							</tr>
							<tr>
								<td class="field">出生日期:</td>
								<td>
									<input type="text" id="birthday" name="birthday" class="Wdate" onClick="WdatePicker()"/>	
								</td> 
							</tr>
							<tr>
								<td class="field">身份证号:</td>
								<td>
									<input class="text" type="text" id="dentityCode" name="dentityCode"/>
								</td>
							</tr>
							<tr>
								<td class="field">Email:</td>
								<td>
									<input class="text" type="text" id="email" name="email"/>
								</td>
							</tr>
							<tr>
								<td class="field">手机号码(*)</td>
								<td>
									<input class="text" type="text" id="mobile" name="mobile" />
								</td>
							</tr>
							<tr>
								<td class="field">收获地址(*)</td>
								<td>
									<input class="text" type="text" id="address" name="address" />
								</td>
							</tr>
							<tr>
								<td></td>
								<td>
									<label class="ui-green">
										<input style="cursor: pointer;" type="button" id="regBtn" value="提交注册" />
									</label>
								</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>
								
								<!-- msg接受错误消息 -->
									<font id="error" color="red">${msg }</font>
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="footer">
			<jsp:include page="common/footer.jsp" />
		</div>
	</body>
	<script type="text/javascript">
		//1.给用户名输入框绑定失焦事件
		$("#userName").blur(function(){
			
		//进行非空判断
		var userName = $(this).val();
		if(userName.trim() == ""){
			
			//空则提醒
			$("#userErrorInfo").html("不能为空!");
			return;
		}
		
		//不空,使用Ajax实现不刷新页面发送请求到后台,再通过回调函数接受的后台数据判断result		
		$.ajax({
			   type: "POST",
			   url: "user",
			   data: "action=checkName&userName="+userName,
			   success: function(result){
			     
					if(result == 1){
						//result == 1  用户名可用
						$("#userErrorInfo").html("");	
						
					}else if(result == 2){
						
						//result == 2  用户名不能为空
						$("#userErrorInfo").html("不能为空!");					
					}else{
						
						//result == 3  用户名已存在,不可用
						$("#userErrorInfo").html("用户名已存在,不可用");
					}
			   }
			});
	
		});
		
		//给提交注册按钮绑定点击事件
		$("#regBtn").click(function(){
			
			//接受参数
			var userName = $("#userName").val();
			var password = $("#password").val();
			var rePassWord = $("#rePassWord").val();
			var mobile = $("#mobile").val();
			var address = $("#address").val();
			
			//非空判断,带*的数据必须填写否则提示
			if(userName.trim() == ""){
				
				//空则提醒
				$("#error").html("用户名不能为空!");
				return;
			}
			
			if(password.trim() == ""){
				
				//空则提醒
				$("#error").html("密码不能为空!");
				return;
			}
			
			if(rePassWord != password){
				
				//空则提醒
				$("#error").html("密码不一致!");
				return;
			}
			
			if(mobile.trim() == ""){
				
				//空则提醒
				$("#error").html("手机号码不能为空!");
				return;
			}
			
			if(address.trim() == ""){
				
				//空则提醒
				$("#error").html("收获地址不能为空!");
				return;
			}
			

			//提交表单
			$("#regForm").submit();
		});

	</script>
</html>
  1. UserServlet.java文件写相关代码,完成后台功能:

UserServlet.java文件更新代码:

...
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		//设置服务器默认编码
		request.setCharacterEncoding("utf8");
		
		//接受参数;
		String action = request.getParameter("action");
		
		//用户模块不仅仅只有登陆这一小模块
		//所以把不同小模块的方法分别封装
		//此处增加一个功能能够判断用户行为进而进入不同的小模块;
		//对应前台 <!-- 多传一个数据用来标示模块 -->
		//<input type="hidden" name="action" value="login"></input> 这段代码
		
		if("login".equals(action)){
			
			//登陆 
			login(request,response);  //login报红按CTRL+1,选第二个创建一个方法
			
		}else if("logout".equals(action)){
			
			//注销
			logout(request,response);  //logout报红按CTRL+1,创建一个方法
			
		}else if("checkName".equals(action)){
			
			//验证用户名是否可用
			checkName(request,response);  //checkName报红按CTRL+1,创建一个方法
			
		}else if("register".equals(action)){
			
			//注册
			try {
				register(request,response);
			} catch (ParseException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}  //checkName报红按CTRL+1,创建一个方法
			
		}else{
			response.sendRedirect("index");
		}	
		
	}
	
	//注册
	private void register(HttpServletRequest request, HttpServletResponse response) throws ParseException, ServletException, IOException {
		// TODO Auto-generated method stub

		
		//接受参数
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		String rePassWord = request.getParameter("rePassWord");
		String sex = request.getParameter("sex");
		String birthdayStr = request.getParameter("birthday");
		Date birthday = null;
		if(StringUtil.isNotEmpty(birthdayStr)){
			
			//如果用户输入了生日则格式化一下生日参数 
			birthday = new SimpleDateFormat("yyyy-MM-dd").parse(birthdayStr);			
		}
		String dentityCode = request.getParameter("dentityCode");
		String email = request.getParameter("email");
		String mobile = request.getParameter("mobile");
		String address = request.getParameter("address");
		
		//判断密码和确认密码是否一致
		if(!password.equals(rePassWord)){
			
			//不一致,跳转注册页面并提示用户
			request.setAttribute("msg", "密码不一致!");
			request.getRequestDispatcher("register.jsp").forward(request, response);
			return;
		}
		
		//后台需要再判断用户名的唯一性
		User user = userService.findUserByName(userName);
		if(user != null){
			
			//不唯一,跳转注册页面并提示用户
			request.setAttribute("msg", "用户名已存在!");
			request.getRequestDispatcher("register.jsp").forward(request, response);
			return;
		}
		
		//把用户封装到对象里去 
		User u = new User(userName,password,sex,birthday,dentityCode,email,mobile,address);//报红需要去User.java文件里生成一下自动构造参数,注意不要勾选多了,只要这里面的参数
		
		//调用service添加用户,返回受影响的行数row
		int row = userService.addUser(u); //addUser报红生成一下方法
		if(row <= 0){
			
			//row <=  0;失败,跳转注册页面并提示用户
			request.setAttribute("msg", "注册失败!");
			request.getRequestDispatcher("register.jsp").forward(request, response);
			return;
		}
		
		//成功,跳转注册成功页面 
		response.sendRedirect("reg-result.jsp");
	}

	//验证用户名是否可用
	private void checkName(HttpServletRequest request, HttpServletResponse response) throws IOException {
		// TODO Auto-generated method stub
		
		//接受参数
		String userName = request.getParameter("userName");
		
		//非空判断
		if(StringUtil.isEmpty(userName)){
			
			//空,响应2
			response.getWriter().write("2");
			return;
		}
		
		//不为空,调用service通过用户名查询用户对象user(登录已写过,方法可复用)
		User user = userService.findUserByName(userName);
		
		//进行非空判断
		if(user != null){
			
			//不为空则响应3
			response.getWriter().write("3");
			return;
		}
		
		//若空则响应1
		response.getWriter().write("1");
	}

	//注销功能
...
  1. UserServiceImpl.java文件写相关代码,完成添加用户的方法:

UserServiceImpl.java文件相关代码:

	//添加用户
	@Override
	public int addUser(User u) {
		// TODO Auto-generated method stub
		
		int row = 0;
		
		Connection conn = null;
		
		//异常
		try{
			
		//数据库操作
		//建立连接
		conn = DBUtil.getConnection();
		
		//编写sql语句
		String sql = "insert into t_user (address,birthday,dentityCode,email,mobile,password,sex,status,trueName,userName) values (?,?,?,?,?,?,?,?,?,?)";
		
		//new一个QueryRunner
		QueryRunner qr = new QueryRunner();
		
		//创建参数数组
		Object[] params = {u.getAddress(),u.getBrithday(),u.getDentityCode(),u.getEmail(),u.getMobile(),u.getPassword(),u.getSex(),u.getStatus(),u.getTrueName(),u.getUserName()};
		
		//执行更新
		row = qr.update(conn, sql ,params);
		
		} catch (Exception e){
			e.printStackTrace();
		}finally{
			
			//关闭连接
			DBUtil.close(null, null, conn);
		}
		return row;
	}

用户模块做到这就结束了,下一篇就要做详情模块了!贴出成功的图片:
完成1
reg-result.jsp提示成功界面:

完成2
数据库新增数据:
完成3

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值