Java 实战项目锤炼之仿天猫网上商城的实现流程

Java 实战项目锤炼之仿天猫网上商城

项目概述

该项目是一套仿天猫网上商城的电商系统，实现了基本的商品售卖、购物车管理、订单处理、用户管理等功能。采用了 Java 技术栈，主要包括 SpringBoot 框架、MyBatis 持久层框架、Thymeleaf 模板引擎等。

项目具体实现流程

1. 数据库设计：根据需求，设计数据库结构。该系统包括商品表、用户表、订单表、购物车表等，需要合理设计表结构、制定数据模型。

2. 建立项目框架：采用 SpringBoot 框架，使用 Maven 进行项目构建，建立基础框架，引入必要的依赖，如 Spring Web、MyBatis、Thymeleaf 等。

3. 实现基本功能：首先实现基本的商品展示、购物车管理功能，采用 MVC 模式，实现数据的增删改查操作。

4. 设计前端系统：采用 Thymeleaf 模板引擎实现前端系统，对页面进行布局，美化界面，添加交互效果，如商品搜索、商品分类等。

5. 订单处理：实现订单创建、支付、发货、确认收货等功能，引入金融结算接口，完成支付流程。

6. 用户管理：实现用户注册、登录、信息修改等功能，采用 Spring Security 框架实现用户认证和授权。

7. 代码测试和部署：进行单元测试，集成测试，修复 bug，完成代码的优化和重构。使用 Jenkins 自动化部署工具进行项目部署，确保项目的可靠性和稳定性。

示例说明

示例1：购物车管理

在商品详情页面中，用户可以将商品添加到购物车，购物车页面中显示所有已添加的商品。用户可以对每个商品进行数量修改、删除操作，也支持一键清空购物车。

@Controller
@RequestMapping("/cart")
public class CartController {

    @Autowired
    private ProductService productService;

    @Autowired
    private CartService cartService;

    @GetMapping("")
    public String cart(Model model) {
        List<CartItemVO> cartItemVOS = cartService.getCartItemList();
        model.addAttribute("cartItemList", cartItemVOS);
        model.addAttribute("total", cartService.getCartTotal());
        return "cart";
    }

    @PostMapping("/add")
    @ResponseBody
    public JsonResult add(Integer productId, Integer count) {
        Product product = productService.getById(productId);
        cartService.addToCart(product, count);
        return JsonResult.success();
    }

    // 省略其它方法
}

<div class="product-buy">
    <div class="product-option">@{<span class="p-title">数量</span> *</td><input type="number" name="number" value="1" min="1" onkeyup="this.value=this.value.replace(/[^1-9]/g,'')" onblur="fixNum(this)"></div>
    <div class="product-cart">
        <a class="pc-btn pc-btn-buy" href="/order/confirm?productId=${product.id}&number=%{number}">立即购买</a>
        <a class="pc-btn pc-btn-cart" href="javascript:" onclick="addCart(${product.id})">加入购物车</a>
    </div>
</div>

<script type="text/javascript">
    function addCart(productId) {
        var number = $("[name='number']").val();
        $.ajax({
            url: "/cart/add",
            type: "post",
            data: {"productId": productId, "count": number},
            success: function (result) {
                if (result.success) {
                    alert("加入购物车成功");
                    window.location.reload();
                } else {
                    alert(result.msg);
                }
            }
        });
    }
</script>

示例2：订单处理

用户在购物车页面下单之后，需要进行支付、发货、确认收货等操作，完成订单处理过程。

@Controller
@RequestMapping("/order")
public class OrderController {

    @Autowired
    private CartService cartService;

    // 省略其它 Service 引用和依赖注入

    @GetMapping("/confirm")
    public String confirm(Integer productId, Integer number, Model model) {
        List<CartItemVO> cartItemVOS = cartService.getCartItemList();
        model.addAttribute("cartItem", cartItemVOS);
        model.addAttribute("total", cartService.getCartTotal());
        model.addAttribute("productId", productId);
        model.addAttribute("number", number);
        model.addAttribute("addressList", addressService.getAddressList());
        return "order_confirm";
    }

    @PostMapping("/submit")
    @ResponseBody
    public JsonResult submit(Order order) {
        cartService.checkout(order);
        return JsonResult.success();
    }

    // 省略其它方法
}

<form id="submit-form" method="POST" action="/order/submit">
    <input type="hidden" name="userId" value="${currentUser.id}">
    <input type="hidden" name="productId" value="${productId}">
    <input type="hidden" name="number" value="${number}">
    <input type="hidden" name="addressId" value="${address.id}">
    <input type="hidden" name="totalPrice" value="${totalPrice}">

    <div class="submit-order-item">
        <div class="submit-title">收货人信息</div>
        <div class="submit-address">
            <div class="submit-address-info">
                <input type="radio" name="addressId" id="address${address.id}" value="${address.id}">
                <label for="address${address.id}">
                    <span class="name">${address.name}</span>
                    <span class="phone">${address.phone}</span>
                    <p class="full-address">${address.province}${address.city}${address.district}${address.address}</p>
                </label>
            </div>
            <a class="submit-address-edit" href="javascript:" onclick="editAddress()">修改</a>
        </div>
    </div>

    <div class="submit-order-item">
        <div class="submit-title">商品信息</div>
        <div class="submit-product">
            <div class="submit-product-info">
                <a href="/product/${cartItem.productId}">
                    <img src="${cartItem.productImage}" class="product-thumb">
                </a>
                <div class="product-desc">
                    <a href="/product/${cartItem.productId}" class="product-name">${cartItem.productName}</a>
                    <p class="product-price">￥${cartItem.productPrice} × ${cartItem.count}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="submit-order-item">
        <div class="submit-title">支付信息</div>
        <div class="submit-payment">
            <label><input type="radio" name="paymentType" value="1" checked> 在线支付</label>
            <label><input type="radio" name="paymentType" value="2"> 货到付款</label>
        </div>
    </div>

    <div class="submit-order-btn-wrap">
        <button type="submit" class="submit-order-btn">提交订单</button>
    </div>
</form>

总结

以上就是 Java 实战项目锤炼之仿天猫网上商城的实现流程。该项目涉及的知识点较为广泛，但也具有非常实际的应用价值。通过深入学习和实践，可以提高 Java 开发技能，打造高质量的 Web 项目。