【尚硅谷_书城项目第六、七阶段】【学习笔记】寒假javaweb学习之旅2.2

javaweb属实是比蓝桥杯好玩，算法🐕都不学，话说，明天就要转线下上课了🤭

在这个阶段，我们需要完成3个模块、用户模块、购物车模块 、订单模块

🤗1、用户模块

1.1、登陆–显示用户名

我们找到登录的Servlet，src/main/java/com/flzj/web/UserServlet.java 在请求转发之前，把loginuser 存到Session域中,request.getSession().setAttribute("user",loginUser )

public class UserServlet extends BaseServlet {
   
   

    private UserService userService = new UserServiceImpl();

    protected void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
   
        //        1、获取请求的参数
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("接收到用户的账为"+username+"\t"+password);
        //        2、调用XxxService. xxx()处理业务
        //        userService. login(登录
        User loginUser = userService.login(new User(null, username, password, null));
        //                3、根据login()方法返回结果判断登录是否成功
        if(!(loginUser == null)) {
   
   
            //                成功
            //                跳到成功页面login_ success. html
            // 保存用户登入的信息到Session域中
            request.getSession().setAttribute("user",loginUser);
            System.out.println(username + " 登入成功");
            request.getRequestDispatcher("/pages/user/login_success.jsp").forward(request,response);
        }else {
   
   
            // 失败
            ...
        }

在src/main/webapp/pages/common/login_success_menu.jsp，我们修改展示出来的效果

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

同时首页也需要更改，我们登入以后，一般的网站首页，没有 登入 | 注册 这一选项，效果如下图

我们需要来到src/main/webapp/pages/client/index.jsp ，进行一整猛改

<div id="header">
    <img class="logo_img" alt="" src="static/img/logo.gif" >
    <span class="wel_word">网上书城</span>

    <div>
        <%--如果用户还没有登入，显示【登入 和 注册 的菜单】--%>
        <c:if test="${empty sessionScope.user}">
            <a href="pages/user/login.jsp">登录</a> |
            <a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
        </c:if>
        <%--如果用户已经登入，显示登入成功的信息--%>
        <c:if test="${not empty sessionScope.user}">
            <span>欢迎<span class="um_span">${
   
   sessionScope.user.username}</span>光临尚硅谷书城</span>
            <a href="pages/order/order.jsp">我的订单</a>
            <a href="index.jsp">注销</a>&nbsp;&nbsp;
        </c:if>
        <a href="pages/cart/cart.jsp">购物车</a>
        <a href="pages/manager/manager.jsp">后台管理</a>
    </div>
</div>

1.2、登出-注销用户

1、销毁Session中用户登入的信息

2、重定向到首页（或登入界面）

又回到，我们的src/main/java/com/flzj/web/UserServlet.java，这次，我们完善logout()方法

protected void logout(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
   
    //        1、销毁Session中用户登入的信息
    request.getSession().invalidate();
    //        2、重定向到首页（或登入界面）
    response.sendRedirect(request.getContextPath());
}

同时在src/main/webapp/pages/common/login_success_menu.jsp 和 src/main/webapp/pages/client/index.jsp 的

<a href="userServlet?action=logout">注销</a>

1.3、表单重复提交-验证码

表单重复提交有三种常见的情况:

一、提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键F5,就会发起最后一次的请求。造成表单重复提交问题。

解决方法:使用重定向来进行跳转

二、用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败,就会着急，然后多点了几次提交操作,也会造成表单重复提交。

三、用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复提交。

😄这时候，家人们就会问了，二、三怎么解决，我们可以通过验证码，来解决，下面是图解

这里我们用谷歌 kaptcha 图片验证

1.4、使用谷歌 kaptcha 图片验证

1、导包

kaptcha-2.3.2.jar

2、在web.xml中去配置用于生成验证码的Servlet程序

<servlet>
    <servlet-name>KaptchaServlet</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>KaptchaServlet</servlet-name>
    <url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

3、在表当中使用img标签去显示验证图片并使用

我们来到src/main/webapp/pages/user/regist.jsp ，在验证码部分，修改src属性，和小改下style属性，使验证码更好看

<input class="itxt" type="text" style="width: 80px;" id="code"
       name="code"
       />
<img alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px ; width: 100px ; height: 28px">						

4、在服务器获取谷歌生成的验证码，和客户端发来的验证码进行比较

protected void regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
   
    // 获取Session中的验证码
    String token = (String)request.getSession().getAttribute(KAPTCHA_SESSION_KEY);
    // 删除Session中的验证码
    request.getSession().removeAttribute(KAPTCHA_SESSION_KEY);

    //  1获取请求的参数
    ...
        // 2对验证码进行判断
        if(token != null && token.equals(code)) {
   
   
            //              正确

            //        3、检查用户名是否可用
            if(!userService.existsUsername(username)) {
   
   
                //                可用
                //        调用Sservice保存到数据库
                //userService.registUser(new User(null,username,password,email));
                //        跳到注册成功末面regist_success.jsp
               request.getRequestDispatcher("/pages/user/regist_success.jsp").forward(request,response);
// ...

效果

1.5、用户点击，替换验证码

在src/main/webapp/pages/user/regist.jsp下，给图片一个class，并给它绑定上单击事件

<img id="code_img" src="kaptcha.jpg" style="float: right; margin-right: 40px ; width: 100px ; height: 28px">				

$("#code_img").click(function (){
   
   
    // 在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象
    // src属性表示验证码的img标签的 图片路径 它可读可写
    this.src = "${basePath}kaptcha.jpg?d=" + new Date();
});

这时候，好奇的家人们，会问了，为什么要加new Date()这个时间戳呢，我们是为了解决浏览器缓存，导致点击图片不更换验证码的事情发生，如下图所示

🤗2、购物车模块

对购物车模块进行分析

这里我们使用Session版本，来实现购物车

2.1、购物车模型的创建

购物车的商品项

public class CartItem {
   
   
    private Integer id;
    private String name;
    private Integer count;
    private BigDecimal price;
    private BigDecimal totalPrice;
    // construcet、getXxx、setXxx、toString 省略
}

购物车对象

public class Cart {
   
   
    private Integer totalCount;
    private BigDecimal totalPrice;
    private List<CartItem> items = new