1. 项目背景与技术选型

第一次接触JavaWeb开发时,我就被电商项目深深吸引——这可能是最能检验全栈能力的实战场景。用Servlet+JSP搭建的购物商城,就像搭积木一样能把Java基础、数据库、前端知识全部串联起来。这里分享一个我反复打磨的课程设计方案,特别适合刚学完JavaWeb基础的同学练手。

技术栈选择上,我坚持"够用且经典"的原则:

  • 前端三件套 :HTML+CSS+JavaScript打底,配合jQuery处理DOM操作。实测发现,用原生JS写购物车交互能更好理解事件机制
  • 核心框架 :Servlet 3.0处理业务逻辑,JSP负责视图渲染。虽然现在流行SpringBoot,但原始Servlet开发能让你看清HTTP请求的本质
  • 数据持久层 :纯JDBC操作MySQL,连连接池都不用(课程设计规模完全够用)。建议自己封装DBUtil工具类,比直接写SQL语句优雅得多

开发环境建议:

JDK 8+Tomcat 9+MySQL 5.7 
IntelliJ IDEA(社区版就够用)
Navicat(数据库可视化工具)

2. 系统架构设计

这个商城采用经典的三层架构,但我在实际开发中发现,合理的包结构比理论分层更重要。最终项目结构是这样的:

/src
  ├── main
  │   ├── java
  │   │   ├── com.xxx.controller  # Servlet集中地
  │   │   ├── com.xxx.service     # 业务逻辑
  │   │   ├── com.xxx.dao         # 数据库操作
  │   │   └── com.xxx.util        # 工具类
  │   ├── webapp
  │       ├── WEB-INF
  │       ├── css/js/img          # 静态资源
  │       └── views               # JSP文件

数据库设计是重头戏,我踩过的坑都在这里:

  1. 用户表 user 必须加盐加密存储密码(千万别明文!)
  2. 商品表 product 要预留 status 字段控制上下架
  3. 购物车 cart 需要关联用户和商品,注意外键约束
  4. 订单表 orders 和订单项 order_item 要分开设计

建表SQL示例:

CREATE TABLE `product` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `stock` int(11) DEFAULT 0,
  `img_path` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3. 核心功能实现

3.1 用户模块

注册登录我做了三次迭代才稳定:

  1. 第一版直接用 HttpSession 存用户信息
  2. 第二版加入Cookie实现"记住我"功能
  3. 最终版增加了MD5加密和验证码校验

关键代码片段:

// 登录Servlet核心逻辑
String username = request.getParameter("username");
String password = MD5Util.encode(request.getParameter("password"));
User user = userService.login(username, password);

if(user != null){
    request.getSession().setAttribute("loginUser", user);
    response.sendRedirect("index.jsp");
}else{
    request.setAttribute("msg", "用户名或密码错误");
    request.getRequestDispatcher("/login.jsp").forward(request, response);
}

3.2 商品模块

商品展示有三个技术要点:

  1. 分页查询:前端传 pageNum pageSize 参数
  2. 图片上传:用 commons-fileupload 处理文件流
  3. 模糊搜索:SQL语句使用 LIKE 条件

文件上传的坑特别多,这是我的解决方案:

DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);

for (FileItem item : items) {
    if(!item.isFormField()){ // 文件字段
        String fileName = System.currentTimeMillis()+item.getName();
        String savePath = this.getServletContext().getRealPath("/uploads");
        item.write(new File(savePath, fileName));
    }
}

3.3 购物车模块

购物车实现方案对比:

  • 方案A :用Session存储(开发简单但服务器压力大)
  • 方案B :存数据库(数据持久化但频繁IO)
  • 折中方案 :未登录用Session,登录后同步到数据库

前端交互难点是实时计算总价,用jQuery可以这样实现:

$(".quantity-input").change(function(){
    let price = $(this).parent().siblings(".price").text();
    let total = price * $(this).val();
    $(this).parent().siblings(".subtotal").text(total);
    calculateTotal(); // 重新计算总计
});

4. 项目部署指南

本地测试通过后,部署到云服务器时遇到不少问题。这里分享我的避坑清单:

  1. MySQL连接问题

    • 确保服务端MySQL允许远程连接
    • /etc/mysql/my.cnf 中注释掉 bind-address
    GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码';
    FLUSH PRIVILEGES;
    
  2. Tomcat乱码解决 : 在 conf/server.xml 的Connector标签添加:

    URIEncoding="UTF-8"
    useBodyEncodingForURI="true"
    
  3. 图片路径问题 : 建议把图片存到Nginx目录,在项目中配置虚拟路径映射:

    <!-- context.xml -->
    <Context>
        <Resources allowLinking="true"/>
        <Parameter name="img.location" value="/data/upload"/>
    </Context>
    

完整源码已打包好,包含:

  • 数据库SQL脚本
  • 所有依赖jar包
  • 前端页面模板
  • 部署说明文档

获取方式:在公众号「Java技术栈」回复关键词"电商源码"即可下载。建议先按照文档把项目跑起来,再尝试自己重写核心模块,这样的学习效果最好。

Logo

电商企业物流数字化转型必备!快递鸟 API 接口,72 小时快速完成物流系统集成。全流程实战1V1指导,营造开放的API技术生态圈。

更多推荐