商城网站--简易购物车实现

      晚上心血来潮，为了复习之前学过的内容，温故而至知新，所以决定写一个简易的网络商城购物车，该小项目采用的技术非常简单，基本上都是原生的，算是对基础知识的复习。

一、项目实现

项目实现是基于Servlet的，数据库采用MySql5.6,项目中用到了很多技术，下面通过代码来说明。项目结构如图所示：

      该项目采用MVC模式，Controller负责接收请求并处理结果，服务层实现业务逻辑，dao层负责和数据库进行交互，视图层测采用了普通的html页面显示结果，为了提高安全性与效率为HttpRequest和HttpResponse添加了ThreadLocal变量，提高线程的安全性。关于Cookie，单独写了一个类CookieTools，该类提供了对cookie的增、删、改操作的方法。单独编写了一个过滤器，目的是对中文编码utf-8进行过滤，防止出现乱码。另外，购物车的表格稍微加了一点样式，这样看起来不是那么的单调。

      项目实现思想：该项目实现了两个购物车，分别是公共购物车和私有购物车，公共购物车是在没有登陆状态下的所看到，任何人都可以操作，私有购物车是登陆以后才能看到的，公共购物车和私有购物车的商品可以合并，合并以后可以进行下单，下单后跳转到支付页面填写支付收货人信息等，收货人信息实现了3级联动。

下面详细介绍项目的实现过程:

首先创建基于javaEE的项目shopping_cart,导入相关的jar包，这里主要用到的就是mysql-connector-java-5.1.7-bin.jar这个包，然后按照MVC模型的思想分别编写各层的代码。

1) 数据库的设计

      该项目涉及到的数据表格有：userinfo表，主要存放的是用户的信息，只有数据库中的用户才能够登陆。还有另外3张，分别为省表、市表和县表，供填写收货人信息和实现三级联动使用。表结构如图所示：

 2）封装HttpRequest和HttpResponse

 该类位于utils包下：将HttpRequest和HttpResponse放在ThreadLocal变量中，采用set方法放入，get方法获取，代码如下：

package utils;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RequestResponseBox {

    private static ThreadLocal<HttpServletRequest> requestBox = new ThreadLocal<>();
    private static ThreadLocal<HttpServletResponse> responseBox = new ThreadLocal<>();

    public static void setRequest(HttpServletRequest request) {
        requestBox.set(request);
    }

    public static void setResponse(HttpServletResponse response) {
        responseBox.set(response);
    }

    public static HttpServletRequest getRequest() {
        return requestBox.get();
    }

    public static HttpServletResponse getResponse() {
        return responseBox.get();
    }

}

3）封装cookie

该类提供对cookie的增删改的操作，具体代码如下：

public class CookieTools {

    /**
     * 保存cookie
     * @param cookieName
     * @param cookieValue
     * @param maxAge
     * @return void
     * @author wangsj
     */
    public void save(String cookieName, String cookieValue, int maxAge) {
        try {
            cookieValue = java.net.URLEncoder.encode(cookieValue, "utf-8");
            Cookie cookie = new Cookie(cookieName, cookieValue);
            cookie.setMaxAge(maxAge);
            RequestResponseBox.getResponse().addCookie(cookie);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
    }

    /**
     * 获取cookie值
     * @param cookieName
     * @return
     * @return String
     * @author wangsj
     */
    public String getValue(String cookieName) {
        String cookieValue = null;
        try {
            Cookie[] cookieArray = RequestResponseBox.getRequest().getCookies();
            if (cookieArray != null) {
                for (int i = 0; i < cookieArray.length; i++) {
                    if (cookieArray[i].getName().equals(cookieName)) {
                        cookieValue = cookieArray[i].getValue();
                        cookieValue = java.net.URLDecoder.decode(cookieValue, "utf-8");
                        break;
                    }
                }
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return cookieValue;
    }

    /**
     * 根据cookie名删除cookie
     * @param cookieName
     * @return void
     * @author wangsj
     */
    public void delete(String cookieName) {
        Cookie cookie = new Cookie(cookieName, "");
        cookie.setMaxAge(0);
        RequestResponseBox.getResponse().addCookie(cookie);
    }

}

3）封装Filter

过滤器的主要作用是对传入的request,response提前过滤掉一些信息，或者提前设置一些参数（本项目主要进行中文编码），然后再传入servlet是，防止中文出现乱码。比较简单，代码如下：

RequestResponseFilter：

package filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import utils.RequestResponseBox;

public class RequestResponseFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        RequestResponseBox.setRequest((HttpServletRequest) request);
        RequestResponseBox.setResponse((HttpServletResponse) response);
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }

}

CharSetFilter：

package filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class CharSetFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }

}

