需要用到的资源
链接: https://pan.baidu.com/s/1i5ov1ZhkZmzv8cJhLozdBA
提取码:z537
用户模块-登录前台
思路
-
有一个login.jsp登陆界面;
-
从login.jsp文件中得知,我们需要使用验证码,项目使用第三方验证码,要用到image.jsp文件内容
-
用户点击验证码时切换验证码;
给image绑定点击时事件,改变src属性 -
点击立即登录显示提示信息;
给登录按钮绑定点击时事件,进行非空判断,空提醒,不为空则提交表单; -
判断用户是否登录,显示不同的标签
通过session中是否有user来判断
实操
- 将资源里的login.jsp文件复制粘贴到WebContent文件夹下;
- 将资源里的image.jsp文件复制粘贴到WebContent文件夹下;
- 在login.jsp文件中补充功能代码;
login.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>
<title>易买网 - 登录</title>
</head>
<body>
<!-- 头部 -->
<div id="header" class="wrap">
<jsp:include page="common/top.jsp" />
</div>
<div id="register" class="wrap">
<div class="shadow">
<em class="corner lb"></em> <em class="corner rt"></em>
<div class="box">
<h1>欢迎回到易买网</h1>
<!-- action后跳转后台 -->
<form id="loginForm" method="post" action="user">
<!-- 多传一个数据用来标示模块 -->
<input type="hidden" name="action" value="login"></input>
<table>
<tr>
<td class="field">用户名:</td>
<td>
<input class="text" type="text" id="userName"
name="userName" value="" />
</td>
</tr>
<tr>
<td class="field">登录密码:</td>
<td>
<input class="text" type="password" id="password"
name="password" value="" />
</td>
</tr>
<tr>
<td class="field">验证码:</td>
<td>
<input class="text" style="width: 60px; margin-right: 10px;"
type=text name="imageCode" id="imageCode">
<img title="换一张试试" name="randImage" id="randImage"
src="image.jsp" width="60" height="22" border="1" align="absmiddle">
</td>
</tr>
<tr>
<td></td>
<td>
<label class="ui-green">
<input style="cursor: pointer;" type="button" id="loginBtn" value="立即登录" />
</label>
<!-- 用msg传递错误消息 -->
<font id="error" color="red">${
msg }</font>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id="footer">
<jsp:include page="common/footer.jsp" />
</div>
</body>
<script type="text/javascript">
//使用JQuery给image绑定点击时事件 ,改变src属性
$("#randImage").click(function(){
//使用随机数来解决网页内因缓存问题而导致的验证码点击不更换问题
$(this).attr("src","image.jsp?"+Math.random());
});
//使用JQuery给登录按钮绑定点击时事件
$("#loginBtn").click(function(){
//接受用户的参数
var userName = $("#userName").val();
var password = $("#password").val();
var imageCode = $("#imageCode").val();
//用户名非空判断
if(userName.trim() == ""){
//空则提醒
$("#error").html("用户名不能为空!");
}
//密码非空判断
if(password.trim() == ""){
//空则提醒
$("#error").html("密码不能为空!");
}
//验证码非空判断
if(imageCode.trim() == ""){
//空则提醒
$("#error").html("验证码不能为空!");
}
//提交表单
$("#loginForm").submit();
});
</script>
</html>
- top.jsp文件中通过session中是否有user来判断用户是否登录,再显示不同的标签
top.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">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="logo">
<img src="images/logo.gif" />
</div>
<div class="help">
<!--用户未登陆-->
<!--用户未登陆时点击购物车和留言板用JS来提示登陆弹窗-->
<c:if test="${empty user }">
<a href="javascript:checkLogin()" class="shopping">购物车</a>
<a href="login.jsp">登录</a>
<a href="register.jsp">注册</a>
<a href="javascript:checkLogin()">留言板</a>
</c:if>
<!--用户已登陆-->
<c:if test="${!empty user }">
<a href="" class="shopping">购物车</a>
<a href="">${
user.userName }</a>
<a href="">注销</a>
<a href="register.jsp">注册</a>
<a href="">留言板</a>
</c:if>
<form action="" method="post">
<input type="text" name="product" value="" />
<input type="submit" value="搜索" /><br />
<div id="suggest" style="width: 200px"></div>
</form>
</div>
<div class="navbar">
<ul class="clearfix">
<li class="current"><a href="index">首页</a></li>
<!--采用jstl、el表达式实现循环遍历<li>标签-->
<c:forEach items="${bigTypeList}" var="bigType" >
<li>
<a href="">${
bigType.name}</a>
</li>
</c:forEach>
</ul>
</div>
<div id="childNav">
<div class="wrap">
<ul class="clearfix">
<!--循环遍历<li>标签-->
<!--添加varStatus标签和choose标签来判断-->
<c:forEach items="${tagList}" var="tag" varStatus="status" >
<!-- 判断 -->
<c:choose>
<c:when test="${status.first }">
<li class="first">
<a href="${tag.url }" target="_blank">${
tag.name}</a>
</li>
</c:when>
<c:when test="${status.last }">
<li class="last">
<a href="${tag.url }" target="_blank">${
tag.name}</a>
</li>
</c:when>
<c:otherwise>
<li>
<a href="${tag.url }" target="_blank">${
tag.name}</a>
</li>
</c:otherwise>
</c:choose>
</c:forEach>
</ul>
</div>
</div>
</body>
<!--JS的checkLogin()方法声明-->
<script type="text/javascript">
function checkLogin(){
alert("请先登陆!")
}
</script>
</html>
用户模块-登录后台
思路
-
新建一个UserServlet专门负责用户模块;
-
接受参数;
-
使用StringUtil工具类来做非空判断(防止直接跳过前台验证);
空,跳转回登录页面并提示用户名不能为空; -
判断验证码是否正确;
错误,跳转回登录页面并提示验证码错误; -
调用service通过用户名查询用户对象user;
-
判断user是否为空;
空,跳转回登录页面并提示用户名不存在; -
比较密码是否正确;
不正确,跳转回登录页面并提示密码错误; -
把用户对象user存在session中;
-
把用户名和密码存在Cookie中;
-
登录成功,跳转首页;
实操
- 在com.xxx.servlet包下新建名为UserServlet的servlet文件;
右击com.xxx.servlet→New→servlet→弹出的窗口中Class name标签下填UserServlet→Next→将URL Mappings栏下的路径修改为user(对应前台action后的值)→Next→勾选service,取消勾选doGet和doPost两个选项。 - 将资源里的StringUtil.java文件复制粘贴到com.xxx.util工具包下,修改
package com.xxx.util;
代码,为自己的包名。 - 在image.jsp文件中将验证码存在session中用于和前台输入的验证码比较是否正确;
image.jsp文件相关代码
...
for (int i=0;i<4;i++){
String rand=String.valueOf(random.nextInt(10));
sRand+=rand;
g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
g.drawString(rand,13*i+6,16);
}
//将验证码存在session中
session.setAttribute("sRand",sRand);
g.dispose();
ImageIO.write(image, "JPEG", response.getOutputStream());
%>
- 在UserServlet.java文件里补充功能代码
UserServlet.java文件代码:
package com.xxx.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.xxx.po.User;
import com.xxx.service.UserService;
import com.xxx.service.impl.UserServiceImpl;
//import org.apache.catalina.User;
import com.xxx.util.StringUtil;
/**
* 用户模块
* Servlet implementation class UserServlet
*/
@WebServlet("/user")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
private UserService userService = new UserServiceImpl();//ctrl+1,UserServices新建一个接口放在service包下,UserServiceImpl新建一个类放在impl包下
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//接受参数;
String action = request.getParameter("action");
//用户模块不仅仅只有登陆这一小模块
//所以把不同小模块的方法分别封装
//此处增加一个功能能够判断用户行为进而进入不同的小模块;
//对应前台 <!-- 多传一个数据用来标示模块 -->
//<input type="hidden" name="action" value="login"></input> 这段代码
if("login".equals(action)){
//登陆
login(request,response); //login报红按CTRL+1,选第二个创建一个方法
}else{
response.sendRedirect("index");
}
}
//登陆功能
private void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//接受参数
String userName = request.getParameter("userName");
String password = request.getParameter("password");
String imageCode = request.getParameter("imageCode");
//非空判断
//此处使用StringUtil工具类来做判断
if(StringUtil.isEmpty(userName)){
//空,跳转回登录页面并提示用户名不能为空;
request.setAttribute("msg", "用户名不能为空!");
request.getRequestDispatcher("login.jsp").forward(request, response); //报红按ctrl+1选择第一个抛一下异常
return;
}
if(StringUtil.isEmpty(password)){
//空,跳转回登录页面并提示密码不能为空;
request.setAttribute("msg", "密码不能为空!");
request.getRequestDispatcher("login.jsp").forward(request, response); //报红按ctrl+1选择第一个抛一下异常
return;
}
if(StringUtil.isEmpty(imageCode)){
//空,跳转回登录页面并提示验证码不能为空;
request.setAttribute("msg", "验证码不能为空!");
request.getRequestDispatcher("login.jsp").forward(request, response); //报红按ctrl+1选择第一个抛一下异常
return;
}
//判断验证码是否正确;
String sRand = (String) request.getSession().getAttribute("sRand");
if(!imageCode.equals(sRand)){
//错误,跳转回登录页面并提示验证码错误;
request.setAttribute("msg", "验证码错误!");
request.getRequestDispatcher("login.jsp").forward(request, response);
return;
}
//调用service通过用户名查询用户对象user;
User user = userService.findUserByName(userName); //User报红创建一个类放在po包下;findUserByName在生成过Uservice接口后生成一下方法
//判断user是否为空;
if(user == null){
//空,跳转回登录页面并提示用户名不存在;
request.setAttribute("msg", "用户名不存在!");
request.getRequestDispatcher("login.jsp").forward(request, response);
return;
}
//比较密码是否正确;
if(!password.equals(user.getPassword())){
//不正确,跳转回登录页面并提示密码错误;
request.setAttribute("msg", "密码错误!");
request.getRequestDispatcher("login.jsp").forward(request, response);
return;
}
//把用户对象user存在session中;
request.getSession().setAttribute("user",user);
//把用户名和密码存在Cookie中;
Cookie cookie = new Cookie("user",userName+"-"+password); //Cookie报红ctrl+1 选择第一个导一下包
//设置Cookie过期时间为30天,Cookie过期时间设置的单位是秒
cookie.setMaxAge(30*24*60*60);
//将我们建好的Cookie传给服务器,实现30天内不清除Cookie自动登陆
response.addCookie(cookie);
//登录成功,跳转首页;
response.sendRedirect("index");
}
}
- 新建的User类中补全代码
package com.xxx.po;
import java.util.Date;
public class User {
private Integer id; //主键id
private String address; //地址
private Date brithday; //生日 Date报红导一下包即可
private String dentityCode; //身份证号
private String email; //邮箱
private String mobile; //手机号码
private String password; //密码
private String sex; //性别
private Integer status =1; //状态,用于标示用户身份为普通用户还是管理员,默认1为普通用户,2为管理员
private String trueName; //真实姓名
private String userName; //用户名
//敲完以上三行代码可以使用ALT+SHIFT+S组合键;
//选择Generate Getters and Setters...
//选择Select all;ok后即可自动生成下面的Get、Set方法代码
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public Date getBrithday() {
return brithday;
}
public void setBrithday(Date brithday) {
this.brithday = brithday;
}
public String getDentityCode() {
return dentityCode;
}
public void setDentityCode(String dentityCode) {
this.dentityCode = dentityCode;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String getTrueName() {
return trueName;
}
public void setTrueName(String trueName) {
this.trueName = trueName;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}
- 新建的UserServiceImpl.java文件中写功能代码
package com.xxx.service.impl;
import java.sql.Connection;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import com.xxx.po.User;
import com.xxx.service.UserService;
import com.xxx.util.DBUtil;
public class UserServiceImpl implements UserService {
@Override
public User findUserByName(String userName) {
// TODO Auto-generated method stub
User user = null;
Connection conn = null;
//异常
try{
//数据库操作
//建立连接
conn = DBUtil.getConnection();
//编写sql语句
String sql = "select * from t_user where userName = ?";
//此处使用Apache提供的工具来操作数据库
//工具包在WEB-INF文件加下的lib子文件夹中,是自带的
//工具包名:commons-dbutils-1.7
//它能自动帮我们查询、封装好数据库,再放入List中
//new一个QueryRunner
QueryRunner qr = new QueryRunner();
//创建参数数组
Object[] params = {
userName};
//执行查询
user = qr.query(conn, sql ,new BeanHandler<>(User.class),params);
} catch (Exception e){
e.printStackTrace();
}finally{
//关闭连接
DBUtil.close(null, null, conn);
}
return user;
}
}
这样,用户模块的登录小模块就完成了。贴上登录成功后显示的页面:
今日特价模块也因为时间变了商品也变了,要是想显示的更多,可以去数据库更改特价商品的日期。