一、项目搭建
二、商品界面展示
2.2 商城主页
2.3 购物车页面
2.4 确认支付环节
2.5 真正的支付环境了
三、后端重点
3.1.2 商品表 (product)
3.1.3 购物车(Shopcart)
3.2 Java Web 后端逻辑难点分析
3.2.2 分页逻辑实现
3.2.3 支付宝沙箱支付环境接入
四、总结
麻雀虽小,五脏俱全,UI 写的比较 low,这个就不要太在意了
项目已经放在 Github 仓库中:[ShoppingMall](()
[](()一、项目搭建
=====================================================================
构建一个 Java Web 项目
数据库 mysql 5.7 版本
开发工具 idea 2019, sqlyog
服务器版本 Tomcat 9.0.34
涉及到第三方 JAR 包:
mysql 驱动 5.1.44 版本以上
Tomcat 的所有 lib 包支持
jstl 1.2 标签库支持
支付宝 SDK 提供的 jar 包
BootStrap 库支持
Jquery 库支持 (完成 ajax 操作)
[](()二、商品界面展示
=======================================================================
用户需要输入正确的账号密码,以及验证码,经后端校验通过即可通过
验证码由后端生成,验证码点击图片或者 文字 都可以通过 js 进行交换
用户名 ajax 校验
没有编写注册功能,因为我比较懒 hhhh
用户登录成功就会进入该界面,用户登录信息经过 session 域进行保存
商品界面采用了 分页处理
用户可以选择将商品添加至购物车 或者直接查询购物车
用户选中项目可以对数量进行 添加 和 修改,修改的数据会通过 ajax 传至后台进行同步修改(这样做并不是合理,所以有点小 bug)
商品如果不想要点击删除,会通过 ajax 进行删除,然后页面的 dom 也会删除,但是有个小 个 bug,因为没有对数据进行重新查询,所以,页面会恢复原样,但是数据库的数据是已经删除了该购物车信息了
因为数据是动态渲染出来的,所以我使用 Jquery 完成购物车的 js 逻辑时,可能会有些小 bug, 所以我只用了一个产品进行购物
这个页面其实可以直接跳过去的,不知道为啥就写进来了
这里可以看到前面购物车的账单信息
这里就和真真的支付没啥关系了,但是千万别傻乎乎的用自己的支付宝付钱,因为支付宝的沙箱环境已经提供了虚拟卖家账号 和 虚拟商家账号了,在这里我们可以快乐的充值,体验一把有钱人的快乐,也可以下载对应的沙箱环境支付宝进行支付
和真实的支付环境基本有区别
[](()三、后端重点
=====================================================================
这个 小小商城 只用到了三张表,总体逻辑也不是很复杂
这是单独的一张表
用于显示对应的数据
使用 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 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));