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

已于 2022-11-09 09:30:08 修改
阅读量3.4k 收藏 28
点赞数 4
文章标签： 前端 沙箱支付 spring boot
于 2022-11-08 23:43:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65808248/article/details/127749745
版权

目录

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

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

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

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

3.订单页前台展示

三、结算页的下单前端

生成订单

1.前端相关处理

四、结算页的下单后端

2.后台进行下单操作

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

1、配置沙箱支付

沙箱支付应用

根据官方网站开发文档进行支付宝支付接入

2、支付成功后变更订单状态

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

实现思路

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

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  酒醉猫(^･ｪ･^)
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    28
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
SpringBoot电商项目之实现购物车功能

				
			

			

				

					weixin_65808248的博客
				

				

					11-07
					
					3098
					
				

			

		

		

			
				
*** @author 杨总*//*** 使用参数解析器之前的做法 弊端：* 在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要再写一遍* @return*/}}弊端：在每一个需要登录之后才能操作的功能，都需要做用户登录验证，即以下代码都需要再写一遍运行时，点击加入购物车会出现关于Mybatis-plus时间字段代码生成问题。

			
		

	



                

              
                



	

		

			

				
					
SpringBoot电商商城后台管理系统(含源码+数据库)

					
热门推荐

				
			

			

				

					WEN38306482的博客
				

				

					06-06
					
					13万+
					
				

			

		

		

			
				
电商商城系统是一个基于互联网的电子商务平台，为用户提供购物、支付、物流等一系列功能。电商商城系统总体功能设计如图所示。

			
		

	



                


  
              

                


	

		

			

				
					
SpringBoot电脑商城-购物车

				
			

			

				

					weixin_45581692的博客
				

				

					04-18
					
					3786
					
				

			

		

		

			
				
