web day14 web版简单注册登陆案例

项目

 

功能：

 > 注册

 > 登录

 

-------------

 

JSP：

  *login.jsp  --> 登录表单

  *regist.jsp --> 注册表单

  *index.jsp -->  主页(只有登录成功才能看到)

 

Servlet：

  *LoginServlet

  *RegistServlet

  *VerifyCodeServlet

   *QuitServlet

Service：

  *UserService --> 与用户相关的业务类

 

Dao：

  *UserDao --> 与用户相关的数据类

 

Domain：

  *User（对应数据库，还要对应所有表单）

   > username

   > password

   > verifyCode

 

-------------

 

数据库设计

  *users.xml

   <users>

     <user username="xxx" password="xxx"/>

     <user username="xxx" password="xxx"/>

   </users>

 

-------------

项目框架搭建 

步骤：

 

1. 创建空项目

2. 导包：

  *CommonUtils

  *commons-beanutils.jar

  *commons-logging.jar

  *dom4j

3. 建包

  *cn.itcast.user.domain

   > User

  *cn.itcast.user.dao

   > UserDao

  *cn.itcast.user.service

   > UserService

  *cn.itcast.user.web.servlet

   > LoginServlet

   > RegistServlet

4. jsp

  *login.jsp

  *regist.jsp

  *index.jsp

 

5. 在F盘下创建一个users.xml文件！

  * 添加根元素<users>

  * 保证文件为utf-8编码！！！

 

-------------

 

注册

 

regist.jsp

 > 第一步：完成regist.jsp的基本功能！

RegistServlet

 > 封装表单数据，封装到User对象中。

 > 调用service的regist()方法

    *如果这个方法没有出问题，输出“注册成功”

    *如果这个方法抛出了异常，把错误信息保存到request域，转发到regist.jsp(显示错误信息)

UserService#regist()

 > 没有返回值，但注册失败抛出一个自定义的异常！可以在异常中添加异常信息！(自定义一个异常类)

 > 校验用户名是否已被注册（通过用户名查询用户），如果已被注册，抛出异常，异常信息为“用户名已被注册！”

 > 添加用户

UserDao：通过业务分析，得到结果：需要提供两个方法

 > 按用户名查询用户对象：UserfindByUsername(String username)

 > 插入一个用户到数据库中：voidadd(User user)

 

工作：

1. 在service层添加一个UserException

2. dao；

  *User findByUsername(String username)

  *void add(User user)

3. service

  *void regist() throws UserException

 

4. servlet

  1).封装表单数据到User对象中

  2).使用user调用service的regist()方法

   3). 如果得到UserException，那么把异常信息保存到request域中，转发回regist.jsp，（数据的回显）

   4). 输出“注册成功”

 

-------------------

 

给注册添加验证码

 

1. VerifyCode类

  *BufferedImage getImage() --> 获取随机的验证码图片

  *String getText() --> 获取图片上的文本

  *static output(BfferedImage, OutputStream) --> 把图片写入到指定的输出流中。

 

2. VerifyCodeServlet

  * 获取随机验证码图片

  * 把验证码图片上的文本保存到session中

  * 把图片响应到response的outputStream中

 

3. regist.jsp

  * 添加<img src="指向Servlet" />

  * 添加一个文本框，用来输入验证码

  * “看不清，换一张”，是一个超链接。把上面的<img>的src重新再次指向Servlet！为了处理浏览器的缓存，需要使用时间来做参数！

 

4. 修改RegistServlet

  * 校验验证码！

  * 错误：保存表单数据到request域、保存错误信息到request域，转发回regist.jsp

  * 正确：什么都不做，向下执行原来代码！

 

-------------------

 
服务器端表单（输入）校验

 

我们把这段校验，放到获取表单数据之后，验证码校验之前！

 

1. 使用Map类型来装载错误信息！

  *key：表单项名称，例如：username、password、verifyCode

  *value：

   > 非空：用户名不能为空，或者是“密码不能为空”

   > 长度：用户名长度必须在3~20之间　密码长度必须在3~20之间

 

2. 在校验失败时，向map添加错误信息！那个字段出错，就给哪个字段添加错误信息！

3. 判断map是否为空（长度是否为0），如果不空，说明有错误存在，保存map到request域，保存form到request域（回显），转发回regist.jsp

4. 在regist.jsp页面中，显示map中的错误信息。${map.username}

 

=================================

=================================

=================================

 
登录功能

 

页面：login.jsp--> 登录表单！

 

