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 包

  1. 其他:
  • 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

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));

你可能感兴趣的:(Java,经验分享,架构,java)