三层框架的登录注册Demo
一、大致功能：
- 注册
- 登录
二、简单划分
JSP：
- login.jsp ：登录表单
- regist.jsp ：注册表单
- index.jsp ：主页（只有登录成功才能看到）
Servlet：
- LoginServlet
- RegistServlet
Service：
- UserService ：与用户相关的业务类
Dao：
- UserDao：与用户相关的数据类
DaoMain：
- User（对应数据库，还要对应所有表单）：
- username
- password
- verifyCode
三、数据库设计
我们暂时用一个xml来模拟数据库。
user.xml：
<users>
<user username="xxx" password="xxx"/>
<user username="xxx" password="xxx"/>
</users>四、项目框架搭建
4.1 创建空项目
创建一个名为Demo的空项目。
4.2 导包
我们用到的jar包，都先复制进去。
- CommonUtils
- common-beanutils.jar
- common-logging.jar
- dom4j
- jaxen
4.3 建包
- com.veeja.demo.domain
User - com.veeja.demo.dao
UserDao - com.veeja.demo.service
UserService - com.veeja.demo.web.servlet
LoginServlet
RegistServlet
我们按照我们的设计建立包并且创建类就可以了，并且我们简单的书写一些类的内容。
- com.veeja.demo.domain.User：
我们在生成set/get和toString方法的时候推荐使用快捷键，alt+shift+s，在弹出的菜单中按相应的键。
package com.veeja.demo.domain;
public class User {
private String username;
private String password;
private String verifyCode;
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 getVerifyCode() {
return verifyCode;
}
public void setVerifyCode(String verifyCode) {
this.verifyCode = verifyCode;
}
@Override
public String toString() {
return "User [username=" + username + ", password=" + password
+ ", verifyCode=" + verifyCode + "]";
}
}- com.veeja.demo.dao.UserDao
package com.veeja.demo.dao;
public class UserDao {
private String path = "F:/users.xml";// 依赖数据文件
}- com.veeja.demo.service.UserService
public class UserService {
private UserDao userDao = new UserDao();
}- com.veeja.demo.web.servlet
在创建servlet之前，我们先更换一下MyEclipse的模板文件。我们把com.genuitec.eclipse.wizards_9.0.0.me201108091322.jar文件放到MyEclipse\Common\plugins目录下。
- LoginServlet
import com.veeja.demo.service.UserService;
/**
* UserServlet层
*/
public class LoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");// 请求编码（POST）
response.setContentType("text/html;charset=utf-8");// 响应编码
// 依赖UserService
UserService userService = new UserService();
}
}- RegistServlet
import com.veeja.demo.service.UserService;
public class RegistServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 依赖UserService
UserService userService = new UserService();
}
}4.4 Jsp页面
- login.jsp
- regist.jsp
- index.jsp
在一个目录下创建这几个文件。
4.4 创建xml
在F盘下创建一个user.xml文件。
- 添加根元素
<users>
<?xml version="1.0" encoding="utf-8"?>
<users>
<user username="刘伟佳" password="123"/>
</users>- 保证文件为utf-8编码！！！
五、具体功能设计
5.1 注册功能设计
regist.jsp
完成regist.jsp的基本功能。
RegistServlet
- 封装表单数据，封装到User对象中。
- 调用service的
regist()方法
①如果这个方法没有出问题，输出“注册成功”
②如果这个方法抛出了异常，把错误信息保存到request域，转发到regist.jsp(显示错误信息)
UserService
regist()方法：
- 没有返回值，但注册失败抛出一个自定义的异常！可以在异常中添加异常信息！(自定义一个异常类)
- 校验用户名是否已被注册（通过用户名查询用户），如果已被注册，抛出异常，异常信息为“用户名已被注册！”
- 添加用户
UserDao：
通过业务分析，需要提供两个方法：
按用户名查询用户对象：User findByUsername(String username) 插入一个用户到数据库中：void add(User user)
5.2 注册功能实现
流程图
① UserException类
package com.veeja.demo.service;
/**
* 自定义一个异常类， 只是给出父类中的构造器即可，方便用来创建对象。
*/
public class UserException extends Exception {
public UserException() {
super();
// TODO Auto-generated constructor stub
}
public UserException(String message, Throwable cause) {
super(message, cause);
// TODO Auto-generated constructor stub
}
public UserException(String message) {
super(message);
// TODO Auto-generated constructor stub
}
public UserException(Throwable cause) {
super(cause);
// TODO Auto-generated constructor stub
}
}② dao层代码实现
- 方法：根据用户名查找user
User findByUsername(String username)
/**
* 按用户查找
*
* @param username
* @return
*/
public User findByUsername(String username) {
/*
* 1. 得到Document
* 2. xpath查询。
* 3.校验查询结果是否为null，如果为null，返回null
* 4.如果不为null，需要把Element封装到User对象中。
*/
// 创建解析器,
SAXReader reader = new SAXReader();
try {
// 得到document
Document doc = reader.read(path);
// 进行查询，得到element元素
Element ele = (Element) doc.selectSingleNode("//user[@username='"
+ username + "']");
// 校验ele是否为null，如果为null，返回null
if (ele == null)
return null;
// 把ele的数据封装到User对象中
User user = new User();
String attrUsername = ele.attributeValue("username");// 获取该元素名为username的属性值
String attrPassword = ele.attributeValue("password");// 获取该元素名为password的属性值
user.setUsername(attrUsername);
user.setPassword(attrPassword);
return user;
} catch (DocumentException e) {
throw new RuntimeException(e);
}
}- 方法：添加用户
void add(User user)
/**
* 添加用户
*
* @param user
*/
public void add(User user) {
/*
* 1. 得到Document 2. 得到Document得到root元素。<users> 3. 使用参数user，转发成Element对象
* 4. 把Element对象添加到root元素中 5. 保存Document
*/
// 创建解析器
SAXReader reader = new SAXReader();
try {
// 得到document
Document doc = reader.read(path);
// 得到根元素
Element root = doc.getRootElement();
// 通过根元素创建新元素
Element userEle = root.addElement("user");
// 为userEle设置属性
userEle.addAttribute("username", user.getUsername());
userEle.addAttribute("password", user.getPassword());
// 保存文件
// 创建输出格式化器
OutputFormat format = new OutputFormat("\t", true);// 缩进使用：\t；是否换行：是。
format.setTrimText(true);// 清空所有的缩进与换行
// 创建XmlWriter
XMLWriter writer;
try {
writer = new XMLWriter(new OutputStreamWriter(
new FileOutputStream(path)), format);
writer.write(doc);// 保存document对象
writer.close();
} catch (Exception e) {
throw new RuntimeException(e);
}
} catch (DocumentException e) {
throw new RuntimeException(e);
}
}附加：Dao层测试
- 我们写完Dao层，在这里可以做Dao测试，来测试一下我们的方法是否可以运行。
/**
* UserDao的测试
*
* @author Veeja.Liu
* @emial veejaliu@gmail.com
*
*/
public class UserDaoTest {
@Test
public void testFindByUsername() {
UserDao userDao = new UserDao();
User user = userDao.findByUsername("zhaoliu");
System.out.println(user);
}
@Test
public void testAdd() {
UserDao userDao = new UserDao();
User user = new User();
user.setUsername("testusername");
user.setPassword("testpassword");
userDao.add(user);
}
}③ service层
方法：void regist() throws UserException
/**
* 注册功能
*
* @param user
* @throws UserException
*/
public void regist(User user) throws UserException {
// 1. 使用用户名去查询，如果返回null，完成添加 。
// 2. 如果返回的不是null，抛出异常。
User _user = userDao.findByUsername(user.getUsername());
if (_user != null)
throw new UserException("用户名" + user.getUsername() + "已被注册！");
userDao.add(user);
}④ servlet层
封装表单数据到User对象中，使用user调用service的regist()方法。
如果得到UserException，那么把异常信息保存到request域中，转发回regist.jsp，
如果注册成功，则输出“注册成功”。
public class RegistServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 依赖UserService
UserService userService = new UserService();
/*
* 1. 封装表单数据（封装到User中）
*/
User form = CommonUtils.toBean(request.getParameterMap(), User.class);
/*
* 2. 调用userService的regist()方法，传递form过去 3.
* 得到异常：获取异常信息，保存到request域中，转发到regist.jsp中显示 4. 没有异常：输出注册成功！
*/
try {
userService.regist(form);
response.getWriter().print(
"<h1>注册成功！</h1><a href='" + request.getContextPath()
+ "/user/login.jsp'>点击这里登录</a>");
} catch (UserException e) {
// 获取异常信息，保存到request域中
request.setAttribute("msg", e.getMessage());
// 转发到regist.jsp中
request.getRequestDispatcher("/user/regist.jsp").forward(request, response);
}
}
}⑤ regist.jsp
我们还要完成regist.jsp的功能，显示注册的表单，并且要在出现异常时回馈信息。
<body>
<h1>注册</h1>
<p style="color:red; font-weight:900">${msg }</p>
<!-- ${pageContext.request.contextPath }/RegistServlet -->
<form action="<c:url value='/RegistServlet'/>" method="post">
用户名：<input type="text" name="username"><br>
密 码：<input type="password" name="password"><br>
<input type="submit" value="注册">
</form>
</body>⑥ 最后的完善
这样我们已经基本完成了注册的功能，但是还有个小问题，就是我们在注册出错返回注册页面时，表单的数据是没有了的，这样操作有些不方便，所以我们添加一个回显的功能。
我们只需要在jsp和servlet中做一些小小的修改就可以了。
servlet：
jsp：
附加 给注册功能添加验证码
步骤分析：
- VerifyCode类，首先使用
BufferedImage.getImage()来获取随机的验证码图片，然后使用String getText()方法获取图片上的文本，还要使用static output(BfferedImage, OutputStream)方法把图片写入到指定的输出流中。 - VerifyCodeServlet：获取随机验证码图片，把验证码图片上的文本保存到session中，把图片响应到response的outputStream中。
- regist.jsp：添加
<img src="指向Servlet" />，添加一个文本框，用来输入验证码，还要添加“看不清，换一张”的超链接。把上面的<img>的src重新再次指向Servlet！为了处理浏览器的缓存，需要使用时间来做参数！ - 修改RegistServlet：校验验证码！如果错误：保存表单数据到request域、保存错误信息到request域，转发回regist.jsp；如果正确，就向下执行原来的代码。
代码实现：
新建一个Servlet，VerifyCodeServlet：
import cn.itcast.vcode.utils.VerifyCode;
public class VerifyCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1. 创建验证码类
VerifyCode vc = new VerifyCode();
// 2. 得到验证码图片
BufferedImage image = vc.getImage();
// 3. 把图片上的文本保存到session中
request.getSession().setAttribute("session_vcode", vc.getText());
// 4. 把图片响应给客户端
VerifyCode.output(image, response.getOutputStream());
}
}jsp页面，要做一些修改：
还有我们之前写的RegistServlet，也要做一些修改，添加校验验证码的功能。
/*
* 新添加的任务：校验验证码是否正确
*/
// 用户的验证码已经封装到user中，从session中获取正确的验证码
// 比较两者，如果不同，保存错误信息、保存表单数据。转发到regist.jsp中
// 如果相同，继续执行下面的代码
String sessionVerifyCode = (String) request.getSession().getAttribute("session_vcode");
if (!sessionVerifyCode.equalsIgnoreCase(form.getVerifyCode())) {
request.setAttribute("msg", "验证码错误！");
request.setAttribute("user", form);// 用来在表单中回显。
request.getRequestDispatcher("/user/regist.jsp").forward(request, response);
return;
}附加 给注册添加表单校验
服务器端表单校验
思路分析
- 我们把这段校验放在获取表单数据之后，放在校验验证码之前。
使用Map类型装载错误信息。
key：username、password、verifyCodevalue：
非空：用户名不能为空，或者是“密码不能为空”
长度：用户名长度必须在3-20之间，密码长度必须在3-20之间。 - 在校验失败时，向map添加错误信息！那个字段出错，就给哪个字段添加错误信息！
- 判断map是否为空（长度是否为0），如果不空，说明有错误存在，保存map到request域，保存form到request域（回显），转发回regist.jsp
- 在regist.jsp页面中，显示map中的错误信息。
${map.username}
代码实现
我们把这一段的校验代码与上面的验证码校验进行整合。
形成新的代码：
/**
* 添加新任务（表单校验）
*/
// 创建一个Map，用来装载所有的表单错误信息
Map<String, String> errors = new HashMap<String, String>();
// 在校验过程中，如果失败，向map中添加错误信息，key为表单字段名称。
// 对用户名进行校验
String username = form.getUsername();
if (username == null || username.trim().isEmpty()) {
errors.put("username", "用户名不能为空！");
} else if (username.length() < 3 || username.length() > 15) {
errors.put("username", "用户名长度必须在3~15之间！");
}
// 密码校验
String password = form.getPassword();
if (password == null || password.trim().isEmpty()) {
errors.put("password", "密码不能为空！");
} else if (password.length() < 3 || password.length() > 15) {
errors.put("password", "密码长度必须在3~15之间！");
}
// 验证码校验
String verifyCode = form.getVerifyCode();
// 用户的验证码已经封装到user中，从session中获取正确的验证码
String sessionVerifyCode = (String) request.getSession().getAttribute(
"session_vcode");
if (verifyCode == null || verifyCode.trim().isEmpty()) {
errors.put("verifyCode", "验证码不能为空！");
} else if (verifyCode.length() < 3 || verifyCode.length() > 15) {
errors.put("verifyCode", "验证码长度必须为4！");
} else if (!sessionVerifyCode.equalsIgnoreCase(form.getVerifyCode())) {
errors.put("verifyCode", "验证码错误！");
}
// 判断Map是否为空，不为空，说明存在错误。
if (errors != null && errors.size() > 0) {
/*
* 保存errors到request域中 ，保存form到request域中 ，转发到regist.jsp
*/
request.setAttribute("errors", errors);
request.setAttribute("user", form);
request.getRequestDispatcher("/user/regist.jsp").forward(request, response);
return;
}简单改写一下regist.jsp：
<body>
<h1>注册</h1>
<p style="color:red; font-weight:900">${msg }</p>
<!-- ${pageContext.request.contextPath }/RegistServlet -->
<form action="<c:url value='/RegistServlet'/>" method="post">
用户名：<input type="text" name="username" value="${user.username }" />${errors.username }<br>
密 码：<input type="password" name="password" value="${user.password }" />${errors.password }<br>
验证码：<input type="text" name="verifyCode" value="${user.verifyCode }" size="3" />
<img id="vCode" src="<c:url value='/VerifyCodeServlet' /> " />
<a href="javascript:_change()">换一张</a>${errors.verifyCode }
<br>
<input type="submit" value="注册">
</form>
</body>5.3 登录功能设计
页面设计
login.jsp：登录表单
LoginServlet
- 获取表单数据，封装到User中
- 调用service的login()方法，传递form过去！
- 如果service的login()方法，没有抛出异常！返回一个User对象！
有异常：获取异常信息，保存到request域，保存form，转发到login.jsp
没异常：保存返回的user对象到session中！！！重定向到welcome.jsp(显示当前用户信息！)
UserService：login()方法
public User login(User form)：
使用用户名查询数据库，得到返回的User
返回为null，抛出异常，异常信息为（用户名不存在）
返回不为null，获取查询出来的user的password与form的password进行比较！如果不同：抛出异常（密码错误！）
如果相同，返回查询结果！
UserDao：
通过用户名查询用户！(已经存在了，不用再写了！)。
5.4 登录功能实现
登录界面jsp：
<body>
<h1>登录</h1>
<p style="color:red; font-weight:900">${msg }</p>
<!-- ${pageContext.request.contextPath }/RegistServlet -->
<form action="<c:url value='/LoginServlet'/>" method="post">
username：<input type="text" name="username" value="${user.username }" />
<br>
password：<input type="password" name="password" value="${user.password }" />
<br>
<input type="submit" value="登录">
</form>
</body>LoginServlet:
public class LoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");// 请求编码（POST）
response.setContentType("text/html;charset=utf-8");// 响应编码
// 依赖UserService
UserService userService = new UserService();
// 封装表单数据在User form中
User form = CommonUtils.toBean(request.getParameterMap(), User.class);
// 调用service的login方法，得到返回的User对象。
// 如果抛出异常：获取异常信息，保存到request域，再保存form，转发到login.jsp
// 如果没有异常：保存返回值到session中，重定向到welcome.jsp中
try {
User user = userService.login(form);
request.getSession().setAttribute("sessionUser", user);
response.sendRedirect(request.getContextPath()
+ "/user/welcome.jsp");
} catch (UserException e) {
request.setAttribute("msg", e.getMessage());
request.setAttribute("user", form);
request.getRequestDispatcher("/user/login.jsp").forward(request,
response);
}
}
}UserService：login()方法：
/**
* 登录功能
*
* @param form
* @throws UserException
*/
public User login(User form) throws UserException {
// 使用form中的username进行查询，得到User user
User user = userDao.findByUsername(form.getUsername());
// 如果为null，说明用户名不存在，抛出异常，异常信息为“用户名不存在！”
if (user == null)
throw new UserException("用户名不存在！");
// 比较 user的password和form的password，如果不同抛出异常，异常信息为“密码错误！”
if (!form.getPassword().equals(user.getPassword())) {
throw new UserException("密码错误！");
}
// 返回数据库查询出来的user,而不是form,因为form中只有用户名和密码，而user是所有用户信息!
return user;
}5.4 改写welcome页面
现在我们的welcome就算不登录也能进入，所以我们要进行一些改写，保证只有登录了才能进入这个界面。
<body>
<h1>欢迎登陆本系统！</h1>
<c:choose>
<c:when test="${empty sessionScope.sessionUser }">滚！！！</c:when>
<c:otherwise>
${sessionScope.sessionUser }
</c:otherwise>
</c:choose>
</body>六、界面演示
到这里我们的功能基本上就完成了。其他的再多的功能大家可以自己补充完善。
end.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
