Java EE 阶段小项目（小型商城商品展示 + 购物车

• 一、项目搭建
  

• 二、商品界面展示
  

• 2.1 登录界面
  

• 2.2 商城主页
  

• 2.3 购物车页面
  

• 2.4 确认支付环节
  

• 2.5 真正的支付环境了
  

• 三、后端重点
  

• 3.1 数据库设计
  

• 3.1.1 用户表 （user）
  

• 3.1.2 商品表 （product）
  

• 3.1.3 购物车（Shopcart）
  

• 3.2 Java Web 后端逻辑难点分析
  

• 3.2.1 验证码实现
  

• 3.2.2 分页逻辑实现
  

• 3.2.3 支付宝沙箱支付环境接入
  

• 四、总结
  

麻雀虽小，五脏俱全，UI 写的比较 low，这个就不要太在意了

项目已经放在 Github 仓库中：[ShoppingMall](()

[](()一、项目搭建

=====================================================================

1. 构建一个 Java Web 项目

2. 数据库 mysql 5.7 版本

3. 开发工具 idea 2019， sqlyog

4. 服务器版本 Tomcat 9.0.34

5. 涉及到第三方 JAR 包：

• mysql 驱动 5.1.44 版本以上

• Tomcat 的所有 lib 包支持

• jstl 1.2 标签库支持

• 支付宝 SDK 提供的 jar 包

6. 其他：

• BootStrap 库支持

• Jquery 库支持 （完成 ajax 操作）

[](()二、商品界面展示

=======================================================================

[](()2.1 登录界面

用户需要输入正确的账号密码，以及验证码，经后端校验通过即可通过

• 验证码由后端生成，验证码点击图片或者 文字 都可以通过 js 进行交换

• 用户名 ajax 校验

• 没有编写注册功能，因为我比较懒 hhhh

[](()2.2 商城主页

1. 用户登录成功就会进入该界面，用户登录信息经过 session 域进行保存

2. 商品界面采用了 分页处理

3. 用户可以选择将商品添加至购物车 或者直接查询购物车

[](()2.3 购物车页面

1. 用户选中项目可以对数量进行 添加 和 修改，修改的数据会通过 ajax 传至后台进行同步修改（这样做并不是合理，所以有点小 bug）

2. 商品如果不想要点击删除，会通过 ajax 进行删除，然后页面的 dom 也会删除，但是有个小 个 bug，因为没有对数据进行重新查询，所以，页面会恢复原样，但是数据库的数据是已经删除了该购物车信息了

3. 因为数据是动态渲染出来的，所以我使用 Jquery 完成购物车的 js 逻辑时，可能会有些小 bug， 所以我只用了一个产品进行购物

[](()2.4 确认支付环节

1. 支付采用了支付宝的沙箱环境，我们需要配置一些信息到 沙箱页面 和自己的本地环境即可完成沙箱环境接入

这个页面其实可以直接跳过去的，不知道为啥就写进来了

[](()2.5 真正的支付环境了

这里可以看到前面购物车的账单信息

这里就和真真的支付没啥关系了，但是千万别傻乎乎的用自己的支付宝付钱，因为支付宝的沙箱环境已经提供了虚拟卖家账号 和 虚拟商家账号了，在这里我们可以快乐的充值，体验一把有钱人的快乐，也可以下载对应的沙箱环境支付宝进行支付

和真实的支付环境基本有区别

[](()三、后端重点

=====================================================================

[](()3.1 数据库设计

这个 小小商城 只用到了三张表，总体逻辑也不是很复杂

[](()3.1.1 用户表 （user）

这是单独的一张表

[](()3.1.2 商品表 （product）

用于显示对应的数据

[](()3.1.3 购物车（Shopcart）

[](()3.2 Java Web 后端逻辑难点分析

[](()3.2.1 验证码实现

使用 java 的 2d 绘图工具，绘制一张 png，我的代码对验证码的绘制做了比较好的封装，所以看起来比较舒服

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.util.Random;

/**

• 生成一个 6 位数的验证码，并存放到 session 域中 valiCode

• 并通过 response 返回

• */

@WebServlet("/CodeServlet")

public class CodeServlet extends HttpServlet {

private Random random = new Random();

private int width = 80;//宽度

private int height = 40;//高度

private int fontsize = 20;//字体大小

private String str = "0123456789abcdefghijklmnxnlopiiqusdakljnalwABCDEFGHIJKLMNOPQRSTUVWXYZ";

//----------- 简单版本 -------------

private String randCode() { //生成 4 个字符 随机字符串代码

String code = "";

for (int i=0; i<4; i++) {

code +=str.charAt(random.nextInt(str.length()));

}

return code;

}

//------------ 生成至少四个字符的随机字符串 --

private String randCode1(int len) {

if (len < 4) {

len = 4;

}

//更改宽度

width = 5 + fontsize*len ;

String code = "";

for (int i=0; i<len; i++) {

code +=str.charAt(random.nextInt(str.length()));

}

return code;

}

//------------- 返回随机字符串的颜色

private Color randColor() {

int r = random.nextInt(256);

int g = random.nextInt(256);

int b = random.nextInt(256);

return new Color(r,g,b);

}

protected void doPost(Http 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 ServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// 1. 设置 servlet 的显示类型

response.setContentType("image/png");

// 2. 大致设置一个虚拟的验证码

//1. 创建画板

BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

//2.创建画笔

Graphics2D pen = (Graphics2D)img.getGraphics();

//3.生成随机内容

String code = randCode1(4); //生成 4 位数验证码

System.out.println(code);

request.getSession().setAttribute("valiCode", code); //保存 code 到 session,和后面的内容对应

//4.绘制内容

// 4.1 设置绘制区域

pen.fillRect(0, 0, width, height);

// 4.2 设置字体

pen.setFont(new Font("微软雅黑",Font.BOLD,fontsize));