Java web实验购物网站（IDEA开发环境，JavaScript，JSP，Servlet，jQuery，Ajax，MySql等）——实现购物车

实验要求

• 掌握静态HTML, CSS，JavaScript,，JSP，Servlet，jQuery，Ajax等技术；
• 本实验为综合实验，学会灵活运用本课程所学的知识解决实际问题；
• 自选主题设计并建立一个购物网站(如花店网站，书店网站等）；
• 不建议使用框架，用基础知识去完成项目；
• 网站入口为:index.jsp。

实验开发工具及使用技术

• win10系统，浏览器
• MySql数据库，SQLyog数据库图形化工具
• IDEA集成开发环境（IDEA真的是神器，学生党从ecipse转过来不久，就深深爱上了它）
• Apache Tomcat服务器
• 基础知识HTML, CSS，JavaScript，JSP，Servlet，jQuery，Ajax，JSON，JDBC等等

准备工作

• 思考：不用框架，用基础知识来实现。这样一个人完成工作量就很大，所以我决定从网上下载前端静态模版，然后做简单修改来使用。
• 前端准备，基本页面，页面展示都完成后。
• 搭建好开发环境

完整项目目录结构

实验结果展示

主页面

登录页面

注册页面


个人信息页面


商品详细信息页面

购物车页面

结算页面

实验步骤

• 第一：根据项目需求设计数据库表结构，并且生成对应实体类
  • 用户信息表user，对应实体类User
    
    
  • 商品信息表product，对应实体类Product
    
    
  • 购物车信息表cart，对应实体类Cart
    
    
• 设计用户注册登录页面（以及修改个人信息）
  • 不建议使用过多的JSP来编写（如servlet，JDBC连接数据库等），尽管老师要求使用。
  • 把准备好的静态前端页面.html修改为.JSP动态，我仅仅是用来动态交互信息，==servlet和数据库操作都用java来写，虽然代码比JSP多了点，但是有IDEA根本不用害怕。==个人觉得用servlet来写比JSP思路清晰很多。
  • 言归正传，注册页面，用JS脚本，正则表达式来判断用户注册信息合法性，用ajax局部刷新来判断注册用户ID是否已经被注册过
  • 主要代码如下：注册页面function.js，后端表单发送数据servlet，数据库操作就不看了吧

function  FocusItem(obj) {
    var focus=$(obj).next('span');
    if (focus.attr('class')=='error'){
        obj.value="";
    }
    focus.html("");
    focus.removeClass("error");
}
function BlueItem(obj) {
    var msgBox=$(obj).next('span');
    switch ($(obj).attr('name')) {
        case "userName":
            if (obj.value==""){
                msgBox.addClass('error');
                msgBox.html('用户名不能为空');
            }else{
                var url="userIdCheck?useName="+encodeURI($(obj).val())+"&"+new Date().getTime();
                $.get(url,function (data) {
                    if (data>0){
                        msgBox.addClass('error');
                        msgBox.html("用户名已存在,请登录");
                    }
                })
            }
            break;
        case "name":
            if (obj.value==""){
                msgBox.addClass('error');
                msgBox.html('姓名不能为空');
            }
            break;
        case "passWord":
            if (obj.value==""){
                msgBox.addClass('error');
                msgBox.html('密码不能为空');
            }
            break;
        case "rePassWord":
            if (obj.value==""){
                msgBox.addClass('error');
                msgBox.html('确认密码不能为空');
            }else if (obj.value!=$("input[name='passWord']").val()){
                msgBox.addClass('error');
                msgBox.html('两次输入的密码不一致');
            }
            break;
    }
}
function CheckFrom(obj) {
    var ress=$("input[name='userName']").next('span').attr("class");
    var res=$("input[name='rePassWord']").next('span').attr("class");
    if (res=="error"||ress=="error"){
        return false;
    }
    return true;
}

• JDBC封装类，后面一堆操作数据库，这里吧JDBC操作简单封装一下可以简化代码很多
  代码如下：

package com.feng.util;

import java.sql.*;

/**
 * 封装
 * Jdbc工具类，简化Jdbc编程
 */
public class JdbcUtil {
    final String URL="jdbc:mysql://localhost:3306/shop2?useSSL=true&serverTimezone=GMT";
    final String USERNAME="root";
    final String PASSWORD="333";
    Connection conn=null;
    PreparedStatement ps=null;

    //将jar包中的driver实现类加载到JVM中
    //静态代码块在类加载时执行，并且只执行一次
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    /**
     * 获取数据库连接对象
     * @return 连接对象Conn
     */
    private  Connection getConn(){
        try {
            conn= DriverManager.getConnection(URL,USERNAME,PASSWORD);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return conn;
    }
    /**
     * 获取数据库操作对象
     * @param
     * @return ps
     */
    public  PreparedStatement getPs(String sql){
        try {
            ps=getConn().prepareStatement(sql);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return ps;
    }
    /**
     * 关闭资源
     */
    public  void close(){
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
    public void close(PreparedStatement ps) {
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
    public void close(PreparedStatement ps, ResultSet rs){
        if (ps != null) {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }
        }
    }
}

• 商品详情页面设计（那么多商品总不能每个商品设计一个商品详情页面吧）
• 所以前面设计商品信息类在这里就可以等到很好的使用，只需要给同一个商品详情页附带商品id，从数据库拿出各自商品详细信息展示到页面就可以
  
• 购物车设计
• 从购物车数据库中读取用户所有购物车信息存放在ArrayList cartlist
  
• 然后是使用JSP标准标签库<c:forEach>，来遍历传回来的cartlist数组，并展示成购物车页面
  
• 还有购物车商品删除，增加、减少数量，商品结算，模拟支付，支付的同事展示用户地址，电话等等，就不贴不来了，完整代码另外打包压缩。

小结

• 首先，这个项目一个人来做工作量真的大（要考虑很多东西），因为我最开做登录注册在一部分慢慢精挑细作，仔细到每个输入框都判断一次，然后写完这一块我发现我已经用了很多很多时间。导致后面购物车没有多少时间来完成。

• 工作量大，但是实际写代码还是比较简单的，比如很多servlet用到的都是差不多的代码，数据库查询也是这样。总结就是技术不难，不过对整个网页要考虑周全，却很难，也很费时间。（比如我在大屏幕显示器注册页面可以展示，但是换到我的笔记本，小屏幕下注册页面就显示不全，界面不够友好。）等等很多类似问题，时间花在这些细小修改上的才是最多的。

• 一个小体会、小总结：整体项目主要功能代码书写并不难，难的是不断修改页面，修改代码这一块，也是最耗时间的。

• ajxa的局部刷新很好用，例如我在写注册信息判断用户注册id是否合法的时候。代码书写的时候很多地方我是用JQuery来写的，代码因此简洁了很多。

• 这项目还有一个难点就是前期准备工作，对数据库表的创建和规划。我在用户表和购物车表的基础上，用了一个商品信息表使总体思路清晰了很多。

• 时间有限，还有很多可以优化的地方都没有时间写，简单记录一下目前我想到的可以优化的地方：

  • 1、功能不全，缺少商家后台管理系统（这一步我在写用户表最后一列就是表示用户状态管理员或者普通用户，但是没有时间来实现这一块）
  • 2、用户支付后的订单跟踪没有做（比如发货中，包裹签收，评价等）
  • 3、没有写过滤器（应该用过滤器来保护一些web中的资源不被随便访问，就是大部分资源需要用户登录后才可以访问）我在实用中用session判断了几个重要资源，但还是不够安全（比如购物车页面需要用户登录后才可以访问）
  • 4、没有设计数据库连接池，（如果设计了数据库连接池应该可以在时间上优化很多）进而给用户带来好的体验。

项目完整代码及数据库.SQL文件

本文地址：https://blog.csdn.net/weixin_44354613/article/details/107372138