《尚硅谷》JavaWeb课程书城项目笔记——第三阶段:用户注册和登陆页面的优化

目录

1、页面Jsp动态化

2、抽取页面中的相同内容封装到单独的jsp页面

3、修改base标签获取服务器地址为动态获取

4、错误信息提示及表单回显

5、代码优化

6、数据的封装及BeanUtils工具类的使用


1、页面Jsp动态化

  • 在所有的html页面首行添加指令
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  • 将所有的.html页面文件后缀名改为.jsp

2、抽取页面中的相同内容封装到单独的jsp页面

用户页面的菜单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div>
    <span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
    <a href="../order/order.jsp">我的订单</a>
    <a href="../../index.jsp">注销</a>&nbsp;&nbsp;
    <a href="../../index.jsp">返回</a>
</div>

管理页面的菜单

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div>
    <a href="book_manager.jsp">图书管理</a>
    <a href="order_manager.jsp">订单管理</a>
    <a href="../../index.jsp">返回商城</a>
</div>

页面的base标签、css样式、jQuery引用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<base href="http://localhost:8080/book/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>

页脚信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
</div>

3、修改base标签获取服务器地址为动态获取

<%
    String basePath = request.getScheme()
            + "://" + request.getServerName()
            + ":" + request.getServerPort()
            + request.getContextPath()
            + "/";
%>

<base href="<%=basePath%>">

4、错误信息提示及表单回显

登陆页面错误信息回写

if(userService.login(username,password) == null) {
            // 返回值为null,登陆失败
            //回写错误信息和用户名
            req.setAttribute("msg","用户名或密码错误!");
            req.setAttribute("username",username);
            // 跳转回登录页面
            req.getRequestDispatcher("/pages/user/login.jsp").forward(req,resp);
        } else {
            // 返回值不为null,登陆成功
            // 跳转到登陆成功页面
            req.getRequestDispatcher("/pages/user/login_success.jsp").forward(req,resp);
        }

登陆信息错误页面表单回显

<div class="msg_cont">
	<b></b>
	<span class="errorMsg">
		<%=request.getAttribute("msg")==null?"请输入用户名和密码":request.getAttribute("msg")%>
	</span>
</div>
<div class="form">
	<form action="loginServlet" method="post">
		<label>用户名称:</label>
		<input class="itxt" type="text" placeholder="请输入用户名"
				autocomplete="off" tabindex="1" name="username"
				value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>" />
		<br />
		<br />
		<label>用户密码:</label>
		<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" />
		<br />
		<br />
		<input type="submit" value="登录" id="sub_btn" />
	</form>
</div>

注册页面错误信息回写

//        2 校验验证码
        if("abcd".equalsIgnoreCase(code)) {
//        验证码正确
//            3 验证用户名是否存在
            if(userService.existsUsername(username)) {
//                用户名不可用
                System.out.println("用户名不可用");
                //回写错误信息
                req.setAttribute("msg","用户名已存在");
                req.setAttribute("username",username);
                req.setAttribute("email",email);
//                跳转回注册页面
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
            } else {
//                用户名可用
//                保存注册信息
                userService.registUser(new User(null,username,password,email));
//                跳转到注册成功页面
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
            }
        } else {
            //验证码错误
            System.out.println("验证码错误");
            //回写错误信息
            req.setAttribute("msg","验证码错误");
            req.setAttribute("username",username);
            req.setAttribute("email",email);
//            跳回注册页面
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
        }

注册信息错误页面表单回显

<div class="tit">
	<h1>注册尚硅谷会员</h1>
	<span class="errorMsg">
        <%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>
	</span>
</div>
<label>用户名称:</label>
<input class="itxt" type="text" placeholder="请输入用户名"
	   autocomplete="off" tabindex="1" name="username" id="username"
	   value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>" />
<br />
<label>电子邮件:</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
	   autocomplete="off" tabindex="1" name="email" id="email"
	   value="<%=request.getAttribute("email")==null?"":request.getAttribute("email")%>" />
<br />

5、代码优化

将RegistServlet和LoginServlet合并为UserServlet

  • 合并代码
package web;

import pojo.User;
import service.UserService;
import service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class UserServlet extends HttpServlet{

    private UserService userService = new UserServiceImpl();

    /**
     * 登陆功能
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1 获取请求的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        // 2 调用UserService业务查询
        if(userService.login(username,password) == null) {
            // 返回值为null,登陆失败
            //回写错误信息和用户名
            req.setAttribute("msg","用户名或密码错误!");
            req.setAttribute("username",username);
            // 跳转回登录页面
            req.getRequestDispatcher("/pages/user/login.jsp").forward(req,resp);
        } else {
            // 返回值不为null,登陆成功
            // 跳转到登陆成功页面
            req.getRequestDispatcher("/pages/user/login_success.jsp").forward(req,resp);
        }
    }

    /**
     * 注册功能
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        1 获取参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        String code = req.getParameter("code");

//        2 校验验证码
        if("abcd".equalsIgnoreCase(code)) {
//        验证码正确
//            3 验证用户名是否存在
            if(userService.existsUsername(username)) {
//                用户名不可用
                System.out.println("用户名不可用");
                //回写错误信息
                req.setAttribute("msg","用户名已存在");
                req.setAttribute("username",username);
                req.setAttribute("email",email);
//                跳转回注册页面
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
            } else {
//                用户名可用
//                保存注册信息
                userService.registUser(new User(null,username,password,email));
//                跳转到注册成功页面
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
            }
        } else {
            //验证码错误
            System.out.println("验证码错误");
            //回写错误信息
            req.setAttribute("msg","验证码错误");
            req.setAttribute("username",username);
            req.setAttribute("email",email);
//            跳回注册页面
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getParameter("action");
        if("login".equals(action)) {
            // 执行登陆请求
            login(req,resp);
        } else {
            // 执行注册请求
            regist(req,resp);
        }
    }
}
  • 在用户页面表单中添加隐藏域,便于UserServlet区分注册请求与登录请求,修改表单的提交网址

使用反射替代if/else,获取请求的调用的业务


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getParameter("action");
        try {
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

将获取请求的功能抽出来单独封装,以便复用(用户模块、图书模块等都可以使用)

package web;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;

public abstract class BaseServlet extends HttpServlet{
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getParameter("action");
        try {
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
public class UserServlet extends BaseServlet

6、数据的封装及BeanUtils工具类的使用

导入相关Jar包

编写WebUtils

package utils;

import org.apache.commons.beanutils.BeanUtils;

import java.lang.reflect.InvocationTargetException;
import java.util.Map;

public class WebUtils {
    /**
     * 把 Map 中的值注入到对应的 JavaBean 属性中。
     * @param value
     * @param bean
     * @param <T>
     * @return
     */
    public static <T> T copyParamToBean(Map value,T bean) {

        try {
            System.out.println("注入之前:" + bean);
            /**
             * 把所有请求的参数都注入到对象当中
             */
            BeanUtils.populate(bean,value);

            System.out.println("注入之后:" + bean);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return bean;
    }
}
        User user = new User();
        WebUtils.copyParamToBean(req.getParameterMap(),user);

 

注:本文章所含内容来源于尚硅谷教育,仅供学习参考使用。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值