4）封装数据库连接工具

该类主要是对数据库进行连接，对该类进行封装，方便dao层调用。代码如下：

GetConnectionType类

package dbtools;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class GetConnectionType {
    public static Connection getConnection() throws SQLException, ClassNotFoundException {
        String url = "jdbc:mysql://localhost:3306/test";
        String driver = "com.mysql.jdbc.Driver";
        String username = "root";
        String password = "123456";
        Class.forName(driver);
        Connection connection = DriverManager.getConnection(url, username, password);
        return connection;
    }
}

GetConnection类，该类依然使用了ThreadLocal变量，代码如下：

package dbtools;

import java.sql.Connection;
import java.sql.SQLException;

public class GetConnection {
    
    private static ThreadLocal<Connection> local = new ThreadLocal<>();
    //获取链接
    public static Connection getConnection() throws ClassNotFoundException, SQLException {
        Connection conn = local.get();
        if (conn == null) {
            conn = GetConnectionType.getConnection();
            conn.setAutoCommit(false);
            local.set(conn);
        }
        return conn;
    }
    //提交事务
    public static void commit() {
        try {
            if (local.get() != null) {
                local.get().commit();
                local.get().close();
                local.set(null);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    //回滚
    public static void rollback() {
        try {
            if (local.get() != null) {
                local.get().rollback();
                local.get().close();
                local.set(null);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

5）实现第一个功能：登陆

      登陆的基本思想：对输入的用户名和密码进行校验，然后到数据库去匹配，如果匹配成功则允许等录，否则，提示用户有误。该功能涉及到UserinfoDao，UserinfoService，Login这些类以及index.js里面编写的login方法以及html页面。代码如下：

UserinfoDao:

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import dbtools.GetConnection;
import entity.Userinfo;

public class UserinfoDao {

    public Userinfo getUserinfo(String username, String password) throws SQLException, ClassNotFoundException {
        Userinfo userinfo = null;
        String sql = "select * from userinfo where username=? and password=?";
        Connection conn = GetConnection.getConnection();
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setString(1, username);
        ps.setString(2, password);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            int idDB = rs.getInt("id");
            String usernameDB = rs.getString("username");
            String passwordDB = rs.getString("password");
            userinfo = new Userinfo();
            userinfo.setId(idDB);
            userinfo.setUsername(usernameDB);
            userinfo.setPassword(passwordDB);
        }
        rs.close();
        ps.close();
        return userinfo;
    }

    public Userinfo getUserinfo(String username) throws SQLException, ClassNotFoundException {
        Userinfo userinfo = null;
        String sql = "select * from userinfo where username=?";
        Connection conn = GetConnection.getConnection();
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setString(1, username);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            int idDB = rs.getInt("id");
            String usernameDB = rs.getString("username");
            String passwordDB = rs.getString("password");
            userinfo = new Userinfo();
            userinfo.setId(idDB);
            userinfo.setUsername(usernameDB);
            userinfo.setPassword(passwordDB);
        }
        rs.close();
        ps.close();
        return userinfo;
    }
}

UserinfoService

package service;

import java.sql.SQLException;

import cookietools.CookieTools;
import dao.UserinfoDao;
import entity.Userinfo;
import f.F;

public class UserinfoService {

    private UserinfoDao userinfoDao = new UserinfoDao();
    private CookieTools cookieTools = new CookieTools();

    public boolean login(String username, String password) throws SQLException, ClassNotFoundException {
        Userinfo userinfo = userinfoDao.getUserinfo(username, password);
        if (userinfo != null) {
            cookieTools.save(F.CURRENT_LOGIN_USERNAME, username, 36000);
            return true;
        } else {
            return false;
        }
    }

    public Userinfo getUserinfoByUsername(String username) throws SQLException, ClassNotFoundException {
        Userinfo userinfo = userinfoDao.getUserinfo(username);
        return userinfo;
    }

    public String getCurrentLoginUsername() {
        return cookieTools.getValue(F.CURRENT_LOGIN_USERNAME);
    }

}

index.js

function login(){
    var usernameValue = $("#username").val();
    var passwordValue = $("#password").val();
    $.post("login?t=" + new Date().getTime(), {
        "username": usernameValue,
        "password": passwordValue
    }, function(data){
        if (data == 'true') {
            $("#loginForm").hide();
            initWelcomeUI(usernameValue);
        }
        else {
            alert("登陆失败请重新输入！");
        }
    });
}

index.html

<div id="loginDIV">
            <div id="loginForm" style="display:none">
                username:<input type="text" id="username">
                <br/>
                password:<input type="text" id="password">
                <br/>
                <input type="button" value="登陆" onclick="javascript:login()">
            </div>
            <div id="welcomeDIV" style="display:none">
            </div>
        </div>

 运行结果如下：比较单调，没有加任何样式

6）购物车的实现

      购物车实现比较麻烦，本项目采用的是字符串拼接的方式实现的，比较原始，稍微复杂一点，加入购物车代码在CartService类中，

商品信息采用的是：A商品id_数量-B商品id_数量的形式实现，部分代码如下：

public void putCart(String bookIdParam) throws SQLException, ClassNotFoundException {
        String cartName = "";
        String cartValue = "";
        String newCartValue = "";

        String currentLoginUsername = userinfoService.getCurrentLoginUsername();
        if (currentLoginUsername == null) {
            cartName = F.PUBLIC_CART_NAME;
        } else {// privataCart_userId
            int userId = userinfoService.getUserinfoByUsername(currentLoginUsername).getId();
            cartName = F.PRIVATE_CART_NAME_PREFIX + userId;
        }
        cartValue = cookieTools.getValue(cartName);
        if (cartValue == null) {
            cartValue = bookIdParam + "_1";
        } else {
            String[] bookinfoArray = cartValue.split("\-");
            boolean isFindBookId = false;
            for (int i = 0; i < bookinfoArray.length; i++) {
                String bookId = bookinfoArray[i].split("\_")[0];
                String bookNum = bookinfoArray[i].split("\_")[1];
                if (bookId.equals(bookIdParam)) {
                    isFindBookId = true;
                    break;
                }
            }
            if (isFindBookId == false) {
                cartValue = cartValue + "-" + bookIdParam + "_1";
            } else {
                for (int i = 0; i < bookinfoArray.length; i++) {
                    String bookId = bookinfoArray[i].split("\_")[0];
                    String bookNum = bookinfoArray[i].split("\_")[1];
                    if (bookId.equals(bookIdParam)) {
                        newCartValue = newCartValue + "-" + bookId + "_" + ((Integer.parseInt(bookNum)) + 1);
                    } else {
                        newCartValue = newCartValue + "-" + bookId + "_" + bookNum;
                    }
                }
                newCartValue = newCartValue.substring(1);
                cartValue = newCartValue;
            }
        }
        System.out.println(cartValue + "     " + cartName);
        cookieTools.save(cartName, cartValue, 36000);
    }

商品信息的传输时采用以下的信息：

<list>
  <bookinfo>
    <id>1</id>
    <bookname>Java</bookname>
    <bookprice>33.56</bookprice>
  </bookinfo>
  <bookinfo>
    <id>2</id>
    <bookname>c++</bookname>
    <bookprice>56.45</bookprice>
  </bookinfo>
  <bookinfo>
    <id>3</id>
    <bookname>Hibernat</bookname>
    <bookprice>80.55</bookprice>
  </bookinfo>
  <bookinfo>
    <id>4</id>
    <bookname>Struts</bookname>
    <bookprice>53.45</bookprice>
  </bookinfo>
  <bookinfo>
    <id>5</id>
    <bookname>Java</bookname>
    <bookprice>34.22</bookprice>
  </bookinfo>
  <bookinfo>
    <id>6</id>
    <bookname>we</bookname>
    <bookprice>12.22</bookprice>
  </bookinfo>
</list>

 此外，书籍数量的更新采用ajax实现，实现页面局部更新，从而避免页面更新时的闪动，下面是部分的数量更新代码：

function updateCartBookNum(operateType, cartType, bookId){
    $.post("updateCartBookNum?t=" + new Date().getTime(), {
        "operateType": operateType,
        "cartType": cartType,
        "bookId": bookId
    }, function(data){
        if (data == '1') {
            updateCartBookNumTRInfo(cartType, bookId);
            setCartBottomInfoTR(cartType);
        }
        else {
            alert("更新书籍数量失败！");
        }
    });
}

7） 购物车实现效果

输入用户名登陆后的页面如下所示：

当点击放入购物车按钮是会有一个动画效果，显示2秒然后消失，当点击显示购物车按钮时，会显示私有购物车的一些信息，如下所示：

 

这里显示的是双购物车，即私有购物车和公共购物车，双购物车中的商品可以进行合并，合并实现的思想是首先判断商品id，如果id相同则进行数量的相加，否则进行字符串的拼接。代码如下：

public void putPrivateCart(String publicCart_id_num_String) throws ClassNotFoundException, SQLException {
        String cartName = "";
        String cartValue = "";
        String newCartValue = "";

        String currentLoginUsername = userinfoService.getCurrentLoginUsername();
        int userId = userinfoService.getUserinfoByUsername(currentLoginUsername).getId();
        cartName = F.PRIVATE_CART_NAME_PREFIX + userId;
        cartValue = cookieTools.getValue(cartName);

        if (cartValue != null) {

            String[] publicBookinfoArray = publicCart_id_num_String.split("-");
            String[] privateBookinfoArray = cartValue.split("-");

            String differenceString = "";

            for (int i = 0; i < publicBookinfoArray.length; i++) {
                String bookIdPublic = publicBookinfoArray[i].split("\_")[0];
                String bookNumPublic = publicBookinfoArray[i].split("\_")[1];
                boolean isFindBookId = false;
                for (int j = 0; j < privateBookinfoArray.length; j++) {
                    String bookIdPrivate = privateBookinfoArray[j].split("\_")[0];
                    String bookNumPrivate = privateBookinfoArray[j].split("\_")[1];
                    if (bookIdPublic.equals(bookIdPrivate)) {
                        privateBookinfoArray[j] = bookIdPrivate + "_"
                                + ((Integer.parseInt(bookNumPublic)) + (Integer.parseInt(bookNumPrivate)));
                        isFindBookId = true;
                    }
                }
                if (isFindBookId == false) {
                    differenceString = differenceString + "-" + bookIdPublic + "_" + bookNumPublic;
                }
            }
            for (int i = 0; i < privateBookinfoArray.length; i++) {
                newCartValue = newCartValue + "-" + privateBookinfoArray[i];
            }
            newCartValue = newCartValue + differenceString;
            newCartValue = newCartValue.substring(1);
            cartValue = newCartValue;
        } else {
            cartValue = publicCart_id_num_String;
        }
        System.out.println(cartValue);
        cookieTools.save(cartName, cartValue, 36000);
    }

 点击putPrivateCart按钮，如果左侧没有商品被选中的时候，会弹出提示框，如图所示：

选中，左侧按钮所对应的商品，便可以成功放入私有购物车，放入购物车就可以进行下单操作了，如图点击左下角的输入订单信息，便可以进入，订单页面，填好订单，可以进行购物车的确认以及订单的提交。

二、总结

     到这里，一个简易的购物车就基本实现了，但这仅仅只是宇哥雏形，改进的地方还有很多，鉴于篇幅和时间的关系，只贴出了部分代码，其他源码，感兴趣的朋友可以下载附件研究改进，待改进的地方:

1、数据库的设计有待完善，数据库中的字段可以添加数量的实时更新，显示库存等。

2、商品添加购物车采用的字符串拼接比较麻烦，可以采用json格式的字符串和前台进行交互。

3、异常的捕捉不是很好，可以考虑多加入异常的处理。

4、没有日志的记录，可以采用log4j对日志进行处理，方便调试，明确问题出在哪里。

5、可以考虑引入Spring框架，进行充分解耦。

6、登录功能的设计有待完善，后期可以加入注册功能，登录功能可以用SpringMVC或者Struts2框架进行改进，另外登陆验证可以采用前后台双向校验的方式进行验证。

　　以上这些均是该项目有待改进的地方，还有很多需要完善的地方，希望对大家的学习有所帮助。

 源码下载地址：http://files.cnblogs.com/files/10158wsj/shopping_cart.rar