购物车1. 加入购物车1.1 创建数据库表1.2 创建实体类1.3 持久层1.4 业务层1.5 控制层1.6 前端页面2. 显示购物车2.1 持久层业务层控制层前端页面增加购物车商品数量持久层
1. 加入购物车
1.1 创建数据库表
CREATE TABLE t_cart (
	cid INT AUTO_INCREMENT COMMENT '购物车数据id',
	uid INT NOT NULL COMMENT '用户id',
	pid INT NOT NULL COMMENT '商品id',
	price

			
		

	





	

		

			

				
					
【SpringBoot项目开发】添加购物车实现

					
最新发布

				
			

			

				

					qq_42736179的博客
				

				

					05-24
					
					900
					
				

			

		

		

			
				
需要注意的细节：

1、接口设计：请求数据有哪些？哪些是必须的，哪些不是？

2、数据库表设计：需要哪些字段？

1 需求分析和设计

1.1 产品原型

用户可以将菜品或者套餐添加到购物车。对于菜品来说，如果设置了口味信息，则需要选择规格后才能加入购物车;对于套餐来说，可以直接点击



将当前套餐加入购物车。在购物车中可以修改菜品和套餐的数量，也可以清空购物车。

3.1.2 接口设计

通过上述原型图，设计出对应的添加购物车接口。

请求数据是：套餐id、菜品id、口味，全是非必须的







说

			
		

	



		

			
		



	

		

			

				
					
【SpringBoot开发】之商城项目案例（商品详情及添加购物车）

				
			

			

				

					weixin_74352229的博客
				

				

					01-02
					
					2286
					
				

			

		

		

			
				
在之前的商城项目系列的博客中我们实现了用户登陆、商城首页的数据绑定，今天的这期博客给老铁们带来的是商品详情页面的实现以及添加购物车的功能实现。

			
		

	





	

		

			

				
					
Java基于Redis实现的分布式锁---电商下单案例

				
			

			

				

					qq_56892136的博客
				

				

					11-06
					
					2755
					
				

			

		

		

			
				
案例是一个简易版的电商项目中的下单功能，先简单分析下下单功能的一些基本步骤：1.校验库存  2.保存订单 3.生成快照 4.扣减库存 5.删除购物车。

			
		

	





	

		

			

				
					
【业务功能篇97】微服务-springcloud-springboot-电商购物车模块-获取当前登录用户的购物车信息

				
			

			

				

					studyday1的博客
				

				

					09-04
					
					1085
					
				

			

		

		

			
				
我们需要先创建一个cart的微服务，然后添加相关的依赖，设置配置，放开注解。

			
		

	





	

		

			

				
					
【电商项目实战】沙箱支付模拟支付功能

				
			

			

				

					01-04
				

			

		

		

			
				
这个【电商项目实战】沙箱支付模拟支付功能将深入探讨这一主题，并通过案例演示来帮助理解。  首先，我们需要了解沙箱支付的基本概念。沙箱支付，也称为测试模式或模拟支付环境，是支付服务提供商为开发者提供的一个...

			
		

	





	

		

			

				
					
SpringBoot+Vue支付宝沙箱支付

				
			

			

				

					06-16
				

			

		

		

			
				
本项目“SpringBoot+Vue支付宝沙箱支付”旨在教你如何在SpringBoot后端与Vue前端环境中实现支付宝的沙箱测试环境支付功能，从而在不涉及真实交易的情况下测试支付流程的完整性和安全性。  首先，我们需要了解什么是...

			
		

	





	

		

			

				
					
基于Springboot在线购物商城-沙箱支付

				
			

			

				

					07-27
				

			

		

		

			
				
注意：本项目中使用了沙箱支付，在项目的utils中配置自己的沙箱账号，其中的回调地址需要穿透工具进行穿透，不然支付后没办法返回支付成功页面。  项目技术 后端：SpringBoot 前端：Jsp、Jquery、Ajax、LayUI、Html...

			
		

	





	

		

			

				
					
Springboot支付宝沙箱支付+退款

				
			

			

				

					04-28
				

			

		

		

			
				
直接运行项目即可测试，有readme文件

			
		

	





	

		

			

				
					
基于SpingBoot开发的购物商城

				
			

			

				

					03-19
				

			

		

		

			
				
这是一个包含基于springboot的maven工程开发的购物商城项目,功能齐全，包含购物流程。

			
		

	





	

		

			

				
					
SpringBoot集成支付宝沙箱支付（支付、退款）

				
			

			

				

					08-25
				

			

		

		

			
				
主要为大家详细介绍了SpringBoot集成支付宝沙箱支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
Springboot+支付宝沙箱环境  html版

				
			

			

				

					Kodak
				

				

					05-21
					
					2882
					
				

			

		

		

			
				
最近写了一个springboot集成支付宝html的

首先自己集成 Thymeleaf 

application.properties文件


spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.webflux...

			
		

	





	

		

			

				
					
购物车结算功能

				
			

			

				

					gxyouzhizhe的博客
				

				

					06-22
					
					5万+
					
				

			

		

		

			
				
表有汇PC端购物车功能实现



加入购物车后的结算功能
购物车页面：




对照一下商品的颜色、数量等是否选择正确，如果无误可以点击马上结算按钮，进入订单信息界面，填写信息
订单信息界面：






填写好必要的信息(如：收货人姓名、地址、手机号码、快递、付款方式等)，点击确认提交按钮进入支付界面；
支付界面：






在确认信息无误后

			
		

	





	

		

			

				
					
【支付】——毕业设计中利用websocket做模拟支付

				
			

			

				

					我爱吃土豆
				

				

					09-21
					
					5899
					
				

			

		

		

			
				
前言

最近在做公司项目时使用websocket在支付回调接口中刷新页面状态时，忽然想起今年毕业做毕业设计的时候，做的是一个电商系统，那么支付是必不可少的，当时还没有听说过websocket，去网上查阅资料，申请支付宝或者微信授权肯定是不现实的，还搞了很久的沙箱支付，现在想想真是傻，没有早一点接触到websocket，至于websocket是一门怎样的技术我们在此不做过多介绍，大家可自行查阅资料，......

			
		

	





	

		

			

				
					
springboot项目：加入购物车

				
			

			

				

					weixin_62735525的博客
				

				

					11-07
					
					1421
					
				

			

		

		

			
				
springboot项目之加入购物车

			
		

	





	

		

			

				
					
支付宝支付(沙箱环境&真实支付)使用详解---python

				
			

			

				

					python_web全栈
				

				

					02-13
					
					1万+
					
				

			

		

		

			
				
0. 前提

a. 这里我用前后端不分离项目做演示，这个支付方式，不分开发的模式，全部适用

b. django2..2

c. 这里用别人封装好的sdk，Alipay的sdk不是很好用

d. 最后我会粗略讲一下，如果是真实的应用，进行支付的配置，其实就改动几个地方，模拟支付，就可以变成真实支付

一. 安装sdk

a. 不清楚sdk是什么的，我这里有介绍

skd与api的区别https://blog.csdn.net/qq_52385631/article/details/122851280?spm

			
		

	





	

		

			

				
					
基于Vue和SpringBoot的电商管理系统的设计与实现

				
			

			

				

					Designer 小郑的技术博客
				

				

					01-03
					
					1万+
					
				

			

		

		

			
				
本文是《基于Vue和SpringBoot的电商管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路

			
		

	





	

		

			

				
					
SpringBoot 怎么接入支付宝沙箱支付

				
			

			

				

					03-30
				

			

		

		

			
				
要在SpringBoot中接入支付宝沙箱支付，您需要完成以下步骤：

1. 注册一个支付宝沙箱账号并登录到开发者平台（https://openhome.alipay.com/platform/appDaily.htm）。

2. 创建一个应用程序并获取应用程序ID和商户私钥。

3. 在SpringBoot应用程序中添加alipay-sdk依赖项。您可以通过Gradle或Maven添加此依赖项。

4. 创建一个支付工具类，并实现沙箱环境的初始化和支付宝支付API的调用。

5. 在SpringBoot应用程序中创建一个控制器，并定义处理支付请求的端点。

6. 在控制器中使用支付工具类处理支付请求，并返回支付结果。

下面是一个示例支付工具类：

```java
import com.alipay.api.AlipayClient;
import com.alipay.api.AlipayConstants;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.alipay.api.response.AlipayTradePagePayResponse;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Component
public class AlipayUtil {
    @Value("${alipay.app-id}")
    private String appId;

    @Value("${alipay.private-key}")
    private String privateKey;

    @Value("${alipay.public-key}")
    private String publicKey;

    @Value("${alipay.gateway-url}")
    private String gatewayUrl;

    @Value("${alipay.notify-url}")
    private String notifyUrl;

    public String pay(String outTradeNo, String subject, String totalAmount) throws Exception {
        AlipayClient alipayClient = new DefaultAlipayClient(gatewayUrl, appId, privateKey,
                AlipayConstants.FORMAT_JSON, AlipayConstants.CHARSET_UTF8, publicKey, AlipayConstants.SIGN_TYPE_RSA2);

        AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
        request.setReturnUrl(notifyUrl);
        request.setNotifyUrl(notifyUrl);

        request.setBizContent("{\"out_trade_no\":\"" + outTradeNo + "\","
                + "\"total_amount\":\"" + totalAmount + "\","
                + "\"subject\":\"" + subject + "\","
                + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");

        AlipayTradePagePayResponse response = alipayClient.pageExecute(request);
        return response.getBody();
    }
}
```

在这个示例中，我们使用AlipayClient类创建了一个Alipay客户端，并使用AlipayTradePagePayRequest类设置了支付请求参数。我们还使用AlipayTradePagePayResponse类处理Alipay的支付响应。

下面是一个示例控制器：

```java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class PaymentController {
    @Autowired
    private AlipayUtil alipayUtil;

    @PostMapping("/pay")
    public String pay(@RequestBody Payment payment) throws Exception {
        return alipayUtil.pay(payment.getOutTradeNo(), payment.getSubject(), payment.getTotalAmount());
    }
}
```

在这个示例中，我们使用@Autowired注释注入了AlipayUtil类，并在/pay端点上定义了处理支付请求的方法。

现在您可以使用Postman或其他HTTP客户端向/pay端点发送JSON请求，以进行支付。以下是一个示例请求：

```
POST /pay HTTP/1.1
Host: localhost:8080
Content-Type: application/json
Cache-Control: no-cache

{
    "outTradeNo": "123456789",
    "subject": "Test Payment",
    "totalAmount": "100.00"
}
```

在这个示例中，我们向/pay端点发送一个包含outTradeNo，subject和totalAmount的JSON请求。在支付工具类中，我们使用这些参数调用了支付宝API，并返回了支付响应。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
酒醉猫(^･ｪ･^)

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值