LoginServlet -->

  1. 获取表单数据，封装到User中

  2. 调用service的login()方法，传递form过去！

  3. 如果service的login()方法，没有抛出异常！返回一个User对象！

   4. 有异常：获取异常信息，保存到request域，保存form，转发到login.jsp

   5. 没异常：保存返回的user对象到session中！！！重定向到welcome.jsp(显示当前用户信息！)

 

UserService#login()

 public User login(User form) {...}

  1. 使用用户名查询数据库，得到返回的User

   > 返回为null，抛出异常，异常信息为（用户名不存在）

   > 返回不为null，获取查询出来的user的password与form的password进行比较！如果不同：抛出异常（密码错误！）\

   > 如果相同，返回查询结果！

 

UserDao

  1. 通过用户名查询用户！(已经存在了，不用再写了！)

 

 ====================================================

代码

服务器端表单校验(写入校验)

在jsp相应表单行添加map的全域属性查找显示(略)

/* * 添加新任务（表单校验） * 1. 创建一个Map，用来装载所有的表单错误信息 *   在校验过程中，如果失败，向map添加错误信息，其中key为表单字段名称 * 2. 校验之后，查看map长度是否大于0，如果大于0，说明有错误信息，就是有错误！ *   > 保存map到request中，保存form到request中，转发到regist.jsp *  * 3. 如果map为空，说明没有错误信息，向下执行！ */// 用来装载所有错误信息Map<String,String> errors = new HashMap<String,String>();// 对用户名进行校验String username = form.getUsername();//获取表单的usernameif(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 sessionVerifyCode = (String) request.getSession().getAttribute("session_vcode");String verifyCode = form.getVerifyCode();if(verifyCode == null || verifyCode.trim().isEmpty()) {errors.put("verifyCode", "验证码不能为空！");} else if(verifyCode.length() != 4) {errors.put("verifyCode", "验证码长度必须为4！");} else if(!verifyCode.equalsIgnoreCase(sessionVerifyCode)) {errors.put("verifyCode", "验证码错误！");}/* * 判断map是否为空，不为空，说明存在错误 */if(errors != null && errors.size() > 0) {/* * 1. 保存errors到request域 * 2. 保存form到request域，为了回显 * 3. 转发到regist.jsp */request.setAttribute("errors", errors);request.setAttribute("user", form);request.getRequestDispatcher("/user/regist.jsp").forward(request, response);return;}

UserDao

public class UserDao {private String path;public UserDao() {path = this.getClass().getResource("/users.xml").getPath();}public void add(User user) {try {SAXReader reader = new SAXReader();Document doc = reader.read(path);Element root = doc.getRootElement();Element userEle = root.addElement("user");userEle.addAttribute("username", user.getUsername());userEle.addAttribute("password", user.getPassword());// 创建格式化器，使用\t缩进，添加换行OutputFormat format = new OutputFormat("\t", true);// 清空数据中原有的换行format.setTrimText(true);// 创建XML输出流对象XMLWriter writer = new XMLWriter(new FileWriter(path), format);// 输出Documentwriter.write(doc);// 关闭流writer.close();} catch (Exception e) {throw new RuntimeException(e);}}public User findByUsername(String username) {try {SAXReader reader = new SAXReader();Document doc = reader.read(path);Element ele = (Element) doc.selectSingleNode("//user[@username='" + username + "']");if(ele == null) {return null;}User user = new User();user.setUsername(ele.attributeValue("username"));user.setPassword(ele.attributeValue("password"));return user;} catch (Exception e) {throw new RuntimeException(e);}}}

UserService

public class UserService {private UserDao userDao = new UserDao();public User login(String username, String password) throws UserException {User user = userDao.findByUsername(username);if(user == null) {throw new UserException("用户名错误！");}if(!user.getPassword().equals(password)) {throw new UserException("密码错误！");}return user;}public void regist(User user) throws UserException {User _user = userDao.findByUsername(user.getUsername());if(_user != null) {throw new UserException("用户名已注册！");}userDao.add(user);}}

UserException

public class UserException extends Exception {public UserException() {}public UserException(String message, Throwable cause) {super(message, cause);}public UserException(String message) {super(message);}public UserException(Throwable cause) {super(cause);}}

QuitServlet

public class QuitServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 使session失效request.getSession().invalidate();response.sendRedirect(request.getContextPath() + "/index.jsp");}}

LoginServlet

public class LoginServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String username = request.getParameter("username");String password = request.getParameter("password");String loginCode = request.getParameter("loginCode");if(username == null || username.trim().isEmpty()) {request.setAttribute("msg", "用户名不能为空!");request.setAttribute("username", username);request.getRequestDispatcher("/login.jsp").forward(request, response);return;}if(password == null || password.trim().isEmpty()) {request.setAttribute("msg", "密码不能为空!");request.setAttribute("username", username);request.getRequestDispatcher("/login.jsp").forward(request, response);return;}if(loginCode == null || loginCode.trim().isEmpty()) {request.setAttribute("msg", "验证码不能为空！");request.setAttribute("username", username);request.getRequestDispatcher("/login.jsp").forward(request, response);return;}String vCode = (String)request.getSession().getAttribute("loginCode");request.getSession().removeAttribute("loginCode");if(!vCode.equalsIgnoreCase(loginCode)) {request.setAttribute("msg", "验证码错误！");request.setAttribute("username", username);request.getRequestDispatcher("/login.jsp").forward(request, response);return;}UserService userService = new UserService();User user;try {user = userService.login(username, password);} catch (UserException e) {request.setAttribute("msg", e.getMessage());request.setAttribute("username", username);request.getRequestDispatcher("/login.jsp").forward(request, response);return;}request.getSession().setAttribute("user", user);request.getRequestDispatcher("/index.jsp").forward(request, response);}}

