SpringBoot电商项目之购物车下单（沙箱支付）

酒醉猫(^･ｪ･^)

已于 2022-11-09 09:30:08 修改

阅读量3.8k

点赞数 4

文章标签：前端沙箱支付 spring boot

于 2022-11-08 23:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_65808248/article/details/127749745

版权

本文介绍了如何在SpringBoot电商项目中实现购物车结算功能，包括前端页面展示、后端处理逻辑，以及支付宝的沙箱支付接入。详细讲述了从session获取购物车数据、订单生成、前端下单处理、后台下单操作，直至配置和测试沙箱支付，以及支付成功后的订单状态更新流程。

摘要由CSDN通过智能技术生成

五、支付宝支付简介、初步接入以及支付宝支付回调

一、购物车结算前端功能实现

实现思路

1.购物车页面实现结算功能，主要是拿到传入后台的gids
2.跳转订单页后台，主要是拿到订单页展示数据
3.订单页前台数据展示

购物车页面实现结算功能

注：使用jquery动态实现结算功能，必须勾选购物车中的商品进行结算，没有勾选无法完成结算功能！！！

cart.js进行整改：关于结算按钮的绑定事件

//计算总共几件商品
	function zg(){
		let gids="";
		var zsl = 0;
		var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");
		var len =index.length;
		if(len==0){
			$("#sl").text(0);
		}else{
			let gidarr=new Array();
			index.each(function(){
				zsl+=parseInt($(this).text());
				$("#sl").text(zsl);
				//TODO	获取当前行的索引
				let idx = $(this).parents(".th").index()-1;
				console.log(idx);
				gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());
			});
			gids=gidarr.join(",");
		}
		if($("#sl").text()>0){
			$(".count").css("background","#c10000");
			$(".count").bind("click",function () {
			//	拿到gids
			location.href='/order/toOrder?gids='+gids
			});
		}else{
			$(".count").css("background","#8e8e8e");
			$(".count").unbind("click");
		}
	}

测试结果，当点击结算，会跳转访问地址http://localhost:8080/order/toOrder?gids=2,22；

说明gids的值是已经拿到了；

然后再次去生成订单、订单项的代码：

记得在Order类修改时间的类型：

二、购物车结算后端功能实现

1.从session中获取购物车对象

2.筛选出要结算的订单项列表集合

OrderController .java：

package com.ycx.spbootpro.controller;


import com.ycx.spbootpro.model.Goods;
import com.ycx.spbootpro.model.User;
import com.ycx.spbootpro.model.vo.ShopCar;
import com.ycx.spbootpro.model.vo.ShopCarItem;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * <p>
 * 订单信息表 前端控制器
 * </p>
 *
 * @author yangzong
 * @since 2022-11-08
 */
@Controller
@RequestMapping("/order")
public class OrderController {

    @RequestMapping("/toOrder")
    public ModelAndView toOrder(User user,
                                String gids,
                                HttpServletRequest request){
        ModelAndView mv=new ModelAndView();
//      拿到购物车中的所有商品
        ShopCar shopCar = getShopCar(user, request);
//        通过gids从购物车中筛选出指定的商品
        List<ShopCarItem> list=getGoods(shopCar,gids);
        mv.addObject("goods",list);
        mv.setViewName("order.html");
        return mv;
    }

    //通过gids从购物车中筛选出指定的商品
    private List<ShopCarItem> getGoods(ShopCar shopCar, String gids) {
        List<String> gidList = Arrays.asList(gids.split(","));
        List<ShopCarItem> items=shopCar.getItems();//购物车里的商品
        List<ShopCarItem> itemsNew=new ArrayList<>();//购物车中要结算的商品
        for (ShopCarItem item:items){
            if(gidList.contains(item.getGid()+"")){
                itemsNew.add(item);
            }
        }
        return itemsNew;
    }

    //    从session中获取购物车对象
    private ShopCar getShopCar(User user,
                               HttpServletRequest request) {
        HttpSession session = request.getSession();
        ShopCar shopCar = (ShopCar) session.getAttribute(user.getId() + "_shopCar");
        if (shopCar == null) {
            shopCar = new ShopCar();
            session.setAttribute(user.getId() + "_shopCar", shopCar);
        }
        return shopCar;
    }
}

3.订单页前台展示

order.html：

<!DOCTYPE html>
<html>
	<head lang="en">
		<#include "common/head.html">
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/proList.css" />
		<link rel="stylesheet" type="text/css" href="css/mygxin.css" />
	</head>
	<body>
		<!----------------------------------------order------------------>
		<div class="head ding">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a href="${ctx}/"><img src="img/logo.png"/></a></h1>
					<div class="fr clearfix" id="top1">
						<form action="#" method="get" class="fl">
							<input type="text" placeholder="搜索" />
							<input type="button" />
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-----------------site------------------->
		<div class="order cart mt">
		<div class="site">
				<p class="wrapper clearfix">
					<span class="fl">订单确认</span>
					<img class="top" src="img/temp/cartTop02.png">
				</p>
			</div>
			<!-----------------orderCon------------------->
			<div class="orderCon wrapper clearfix">
				<div class="orderL fl">
					<!--------h3---------------->
					<h3>收件信息<a href="#" class="fr">新增地址</a></h3>
					<!--------addres---------------->
					<div class="addres clearfix">
						<div class="addre fl on">
							<div class="tit clearfix">
								<p class="fl">张三1</p>
								<span class="default">[默认地址]</span>
								<p class="fr">
									<a href="#">删除</a>
									<span>|</span>
									<a href="#" class="edit">编辑</a>
								</p>
							</div>
							<div class="addCon">
								<p>河北省&nbsp;唐山市&nbsp;路北区&nbsp;大学生公寓村</p>
								<p>15732570937</p>
							</div>
						</div>
						<div class="addre fl">
							<div class="tit clearfix">
								<p class="fl">张三2
								</p>
								<p class="fr">
									<a href="#" class="setDefault">设为默认</a>
									<span>|</span>
									<a href="#">删除</a>
									<span>|</span>
									<a href="#" class="edit">编辑</a>
								</p>
							</div>
							<div class="addCon">
								<p>河北省&nbsp;唐山市&nbsp;路北区&nbsp;大学生公寓村</p>
								<p>15732570937</p>
							</div>
						</div>
						<div class="addre fl">
							<div class="tit clearfix">
								<p class="fl">张三3
								</p>
								<p class="fr">
									<a href="#" class="setDefault">设为默认</a>
									<span>|</span>
									<a href="#">删除</a>
									<span>|</span>
									<a href="#" class="edit">编辑</a>
								</p>
							</div>
							<div class="addCon">
								<p>河北省&nbsp;唐山市&nbsp;路北区&nbsp;大学生公寓村</p>
								<p>15732