RegistServlet

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");User user = new User();try {BeanUtils.populate(user, request.getParameterMap());} catch (Exception e) {}String loginCode = request.getParameter("registCode");String repassword = request.getParameter("repassword");if(user.getUsername() == null || user.getUsername().trim().isEmpty()) {request.setAttribute("msg", "用户名不能为空!");request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(user.getPassword() == null || user.getPassword().trim().isEmpty()) {request.setAttribute("msg", "密码不能为空!");request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(!user.getPassword().equals(repassword)) {request.setAttribute("msg", "两次输入不一致！");request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(loginCode == null || loginCode.trim().isEmpty()) {request.setAttribute("msg", "验证码不能为空！");request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}String vCode = (String)request.getSession().getAttribute("registCode");request.getSession().removeAttribute("registCode");if(!vCode.equalsIgnoreCase(loginCode)) {request.setAttribute("msg", "验证码错误！");request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}UserService userService = new UserService();try {userService.regist(user);request.getRequestDispatcher("/login.jsp").forward(request, response);} catch (UserException e) {request.setAttribute("msg", e.getMessage());request.setAttribute("user", user);request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}}}

VerifyCodeServlet

public class VerifyCodeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String name = request.getParameter("name");VerifyCode vc = new VerifyCode();//创建验证码类BufferedImage image  = vc.getImage();//创建验证码图片request.getSession().setAttribute(name, vc.getText());//获取验证码文本System.out.println(vc.getText());VerifyCode.output(image, response.getOutputStream());//输出图片到页面}}

index.jsp

  <body>    <h1>主页</h1>    <hr/><c:choose><c:when test="${empty sessionScope.user }">您还没有登录</c:when><c:otherwise>用户名：${sessionScope.user.username }<a href="<c:url value='/QuitServlet'/>">退出</a></c:otherwise></c:choose>  </body>

regist.jsp

  <body>    <h1>注册</h1>    <hr/>    <p style="font-weight: 900; color: red;">${msg }</p>    <form action="<c:url value='/RegistServlet'/>" method="post">    用户名：<input type="text" name="username" value="${user.username }" /><br/>    密　码：<input type="password" name="password"/><br/>    确认密码：<input type="password" name="repassword"/><br/>    验证码：<input type="text" name="registCode" size="2"/>    <img id="vCode" src="<c:url value='/VerifyCodeServlet?name=registCode'/>" border="2"/>    <a href="javascript:_change()" style="font-size: 12;">看不清，换一张</a><br/>        <input type="submit" value="注册"/>    </form>  </body>    <script type="text/javascript">function _change() {var img = document.getElementById("vCode");img.src = "<c:url value='/VerifyCodeServlet?name=registCode&'/>" + new Date().getTime();}    </script>

login.jsp

  <body>    <h1>登录</h1>    <hr/>    <p style="font-weight: 900; color: red;">${msg }</p>    <form action="<c:url value='/LoginServlet'/>" method="post">    用户名：<input type="text" name="username" value="${user.username }" /><br/>    密　码：<input type="password" name="password"/><br/>    验证码：<input type="text" name="loginCode" size="2"/>    <img id="vCode" src="<c:url value='/VerifyCodeServlet?name=loginCode'/>" border="2"/>    <a href="javascript:_change()" style="font-size: 12;">看不清，换一张</a><br/>        <input type="submit" value="登录"/>    </form>  </body>    <script type="text/javascript">    function _change() {    var img = document.getElementById("vCode");    img.src = "<c:url value='/VerifyCodeServlet?name=loginCode&'/>" + new Date().getTime();    }    </script>