• 网上商城项目（购物车下单、支付）

    目录

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

    1.购物车页面实现结算功能，主要是拿到传入后台的gids 

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

    1.跳转订单页后台，主要是拿到订单页展示数据  

    2.订单页前台展示 

    三、生成订单

    1.结算页的下单前端

     2.结算下单后台实现

     四、沙箱支付简介

    1.配置沙箱支付

     五、沙箱支付应用

     1.完成支付宝沙箱支付功能接入

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

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

     实现思路

    1.购物车页面实现结算功能，主要是拿到传入后台的gids

    2.跳转订单页后台，主要是拿到订单页展示数据

    3.订单页前台数据展示

    1.购物车页面实现结算功能，主要是拿到传入后台的gids 

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

    测试效果如下：

    关于结算按钮的绑定事件

    1. //计算总共几件商品
    2. function zg(){
    3. 	var zsl = 0;
    4. 	var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");
    5. 	var len =index.length;
    6. 	if(len==0){
    7. 		$("#sl").text(0);
    8. 	}else{
    9. 		index.each(function(){
    10. 			zsl+=parseInt($(this).text());
    11. 			$("#sl").text(zsl);
    12. 		})
    13. 	}
    14. 	if($("#sl").text()>0){
    15. 		$(".count").css("background","#c10000");
    16. 	//	TODO	绑定结算事件
    17. 		$(".count").bind("click",function () {
    18. 			alert("绑定结算事件");
    19. 		})
    20. 	}else{
    21. 		$(".count").css("background","#8e8e8e");
    22. 		$(".count").unbind("click");
    23. 	}
    24. }

    cart.js进行整改     计算总共几件商品

    1. $(function(){
    2. 	/**************数量加减***************/
    3. 	$(".num .sub").click(function(){
    4. 		var num = parseInt($(this).siblings("span").text());
    5. 		if(num<=1){
    6. 			$(this).attr("disabled","disabled");
    7. 		}else{
    8. 			num--;
    9. 			$(this).siblings("span").text(num);
    10. 			//获取除了货币符号以外的数字
    11. 			var price = $(this).parents(".number").prev().text().substring(1);
    12. 			//单价和数量相乘并保留两位小数
    13. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    14. 			jisuan();
    15. 			zg();
    16.  
    17. 			//TODO 获取当前行的行索引
    18. 			let index = $(this).parents(".th").index()-1;
    19. 			//获取当前的checkbox中设置的隐藏域（包含了商品ID）
    20. 			let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    21. 			update(num,gid);
    22. 		}
    23. 	});
    24. 	$(".num .add").click(function(){
    25. 		var num = parseInt($(this).siblings("span").text());
    26. 		if(num>=5){
    27. 			confirm("限购5件");
    28. 		}else{
    29. 			num++;
    30. 			$(this).siblings("span").text(num);
    31. 			var price = $(this).parents(".number").prev().text().substring(1);
    32. 			$(this).parents(".th").find(".sAll").text('￥'+(num*price).toFixed(2));
    33. 			jisuan();
    34. 			zg();
    35.  
    36. 			//TODO 获取当前行的行索引
    37. 			let index = $(this).parents(".th").index()-1;
    38. 			//获取当前的checkbox中设置的隐藏域（包含了商品ID）
    39. 			let gid=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    40. 			update(num,gid);
    41. 		}
    42. 	});
    43. 	//计算总价
    44. 	function jisuan(){
    45. 		var all=0;
    46. 		var len =$(".th input[type='checkbox']:checked").length;
    47. 		if(len==0){
    48. 			 $("#all").text('￥'+parseFloat(0).toFixed(2));
    49. 		}else{
    50. 			 $(".th input[type='checkbox']:checked").each(function(){
    51. 			 	//获取小计里的数值
    52. 	        	var sAll = $(this).parents(".pro").siblings('.sAll').text().substring(1);
    53. 	        	//累加
    54. 	        	all+=parseFloat(sAll);
    55. 	        	//赋值
    56. 	        	$("#all").text('￥'+all.toFixed(2));
    57. 	        })
    58. 		}
    59. 		
    60. 	}
    61. 	//计算总共几件商品
    62. 	function zg(){
    63. 		let gids = "";
    64. 		var zsl = 0;
    65. 		var index = $(".th input[type='checkbox']:checked").parents(".th").find(".num span");
    66. 		var len =index.length;
    67. 		if(len==0){
    68. 			$("#sl").text(0);
    69. 		}else{
    70. 			let gidarr = new Array();
    71. 			index.each(function(){
    72. 				zsl+=parseInt($(this).text());
    73. 				$("#sl").text(zsl);
    74.  
    75. 				//TODO	获取当前行的索引
    76. 				let idx = $(this).parents(".th").index()-1;
    77. 				console.log(idx);
    78. 				//在这里需要获取当前行商品的商品ID
    79. 				gidarr.push($(".th").eq(idx).find("div:eq(0) input[type='hidden']").val());
    80. 			});
    81. 			gids = gidarr.join(",");
    82. 		}
    83. 		if($("#sl").text()>0){
    84. 			$(".count").css("background","#c10000");
    85. 			$(".count").bind("click",function () {
    86. 				//拿到gids
    87. 			     location.href='/order/toOrder?gids='+gids
    88. 			});
    89. 		}else{
    90. 			$(".count").css("background","#8e8e8e");
    91. 			$(".count").unbind("click");
    92. 		}
    93. 	}
    94. 	/*****************商品全选***********************/
    95. 	$("input[type='checkbox']").on('click',function(){
    96. 		var sf = $(this).is(":checked");
    97. 		var sc= $(this).hasClass("checkAll");
    98. 		if(sf){
    99. 			if(sc){
    100. 				 $("input[type='checkbox']").each(function(){  
    101. 	                this.checked=true;  
    102. 	           }); 
    103. 				zg();
    104. 	           	jisuan();
    105. 			}else{
    106. 				$(this).checked=true; 
    107. 	            var len = $("input[type='checkbox']:checked").length;
    108. 	            var len1 = $("input").length-1;
    109. 				if(len==len1){
    110. 					 $("input[type='checkbox']").each(function(){  
    111. 		                this.checked=true;  
    112. 		            }); 
    113. 				}
    114. 				zg();
    115. 				jisuan();
    116. 			}
    117. 		}else{
    118. 			if(sc){
    119. 				 $("input[type='checkbox']").each(function(){  
    120. 	                this.checked=false;  
    121. 	           }); 
    122. 				zg();
    123. 				jisuan();
    124. 			}else{
    125. 				$(this).checked=false;
    126. 				var len = $(".th input[type='checkbox']:checked").length;
    127. 	            var len1 = $("input").length-1;
    128. 				if(len<len1){
    129. 					$('.checkAll').attr("checked",false);
    130. 				}
    131. 				zg();
    132. 				jisuan();
    133. 			}
    134. 		}
    135. 		
    136. 	});
    137. 	/****************************proDetail 加入购物车*******************************/
    138. 	$(".btns .cart").click(function(){
    139. 		if($(".categ p").hasClass("on")){
    140. 			var num = parseInt($(".num span").text());
    141. 			var num1 = parseInt($(".goCart span").text());
    142. 			$(".goCart span").text(num+num1);
    143. 		}
    144. 	});
    145. 	
    146. 	//删除购物车商品
    147. 	$('.del').click(function(){
    148. 		//定义商品id 比如：1,2,3,4,5
    149. 		let gids = "";
    150. 		//单个删除
    151. 		if($(this).parent().parent().hasClass("th")){
    152. 			$(".mask").show();
    153. 			$(".tipDel").show();
    154. 			index = $(this).parents(".th").index()-1;
    155.  
    156. 			//TODO 获取当前的checkbox中设置的隐藏域（包含了商品ID）
    157. 			gids=$(".th").eq(index).find('div:eq(0) input[type=hidden]').val();
    158. 			console.log(gids);
    159.  
    160. 			$('.cer').click(function(){
    161. 				$(".mask").hide();
    162. 				$(".tipDel").hide();
    163. 				$(".th").eq(index).remove();
    164. 				$('.cer').off('click');
    165. 				if($(".th").length==0){
    166. 					$(".table .goOn").show();
    167. 				}
    168. 				del(gids);
    169. 			})
    170. 		}else{
    171. 			//选中多个一起删除
    172. 			if($(".th input[type='checkbox']:checked").length==0){
    173. 				$(".mask").show();
    174. 				$(".pleaseC").show();
    175. 			}
    176. 			else{
    177. 				$(".mask").show();
    178. 				$(".tipDel").show();
    179.  
    180. 				//TODO 先获取所有即将被删除的商品ID
    181. 				let gidarr = new Array();
    182. 				$(".th input[type='checkbox']:checked").each(function(j){
    183. 					gidarr.push($(".th").eq(index).find('div:eq(0) input[type=hidden]').val());
    184. 					// gids += $(".th").eq(index).find('div:eq(0) input[type=hidden]').val();  很容易报数据下标越界异常
    185. 				});
    186. 				gids = gidarr.join(",");
    187.  
    188. 				$('.cer').click(function(){
    189. 					$(".th input[type='checkbox']:checked").each(function(j){
    190. 						index = $(this).parents('.th').index()-1;
    191. 						$(".th").eq(index).remove();
    192. 						if($(".th").length==0){
    193. 							$(".table .goOn").show();
    194. 						}
    195. 					})
    196. 					$(".mask").hide();
    197. 					$(".tipDel").hide();
    198. 					zg();
    199. 					jisuan();
    200.  
    201. 					del(gids);
    202. 				})
    203. 			}
    204. 		}
    205. 	})
    206. 	$('.cancel').click(function(){
    207. 		$(".mask").hide();
    208. 		$(".tipDel").hide();
    209. 	})
    210. 	//改变商品规格
    211. //	$(".pro dd").hover(function(){
    212. //		var html='';
    213. //		html='修改';
    214. //		$(this).addClass("on").append(html).parents(".th").siblings(".th").find(".pro dd").removeClass("on").find('.edit').remove();
    215. //		$(".edit").each(function(i){
    216. //			$(this).attr("id",'edit'+i);
    217. //			$("#edit"+i).click(function(){
    218. //				$(".proDets").show();
    219. //				$(".mask").show();
    220. //				$(".changeBtn .buy").attr("data-id",i);
    221. //			})
    222. //		})
    223. //	},function(){
    224. //		$(this).removeClass("on");
    225. //	})
    226. //	$(".changeBtn .buy").click(function(){
    227. //		var index = $(this).attr("data-id");
    228. //		var result = $(".smallImg .on").find("img").attr("alt");
    229. //		$("#edit"+index).prev().text(result);
    230. //		$(".proDets").hide();
    231. //		$(".mask").hide();
    232. //		$("#edit"+index).parent("dd").removeClass("on").find(".edit").remove();
    233. //	});
    234. //	$(".changeBtn .cart").click(function(){
    235. //		$(".proDets").hide();
    236. //		$(".mask").hide();
    237. //	})
    238. })
    239. //删除商品
    240. function del(gids) {
    241. 	$.post('/shopCar/delete',{
    242. 		'gids':gids
    243. 	},function(rs){
    244. 		if(rs.code!=200)
    245. 			alert(rs.msg);
    246. 		else
    247. 			location.href='/shopCar/queryShopCar';
    248. 	},'json');
    249. }
    250.  
    251. //修改商品数量
    252. function update(num,gid){
    253. 	$.post('/shopCar/update',{
    254. 		'gid':gid,
    255. 		'quantity':num
    256. 	},function(rs){
    257. 		if(rs.code!=200)
    258. 			alert(rs.msg);
    259. 		else
    260. 			location.href='/shopCar/queryShopCar';
    261. 	},'json');
    262. }

    测试结果如下：

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

     在点击结算的事件下，添加上跳转地址：

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

    先生成订单表，订单信息表 t_order 、t_order_item

    打开CodeGenerator.java运行里面的main方法

    1. package com.jwj.spbootpro.generator;
    2.  
    3. import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
    4. import com.baomidou.mybatisplus.core.toolkit.StringPool;
    5. import com.baomidou.mybatisplus.core.toolkit.StringUtils;
    6. import com.baomidou.mybatisplus.generator.AutoGenerator;
    7. import com.baomidou.mybatisplus.generator.InjectionConfig;
    8. import com.baomidou.mybatisplus.generator.config.*;
    9. import com.baomidou.mybatisplus.generator.config.po.TableInfo;
    10. import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
    11. import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
    12.  
    13. import java.util.ArrayList;
    14. import java.util.List;
    15. import java.util.Scanner;
    16.  
    17. public class CodeGenerator {
    18.  
    19.     /**
    20.      * 
    21.      * 读取控制台内容
    22.      * 
    23.      */
    24.     public static String scanner(String tip) {
    25.         Scanner scanner = new Scanner(System.in);
    26.         StringBuilder help = new StringBuilder();
    27.         help.append("请输入" + tip + "：");
    28.         System.out.println(help.toString());
    29.         if (scanner.hasNext()) {
    30.             String ipt = scanner.next();
    31.             if (StringUtils.isNotBlank(ipt)) {
    32.                 return ipt;
    33.             }
    34.         }
    35.         throw new MybatisPlusException("请输入正确的" + tip + "！");
    36.     }
    37.  
    38.     public static void main(String[] args) {
    39.         // 代码生成器
    40.         AutoGenerator mpg = new AutoGenerator();
    41.  
    42.         // 全局配置
    43.         GlobalConfig gc = new GlobalConfig();
    44.         String projectPath = System.getProperty("user.dir") + "/spbootpro";
    45.         gc.setOutputDir(projectPath + "/src/main/java");
    46.         gc.setAuthor("jwj");
    47.         gc.setOpen(false);
    48.         gc.setBaseColumnList(true);
    49.         gc.setBaseResultMap(true);
    50.         // gc.setSwagger2(true); 实体属性 Swagger2 注解
    51.         mpg.setGlobalConfig(gc);
    52.  
    53.         // 数据源配置
    54.         DataSourceConfig dsc = new DataSourceConfig();
    55.         dsc.setUrl("jdbc:mysql://localhost:3306/spbootpro?useUnicode=true&useSSL=false&characterEncoding=utf8");
    56.         // dsc.setSchemaName("public");
    57.         dsc.setDriverName("com.mysql.jdbc.Driver");
    58.         dsc.setUsername("root");
    59.         dsc.setPassword("123456");
    60.         mpg.setDataSource(dsc);
    61.  
    62.         // 包配置
    63.         PackageConfig pc = new PackageConfig();
    64.         //pc.setModuleName(scanner("模块名"));
    65.         pc.setParent("com.jwj.spbootpro");
    66.         //设置包名
    67.         pc.setEntity("model");
    68.         mpg.setPackageInfo(pc);
    69.  
    70.         // 自定义配置
    71.         InjectionConfig cfg = new InjectionConfig() {
    72.             @Override
    73.             public void initMap() {
    74.                 // to do nothing
    75.             }
    76.         };
    77.  
    78.         // 如果模板引擎是 freemarker
    79.         String templatePath = "/templates/mybatis-generator/mapper2.xml.ftl";
    80.         // 如果模板引擎是 velocity
    81.         // String templatePath = "/templates/mapper.xml.vm";
    82.  
    83.         // 自定义输出配置
    84.         List<FileOutConfig> focList = new ArrayList<>();
    85.         // 自定义配置会被优先输出
    86.         focList.add(new FileOutConfig(templatePath) {
    87.             @Override
    88.             public String outputFile(TableInfo tableInfo) {
    89.                 // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
    90.                 return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
    91.                         + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
    92.             }
    93.         });
    94.         /*
    95.         cfg.setFileCreate(new IFileCreate() {
    96.             @Override
    97.             public boolean isCreate(ConfigBuilder configBuilder, FileType fileType, String filePath) {
    98.                 // 判断自定义文件夹是否需要创建
    99.                 checkDir("调用默认方法创建的目录，自定义目录用");
    100.                 if (fileType == FileType.MAPPER) {
    101.                     // 已经生成 mapper 文件判断存在，不想重新生成返回 false
    102.                     return !new File(filePath).exists();
    103.                 }
    104.                 // 允许生成模板文件
    105.                 return true;
    106.             }
    107.         });
    108.         */
    109.         cfg.setFileOutConfigList(focList);
    110.         mpg.setCfg(cfg);
    111.  
    112.         // 配置模板
    113.         TemplateConfig templateConfig = new TemplateConfig();
    114.  
    115.         // 配置自定义输出模板
    116.         //指定自定义模板路径，注意不要带上.ftl/.vm, 会根据使用的模板引擎自动识别
    117.         templateConfig.setMapper("templates/mybatis-generator/mapper2.java");
    118.         templateConfig.setEntity("templates/mybatis-generator/entity2.java");
    119.         templateConfig.setService("templates/mybatis-generator/service2.java");
    120.         templateConfig.setServiceImpl("templates/mybatis-generator/serviceImpl2.java");
    121.         templateConfig.setController("templates/mybatis-generator/controller2.java");
    122.         templateConfig.setXml(null);
    123.         mpg.setTemplate(templateConfig);
    124.  
    125.         // 策略配置
    126.         StrategyConfig strategy = new StrategyConfig();
    127.         strategy.setNaming(NamingStrategy.underline_to_camel);
    128.         strategy.setColumnNaming(NamingStrategy.underline_to_camel);
    129.         //strategy.setSuperEntityClass("你自己的父类实体,没有就不用设置!");
    130.         strategy.setEntityLombokModel(true);
    131.         strategy.setRestControllerStyle(true);
    132.         strategy.setEntitySerialVersionUID(false);
    133.         // 公共父类
    134.         //strategy.setSuperControllerClass("你自己的父类控制器,没有就不用设置!");
    135.         // 写于父类中的公共字段
    136.         strategy.setSuperEntityColumns("id");
    137.         strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
    138.         strategy.setControllerMappingHyphenStyle(true);
    139.         strategy.setTablePrefix("t_");
    140.         mpg.setStrategy(strategy);
    141.         mpg.setTemplateEngine(new FreemarkerTemplateEngine());
    142.         mpg.execute();
    143.     }
    144. }

    如下图所示：

    生成成功后如果有时间问题都改为Date,因为我们上一次的错误就又出现这样的情况，凡是有带时间的都改过来，就比如生成这个Order.java

    1.跳转订单页后台，主要是拿到订单页展示数据  

    思路

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

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

    OrderController.java

    1. package com.jwj.spbootpro.controller;
    2.  
    3.  
    4. import com.jwj.spbootpro.model.Goods;
    5. import com.jwj.spbootpro.model.User;
    6. import com.jwj.spbootpro.model.vo.ShopCar;
    7. import com.jwj.spbootpro.model.vo.ShopCarItem;
    8. import org.springframework.stereotype.Controller;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10.  
    11. import org.springframework.web.bind.annotation.RestController;
    12. import org.springframework.web.servlet.ModelAndView;
    13.  
    14. import javax.servlet.http.HttpServletRequest;
    15. import javax.servlet.http.HttpSession;
    16. import java.util.ArrayList;
    17. import java.util.Arrays;
    18. import java.util.List;
    19.  
    20. /**
    21.  * 
    22.  * 订单信息表 前端控制器
    23.  * 
    24.  *
    25.  * @author jwj
    26.  * @since 2022-11-10
    27.  *
    28.  * @Controller:因为我们最终是要跳转到页面
    29.  */
    30. @Controller
    31. @RequestMapping("/order")
    32. public class OrderController {
    33.  
    34.     /**
    35.      * 根据勾选结算的商品跳转到订单页面
    36.      * @param user
    37.      * @param gids
    38.      * @param request
    39.      * @return
    40.      */
    41.     @RequestMapping("/toOrder")
    42.     public ModelAndView toOrder(User user,String gids, HttpServletRequest request){
    43.         ModelAndView mv = new ModelAndView();
    44. //        拿到购物车中的所有商品
    45.         ShopCar shopCar = getShopCar(user, request);
    46. //        通过gids从购物车中筛选出指定的商品
    47.         List<ShopCarItem> list = getGoods(shopCar,gids);
    48.         mv.addObject("goods",list);
    49.         mv.setViewName("order.html");
    50.         return mv;
    51.     }
    52.  
    53.     /**
    54.      * 由于用户结算商品时，不一定是将购物车中所有商品进行结算，有可能只有部分商品
    55.      * 必须根据前端页面用户勾选的商品ID从购物车中找到对应需要结算的商品并存入
    56.      * @param shopCar
    57.      * @param gids
    58.      * @return
    59.      */
    60. //    通过gids从购物车中筛选出指定的商品
    61.     private List<ShopCarItem> getGoods(ShopCar shopCar, String gids) {
    62.         //根据逗号分割商品gids
    63.         List<String> gidList = Arrays.asList(gids.split(","));
    64.         //代表购物车中已有的商品集合
    65.         List<ShopCarItem> items = shopCar.getItems();   //3个    购物车里的商品
    66.         //定义结算商品集合
    67.         List<ShopCarItem> itemsNew = new ArrayList<>();//2个    购物车要结算的商品
    68.         //循环遍历购物车中的商品并与勾选结算的商品ID进行比较
    69.         for (ShopCarItem item : items) {
    70.             //判断购物车中的商品与勾选结算的商品ID是否一致
    71.             if(gidList.contains(item.getGid()+"")){
    72.                 itemsNew.add(item);
    73.             }
    74.         }
    75.         return itemsNew;
    76.     }
    77.  
    78.     //    从session中获取购物车对象
    79.     private ShopCar getShopCar(User user, HttpServletRequest request){
    80.         //获取session
    81.         HttpSession session = request.getSession();
    82.         //从session中获取购物车对象
    83.         ShopCar shopCar = (ShopCar)session.getAttribute(user.getId() + "_shopCar");
    84.         //判断shopCar是否为空
    85.         if(shopCar == null){
    86.             //初始化购物车对象
    87.             shopCar = new ShopCar();
    88.             //将初始化完成的购物车对象根据用户id报错到session中
    89.             session.setAttribute(user.getId()+"_shopCar",shopCar);
    90.         }
    91.         return shopCar;
    92.     }
    93.  
    94. }

    2.订单页前台展示 

    order.html

    

   
      <#include "common/head.html">
      
      
      
   
   
      
      
    
         
    
            
    
               
    
               
    
                  
    
                     
                     
                  
    
               
    
            
    
         
    
      
    
      
      
    
      
    
            
    
               订单确认
               
            
    
         
    
         
         
    
            
    
               
               
    收件信息新增地址
    
               
               
    
                  
    
                     
    
                        
    张三1
                           [默认地址]
                        
    
                        
    
                           删除
                           |
                           编辑
                        
    
                     
    
                     
    
                        
    河北省 唐山市 路北区 大学生公寓村
    
                        
    15732570937
    
                     
    
                  
    
                  
    
                     
    
                        
    张三2
                        
    
                        
    
                           设为默认
                           |
                           删除
                           |
                           编辑
                        
    
                     
    
                     
    
                        
    河北省 唐山市 路北区 大学生公寓村
    
                        
    15732570937
    
                     
    
                  
    
                  
    
                     
    
                        
    张三3
                        
    
                        
    
                           设为默认
                           |
                           删除
                           |
                           编辑
                        
    
                     
    
                     
    
                        
    河北省 唐山市 路北区 大学生公寓村
    
                        
    15732570937
    
                     
    
                  
    
               
    
               
    支付方式
    
               
               
    
                  
                  
                  
                  
               
    
               
    选择快递
    
               
               
    
                  顺风快递
                  百世汇通
                  圆通快递
                  中通快递
               
    
            
    
            
    
               
    
                  
    订单内容返回购物车
    

                  <#if goods??>
                  <#list goods as g>
                     
      
                        
    • 
                           
                        
      • 
                        
    • 
                           
      ${g.goodsName}
      
                           
      颜色分类：烟灰色玻璃瓶
      
                           
      数量：${g.quantity}
      
                        
      • 
                        
    • ￥${g.goodsPrice}
      • 
                     
    
                  
                  

               
    
               
               
    
                  
    商品金额：￥139.8
    
                  
    优惠金额：￥0.00
    
                  
    运费：免运费
    
               
    
               
               
    
                  
    合计：￥139.8
    

               
    
               
               去支付
            
    
         
    
      
    
      
      
      
    
      
    
         
    
            
            
            
    
               
               
               
               
            
    
            
            
            
    
               
               
            
    
         
    
      
    
      
      
      <#include "common/footer.html">

     展示结果如下：

    结算如下所示：

    三、生成订单

    实现思路

    1.前台订单相关数据获取

    2.后台进行下单操作 

    1.结算页的下单前端

    前端相关处理

    1.获取收货地址、收货人以及联系电话

    2.获取支付方式

    获取快递方式

     

    在Order.html添加Order.js 

    Order.js代码如下：

    $(function () {
    $(".pay").click(function () {
        // 1）获取收货地址、收货人以及联系电话
        let name=$('.addres').find('div.on div:eq(0)>p:eq(0)').text().trim();
        let address=$('.addres').find('div.on div:eq(1)>p:eq(0)').text();
        let phone=$('.addres').find('div.on div:eq(1)>p:eq(1)').text();
        console.log("name=%s,address=%s,phone=%s",name,address,phone);
        // 2）获取支付方式
        let pay=$('.way').find('img.on').attr('value');
        console.log(pay);
        // 3）获取快递方式
        let dis=$('.dis').find('span.on').text();
        console.log(dis);
        //获取勾选结算的商品ID
        let gids=$('#gids').val();
        //拼接请求参数
        let params={
            gids:gids,
            address:address,
            person:name,
            telephone:phone,
            pay:pay,
            mail:dis
        };
        console.log(params);

        $.post('/order/addOrder',params,function(rs){
            if(rs.code==200){
                location.href='/page/ok.html';
            }else{
                alert(rs.msg);
            }
        },'json');
    });
});

     2.结算下单后台实现

    建一个OrderDto.java为了处理在order.js里去写大量的js代码

    OrderDto.java

    1. package com.jwj.spbootpro.model.dto;
    2.  
    3. import com.jwj.spbootpro.model.Order;
    4. import lombok.Data;
    5.  
    6. /**
    7.  * @author 敢敢
    8.  * @site www.javajwj.com
    9.  * @company xxx公司
    10.  * @create  2022-11-10 18:23
    11.  */
    12. @Data
    13. public class OrderDto extends Order {
    14.     private String gids;
    15. }

    OrderController.java   

    package com.jwj.spbootpro.controller;


import com.jwj.spbootpro.model.Goods;
import com.jwj.spbootpro.model.User;
import com.jwj.spbootpro.model.dto.OrderDto;
import com.jwj.spbootpro.model.vo.ShopCar;
import com.jwj.spbootpro.model.vo.ShopCarItem;
import com.jwj.spbootpro.service.IOrderService;
import com.jwj.spbootpro.utils.JsonResponseBody;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;
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;

/**
 * 
    
 * 订单信息表 前端控制器
 * 
    
 *
 * @author jwj
 * @since 2022-11-10
 *
 * @Controller:因为我们最终是要跳转到页面
 */
@Controller
@RequestMapping("/order")
public class OrderController {

    /**
     * 根据勾选结算的商品跳转到订单页面
     * @param user
     * @param gids
     * @param request
     * @return
     */
    @RequestMapping("/toOrder")
    public ModelAndView toOrder(User user,String gids, HttpServletRequest request){
        ModelAndView mv = new ModelAndView();
//        拿到购物车中的所有商品
        ShopCar shopCar = getShopCar(user, request);
//        通过gids从购物车中筛选出指定的商品
        List list = getGoods(shopCar,gids);
        mv.addObject("goods",list);
        mv.setViewName("order.html");
        return mv;
    }

    /**
     * 由于用户结算商品时，不一定是将购物车中所有商品进行结算，有可能只有部分商品
     * 必须根据前端页面用户勾选的商品ID从购物车中找到对应需要结算的商品并存入
     * @param shopCar
     * @param gids
     * @return
     */
//    通过gids从购物车中筛选出指定的商品
    private List getGoods(ShopCar shopCar, String gids) {
        //根据逗号分割商品gids
        List gidList = Arrays.asList(gids.split(","));
        //代表购物车中已有的商品集合
        List items = shopCar.getItems();   //3个    购物车里的商品
        //定义结算商品集合
        List itemsNew = new ArrayList<>();//2个    购物车要结算的商品
        //循环遍历购物车中的商品并与勾选结算的商品ID进行比较
        for (ShopCarItem item : items) {
            //判断购物车中的商品与勾选结算的商品ID是否一致
            if(gidList.contains(item.getGid()+"")){
                itemsNew.add(item);
            }
        }
        return itemsNew;
    }

    //    从session中获取购物车对象
    private ShopCar getShopCar(User user, HttpServletRequest request){
        //获取session
        HttpSession session = request.getSession();
        //从session中获取购物车对象
        ShopCar shopCar = (ShopCar)session.getAttribute(user.getId() + "_shopCar");
        //判断shopCar是否为空
        if(shopCar == null){
            //初始化购物车对象
            shopCar = new ShopCar();
            //将初始化完成的购物车对象根据用户id报错到session中
            session.setAttribute(user.getId()+"_shopCar",shopCar);
        }
        return shopCar;
    }

    @Autowired
    private IOrderService orderService;

    @ResponseBody
    @RequestMapping("/addOrder")
    //非ajax返回的ModelAndView，ajax返回的是JsonResponseBody
    public JsonResponseBody addOrder(User user, OrderDto orderDto,HttpServletRequest request){
        // 1.拿到购物车 2.通过orderDto拿到gids,再拿到要结算的商品 3.数据要入订单表 4.数据要入订单项表
        //获取购物车
        ShopCar shopCar = this.getShopCar(user, request);
        //获取结算商品集合
        List shopCarItems = this.getGoods(shopCar, orderDto.getGids());
        //生成订单及订单项
        orderDto.setUserId(user.getId());
        orderService.addOrder(orderDto,shopCarItems);
        //从购物车中删除已结算的商品
        shopCar.delete(orderDto.getGids());
        //跳转支付页面
        return new JsonResponseBody();
    }
}

     IOrderService.java创建addOrder方法

    1. package com.jwj.spbootpro.service;
    2.  
    3. import com.jwj.spbootpro.model.Order;
    4. import com.baomidou.mybatisplus.extension.service.IService;
    5. import com.jwj.spbootpro.model.dto.OrderDto;
    6. import com.jwj.spbootpro.model.vo.ShopCarItem;
    7.  
    8. import java.util.List;
    9.  
    10. /**
    11.  * 
    12.  * 订单信息表 服务类
    13.  * 
    14.  *
    15.  * @author jwj
    16.  * @since 2022-11-10
    17.  */
    18. public interface IOrderService extends IService<Order> {
    19.  
    20.     void addOrder(OrderDto orderDto, List<ShopCarItem> shopCarItems);
    21. }

     在我们的实现类也要实现addOrder方法

    OrderServiceImpl.java

    1. package com.jwj.spbootpro.service.impl;
    2.  
    3. import com.jwj.spbootpro.model.Order;
    4. import com.jwj.spbootpro.mapper.OrderMapper;
    5. import com.jwj.spbootpro.model.OrderItem;
    6. import com.jwj.spbootpro.model.dto.OrderDto;
    7. import com.jwj.spbootpro.model.vo.ShopCarItem;
    8. import com.jwj.spbootpro.service.IOrderItemService;
    9. import com.jwj.spbootpro.service.IOrderService;
    10. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    11. import com.jwj.spbootpro.utils.SnowFlake;
    12. import org.springframework.beans.factory.annotation.Autowired;
    13. import org.springframework.stereotype.Service;
    14. import org.springframework.transaction.annotation.Transactional;
    15.  
    16. import java.math.BigDecimal;
    17. import java.util.ArrayList;
    18. import java.util.List;
    19.  
    20. /**
    21.  * 
    22.  * 订单信息表 服务实现类
    23.  * 
    24.  *
    25.  * @author jwj
    26.  * @since 2022-11-10
    27.  */
    28. @Service
    29. public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements IOrderService {
    30.     @Autowired
    31.     private OrderMapper orderMapper;
    32.  
    33.     @Autowired
    34.    private IOrderItemService orderItemService;
    35.  
    36.  
    37. //    @Transactional注解：以下的方法因为同时设置到两张表的增删改的操作，要么同时成功，要么同时失败
    38.     @Transactional
    39.     @Override
    40.     public void addOrder(OrderDto orderDto, List<ShopCarItem> shopCarItems) {
    41. //        订单表以及订单项表的数据录入
    42.         //1) 生成订单ID     SnowFlake生成雪花ID，它的作用，生成一个随机的long类型的数字；
    43. //        相比较于UUID的优点在于，雪花ID可以排序
    44.         SnowFlake snowFlake = new SnowFlake(2, 3);
    45.         Long orderId=snowFlake.nextId();
    46.         orderDto.setOid(orderId);
    47.         //2) 循环勾选的商品集合计算商品总价、获取商品详情集合
    48.         //总价
    49.         BigDecimal total=BigDecimal.valueOf(0);
    50.         //定义商品详情集合
    51.         List<OrderItem> orderItems=new ArrayList<>();
    52.         OrderItem it=null;
    53.         for (ShopCarItem shopCarItem : shopCarItems) {
    54.             //累加小计等于总价
    55.             total=total.add(shopCarItem.smalltotal());
    56.             //初始化OrderItem商品详情对象
    57.             it=new OrderItem();
    58. //          订单项表的ooid为自增，所以不需要设置
    59.             it.setOid(orderId);
    60.             it.setGid(shopCarItem.getGid());
    61.             it.setGoodsName(shopCarItem.getGoodsName());
    62.             it.setGoodsPrice(shopCarItem.getGoodsPrice());
    63.             it.setQuantity(shopCarItem.getQuantity());
    64.             orderItems.add(it);
    65.         }
    66.         orderDto.setTotal(total);
    67.  
    68.         //1.保存订单
    69.         orderMapper.insert(orderDto);
    70.         //2.保存订单对应的订单项
    71.         orderItemService.saveBatch(orderItems);
    72.  
    73.     }
    74. }

    给我们OrderMapper添加注解@repository，

    同时还要OrderItemMapper也要添加注解@repository

    SnowFlake.java 放到我们的util里面去

    这是我们的雪花算法，把我们的id转成一个long类型的随机的一个数字

    想比较于UUID的优点在于，雪花ID可以排序 

    1. package com.jwj.spbootpro.utils;
    2.  
    3. public class SnowFlake {
    4.  
    5.     /**
    6.      * 起始的时间戳
    7.      */
    8.     private final static long START_STMP = 1480166465631L;
    9.  
    10.     /**
    11.      * 每一部分占用的位数
    12.      */
    13.     private final static long SEQUENCE_BIT = 12; //序列号占用的位数
    14.     private final static long MACHINE_BIT = 5;   //机器标识占用的位数
    15.     private final static long DATACENTER_BIT = 5;//数据中心占用的位数
    16.  
    17.     /**
    18.      * 每一部分的最大值
    19.      */
    20.     private final static long MAX_DATACENTER_NUM = -1L ^ (-1L << DATACENTER_BIT);
    21.     private final static long MAX_MACHINE_NUM = -1L ^ (-1L << MACHINE_BIT);
    22.     private final static long MAX_SEQUENCE = -1L ^ (-1L << SEQUENCE_BIT);
    23.  
    24.     /**
    25.      * 每一部分向左的位移
    26.      */
    27.     private final static long MACHINE_LEFT = SEQUENCE_BIT;
    28.     private final static long DATACENTER_LEFT = SEQUENCE_BIT + MACHINE_BIT;
    29.     private final static long TIMESTMP_LEFT = DATACENTER_LEFT + DATACENTER_BIT;
    30.  
    31.     private long datacenterId;  //数据中心
    32.     private long machineId;     //机器标识
    33.     private long sequence = 0L; //序列号
    34.     private long lastStmp = -1L;//上一次时间戳
    35.  
    36.     public SnowFlake(long datacenterId, long machineId) {
    37.         if (datacenterId > MAX_DATACENTER_NUM || datacenterId < 0) {
    38.             throw new IllegalArgumentException("datacenterId can't be greater than MAX_DATACENTER_NUM or less than 0");
    39.         }
    40.         if (machineId > MAX_MACHINE_NUM || machineId < 0) {
    41.             throw new IllegalArgumentException("machineId can't be greater than MAX_MACHINE_NUM or less than 0");
    42.         }
    43.         this.datacenterId = datacenterId;
    44.         this.machineId = machineId;
    45.     }
    46.  
    47.     /**
    48.      * 产生下一个ID
    49.      *
    50.      * @return
    51.      */
    52.     public synchronized long nextId() {
    53.         long currStmp = getNewstmp();
    54.         if (currStmp < lastStmp) {
    55.             throw new RuntimeException("Clock moved backwards.  Refusing to generate id");
    56.         }
    57.  
    58.         if (currStmp == lastStmp) {
    59.             //相同毫秒内，序列号自增
    60.             sequence = (sequence + 1) & MAX_SEQUENCE;
    61.             //同一毫秒的序列数已经达到最大
    62.             if (sequence == 0L) {
    63.                 currStmp = getNextMill();
    64.             }
    65.         } else {
    66.             //不同毫秒内，序列号置为0
    67.             sequence = 0L;
    68.         }
    69.  
    70.         lastStmp = currStmp;
    71.  
    72.         return (currStmp - START_STMP) << TIMESTMP_LEFT //时间戳部分
    73.                 | datacenterId << DATACENTER_LEFT       //数据中心部分
    74.                 | machineId << MACHINE_LEFT             //机器标识部分
    75.                 | sequence;                             //序列号部分
    76.     }
    77.  
    78.     private long getNextMill() {
    79.         long mill = getNewstmp();
    80.         while (mill <= lastStmp) {
    81.             mill = getNewstmp();
    82.         }
    83.         return mill;
    84.     }
    85.  
    86.     private long getNewstmp() {
    87.         return System.currentTimeMillis();
    88.     }
    89.  
    90.     public static void main(String[] args) {
    91.         SnowFlake snowFlake = new SnowFlake(2, 3);
    92.  
    93.         long start = System.currentTimeMillis();
    94.         for (int i = 0; i < 1000000; i++) {
    95.             System.out.println(snowFlake.nextId());
    96.         }
    97.  
    98.         System.out.println(System.currentTimeMillis() - start);
    99.  
    100.  
    101.     }
    102. }

    测试效果如下图所示：

    我们数据库里目前是没有数据的，如下所示：

    注意：这里的数据库里面要自动增长，如果没有很可能会出错。 

    最终跳转到结算成功页面，5s后自动跳转到订单展示页面，如下图所示:

    在看一下我们数据库有没有数据，如下所示：

     四、沙箱支付简介

    1.配置沙箱支付

    第一步：

    1）登陆支付宝：https://open.alipay.com/

    点击登录：扫码登录

    2）首页找到进入管理中心 ---》开发工具推荐选择【沙箱】

    3）下载安装支付宝开放平台开发助手:

    密钥工具简介 ｜ 开放平台

    下载好之后就是这样的，我下载的安卓的

    4）打开本地支付宝开放平台助手---》密钥工具---》生成密钥---》以默认的方式（RSA2和KCS8）生成应用私钥和应用公钥

    注意：密钥是留给自己用的 ，公钥是copy出去的

    5）在沙箱应用的开发信息中选择自定义密钥生成支付宝公钥（基于应用公钥生成支付宝公钥）

    第二步：配置沙箱账号（买家）并完成手动充值

    登录 - 支付宝

    第三步：下载沙箱支付宝（只支持安卓）

    沙箱工具---》支付宝客户端沙箱版---》请使用浏览器中的扫码功能扫码下载

    注：请使用Android手机扫码下载支付宝客户端沙箱版；如需登录，请访问沙箱账号，在商家信息中获取账密 

    通过这个扫码它就会自动下载，下载沙箱支付宝APP的安装包，下载好了之后，这里面默认会有100万块钱或者其他，可以通过下面这种方式，进行充值。

     五、沙箱支付应用

    实现思路

    1.完成支付宝沙箱支付功能接入

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

     1.完成支付宝沙箱支付功能接入

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

    Easy 版 ｜ 开放平台

    先在支付宝开放平台密钥工具，生成密钥，把我们的 应用公钥复制到

    注意：上面的支付宝公钥复制了之后要记得点击确定。 

     把我们的支付宝公钥复制到我们的代码里面AlipayConfig类里的支付宝公钥

    那么下面这里我封装了一版，封装类版，配置类 

    AlipayConfig.java

    1. package com.jwj.spbootpro.config;
    2.  
    3. import com.alipay.easysdk.factory.Factory;
    4. import com.alipay.easysdk.kernel.Config;
    5. import com.alipay.easysdk.payment.page.models.AlipayTradePagePayResponse;
    6. import com.jwj.spbootpro.model.dto.OrderDto;
    7.  
    8. /**
    9.  * 支付宝沙箱支付
    10.  */
    11. public class AlipayConfig {
    12.  
    13.     public String goAlipay(OrderDto orderDto){
    14.         try {
    15.             // 1. 设置参数（全局只需设置一次）
    16.             Factory.setOptions(aliconfig());
    17.             // 2. 发起API调用（subject商品标题、outTradeNo订单编号、totalAmount总金额、returnUrl异步通知地址）
    18.             AlipayTradePagePayResponse response = Factory.Payment.Page()
    19.                     .pay(orderDto.getOid()+"",
    20.                             orderDto.getOid()+"",
    21.                             orderDto.getTotal().toString(),
    22.                             "http://localhost:8081/page/ok.html");  //支付成功之后的异步通知（跳出到自己系统的哪个位置）
    23.             System.out.println(response.body);
    24.             return response.body;
    25.         }  catch (Exception e) {
    26.             e.printStackTrace();
    27.             throw new RuntimeException(e);
    28.         }
    29.     }
    30.  
    31.     private Config aliconfig(){
    32.         Config config=new Config();
    33.         //沙箱支付宝地址
    34.         config.gatewayHost="openapi.alipaydev.com";
    35.         //协议https
    36.         config.protocol="https";
    37.         //应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
    38.         config.appId="2021000121687583";
    39.         //支付宝公钥
    40.         config.alipayPublicKey="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsc74PulHrpMlGXt53c1CYfBziNjY9W299fXA5aU3f+eKKNnjc9fmUXYusGms0MgSSYgji4SuAfl1LxtRJEwqz8L7zxOxq0JB6Y5+XFXiSpdys4f6wMJXoaRWamEzfaSkpgoJ6vO+VqJa+j77Brc//mxRtHjrcS3xW5doUBOsAAdofjwaaWgcT2cmzb3r/QEXu4vfrOdV4uuXD5GWJ7bIYTDuRsRBL8iBPtqv1OkB6184f2t0Qch0g6Pyti/cg10BB5s/i9uUCqHCtHl5CQrpubQc6hYb4mmp8ZXLvqfPAmq0fgABDQklCPdww7qML6cATsv+WZF+f5NsxVPOgYPeQwIDAQAB";
    41.         //签名方式
    42.         config.signType="RSA2";
    43.         //商户私钥（应用私钥），您的PKCS8格式RSA2私钥
    44.         config.merchantPrivateKey="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCG0psRs7/OH5gLmjpvlINXDMPOMIlLk8oqP1KdeKBHTOejsk01PyN6zqS0rzqmYHRNMCFsZnX1JvpqvZ8F0Vcw8FSzTGXGLyvAufqic5dIASb91qcF/4QSnoFzNVhIp6KSUsWlpY87bHkRZlLY3sseHu8M4HWOJmr1XidvIFpozxDmc5EgA0tHqogcth6ncW3uGXtNtKg840hejawhpEryCXNPbPK0pq1P95iWpmV+YtxTUWSfFTgjc88JPCaNSfhpPx11Up3oDHsMa+RlsKD1xaetLzjfPwoU73ymPVo0ii88z/KrzdNKfTE0Mkm4GQbID31GJ4yhYW/jsLNUQs+vAgMBAAECggEAN8TEOjVVQMkW1q3MQD15eregAxlWoXmXpZQd819jRTsNkkv93empHnJ99POK2imJ0if3m2RipK6j5SVcs0Zdv7OaBbSzYKBAg+8qOqp/yFwZqeRxoGyKUD1apLJLO3qEJ+yvLw7lyZncFpNx751w/ZukHHp4hf1kPuzceP40B6gH8h8BIJTpYItP3fVYrECjJ94Yr68OAQZ1pvlwK68b1HD68MIInHZIeZ9QYpzfMoCk/6wNYE31yYuoUpkmoENuCrA2r/G2xOQBVwgIO8pPyJ7WQCC5/jtFu8pbob8HBb2QHAUfvYj+MXtxglC8cHZmXECW7+mc61YRFCS7AlnmkQKBgQD0prghOEQdp1zCw0y2yfhmLhwfARyZUFZbOe4yuKuWitsuG3c7t8JCPiT3ifXzRnyoG3ticQxctFtfsBmGFzNxk+Y7fyexzN5EMcwD6wGIstemxumF76ts4Ycj4iiuotxbqJ/gw/xPHcL03AZTMokO1+HR78xjHLXjl0LshgK9pwKBgQCNE6arORAsnvJnC5scDsE2IYcbB13+eRKed2I5KAIMfEnXYRIscI413dujU3vR85s6ed91+vifh6wchwtdngX/eJ7V5Diz7m46hvGDH7YAe9RbSD9QaedDf2z/kotKV6m16Wlwy64DCEUlyVkaw3I7qOjrezfATQLWqbsimCZuuQKBgGvEyRVxGKhLYhQ1PaTDYVV5eE+8CKIMfo3e/et/563/6r7rwGEg+ER/5X7ZWetZIG5Y9MgPblej5yBGjWfA7ptYgDGzOIQc78fwe6M6MUnLJi3EL3gddFEZI5ON+0e6XAFQTWUQUCN1w7xi87JQb4mHVWVKEamTKxhfOE7CVZC/AoGAHA2UTugB912EBkmghmvIr+Lq4s0MO9YHhctnlMYH4kO0y0daPcwD+2Iqkse/D3jJnU8uyF8noVFxQBr6f5s0xiBONWo0fFMlSC4dSF2960q0Z5JuRKdKfXmRSyDw4c+cx7eqZ+uYprG2TlVDirbiuEpWRr0x0ON/dQA7Xh2zRsECgYEAj4iagNb8hBqJOPLBLzca3qLbUmdrGMVSEbXxyJaR6RP9C4SFeuJTh09LqVcFuss+jw7GaCJ74j1a2xQuKDF1xlfO7krb32EV0KGnrMtVwTCyT7LVcugPw+rsd97pros85jZhigARiSUA3vKpQf0bA7BEfq2RFSVKZ9fdHVsUSAM=";
    45.         return config;
    46.     }
    47. }

    我们支付成功之后就要跳转到最终的那个页面了，然而我们之前是直接跳转到最终页面了，现在就不可以了。

    order.js 就要变更如下：        支付会引发页面跳转，所以要经ajax请求换成页面跳转的方式

    $(function(){
    $('.pay').click(function(){
        alert("11");
        //获取收货地址、联系人、联系电话
        let name=$('.addres').find('div.on div:eq(0)>p:eq(0)').text().trim();
        let address=$('.addres').find('div.on div:eq(1)>p:eq(0)').text();
        let phone=$('.addres').find('div.on div:eq(1)>p:eq(1)').text();
        console.log("name=%s,address=%s,phone=%s",name,address,phone);
        //获取支付方式
        let pay=$('.way').find('img.on').attr('value');
        console.log(pay);
        //获取快递方式
        let dis=$('.dis').find('span.on').text();
        console.log(dis);
        //获取勾选结算的商品ID
        let gids=$('#gids').val();
        //拼接请求参数
        let params={
            gids:gids,
            address:address,
            person:name,
            telephone:phone,
            pay:pay,
            mail:dis
        };
        console.log(params);

        // $.post('/order/addOrder',params,function(rs){
        //     if(rs.code==200){
        //         location.href='/page/ok.html';
        //     }else{
        //         alert(rs.msg);
        //     }
        // },'json');
        //一般的支付成功网址都是很长就列如：http://localhost:8080/order/addOrder?gids=sjdksjljfdsjw&djfsj&name=jssjdj
        location.href="/order/addOrder?"+parseParams(params);

    });
});

/**
 * JSON转URL参数
 * @param data
 * @returns {string}
 */
function parseParams(data) {
    try {
        var tempArr = [];
        for (var i in data) {
            var key = encodeURIComponent(i);
            var value = encodeURIComponent(data[i]);
            tempArr.push(key + '=' + value);
        }
        var urlParamsStr = tempArr.join('&');
        return urlParamsStr;
    } catch (err) {
        return '';
    }
}

    OrderController.java代码也要变更如下：

    @Autowired
private IOrderService orderService;

@RequestMapping("/addOrder")
@ResponseBody
//非ajax返回的ModelAndView，ajax返回的是JsonResponseBody
public String addOrder(User user, OrderDto orderDto,HttpServletRequest request){
    // 1.拿到购物车 2.通过orderDto拿到gids,再拿到要结算的商品 3.数据要入订单表 4.数据要入订单项表
    //获取购物车
    ShopCar shopCar = this.getShopCar(user, request);
    //获取结算商品集合
    List shopCarItems = this.getGoods(shopCar, orderDto.getGids());
    //生成订单及订单项
    orderDto.setUserId(user.getId());
    orderService.addOrder(orderDto,shopCarItems);
    //从购物车中删除已结算的商品
    shopCar.delete(orderDto.getGids());
    //跳转支付页面
    AlipayConfig alipayConfig = new AlipayConfig();
    return alipayConfig.goAlipay(orderDto);
}

    测试如下：为了方便我们测试，我又把数据清空掉了

    成功了 

    来看一下我们买家的金额 

    看一下我们的数据库里有没有数据

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

    OrderController.java 代码新增如下：

    1. /**
    2.  * 支付成功后回调处理订单状态，完成整个下单流程的链路
    3.  * @param param
    4.  * @return
    5.  */
    6. @RequestMapping("/orderFinish")
    7. public String orderFinish(@RequestParam Map<String, String> param){
    8. 	System.out.println("异步回调开始。。。。。。");
    9. 	Boolean signVerified=false;
    10.  
    11. 	try {
    12. 		System.out.println(param);
    13. 		signVerified = Factory.Payment.Common().verifyNotify(param);
    14. 		System.out.println(signVerified);
    15. 		System.out.println("out_trade_no："+param.get("out_trade_no"));
    16. 		System.out.println("total_amount："+param.get("total_amount"));
    17. 		System.out.println("trade_no："+param.get("trade_no"));
    18. 		if(signVerified){
    19. 			//支付成功
    20. 			//根据订单编号修改订单状态
    21. 			//update t_xxx set xx=?,tt=? where id=?
    22. 			orderService.update(new UpdateWrapper<Order>()
    23. 					.set("status",1)
    24. 					.setSql("pay_date=now()")
    25. 					.eq("oid",param.get("out_trade_no")));
    26. 			//跳转到支付成功页面
    27. 		}else{
    28. 			//支付失败
    29. 		}
    30.  
    31.  
    32. 	} catch (Exception e) {
    33. 		e.printStackTrace();
    34. 	}
    35. 	return "ok.html";
    36. }

     AlipayConfig.java 变更如下：

    package com.jwj.spbootpro.config;

import com.alipay.easysdk.factory.Factory;
import com.alipay.easysdk.kernel.Config;
import com.alipay.easysdk.payment.page.models.AlipayTradePagePayResponse;
import com.jwj.spbootpro.model.dto.OrderDto;

/**
 * 支付宝沙箱支付
 */
public class AlipayConfig {

    public String goAlipay(OrderDto orderDto){
        try {
            // 1. 设置参数（全局只需设置一次）
            Factory.setOptions(aliconfig());
            // 2. 发起API调用（subject商品标题、outTradeNo订单编号、totalAmount总金额、returnUrl异步通知地址）
            AlipayTradePagePayResponse response = Factory.Payment.Page()
                    .pay(orderDto.getOid()+"",
                            orderDto.getOid()+"",
                            orderDto.getTotal().toString(),
//                            "http://localhost:8081/page/ok.html");  //支付成功之后的异步通知（跳出到自己系统的哪个位置）
                            "http://localhost:8081/order/orderFinish");  //支付成功之后的异步通知（跳出到自己系统的哪个位置）
            System.out.println(response.body);
            return response.body;
        }  catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

    private Config aliconfig(){
        Config config=new Config();
        //沙箱支付宝地址
        config.gatewayHost="openapi.alipaydev.com";
        //协议https
        config.protocol="https";
        //应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
        config.appId="2021000121687583";
        //支付宝公钥
        config.alipayPublicKey="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsc74PulHrpMlGXt53c1CYfBziNjY9W299fXA5aU3f+eKKNnjc9fmUXYusGms0MgSSYgji4SuAfl1LxtRJEwqz8L7zxOxq0JB6Y5+XFXiSpdys4f6wMJXoaRWamEzfaSkpgoJ6vO+VqJa+j77Brc//mxRtHjrcS3xW5doUBOsAAdofjwaaWgcT2cmzb3r/QEXu4vfrOdV4uuXD5GWJ7bIYTDuRsRBL8iBPtqv1OkB6184f2t0Qch0g6Pyti/cg10BB5s/i9uUCqHCtHl5CQrpubQc6hYb4mmp8ZXLvqfPAmq0fgABDQklCPdww7qML6cATsv+WZF+f5NsxVPOgYPeQwIDAQAB";
        //签名方式
        config.signType="RSA2";
        //商户私钥（应用私钥），您的PKCS8格式RSA2私钥
        config.merchantPrivateKey="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCG0psRs7/OH5gLmjpvlINXDMPOMIlLk8oqP1KdeKBHTOejsk01PyN6zqS0rzqmYHRNMCFsZnX1JvpqvZ8F0Vcw8FSzTGXGLyvAufqic5dIASb91qcF/4QSnoFzNVhIp6KSUsWlpY87bHkRZlLY3sseHu8M4HWOJmr1XidvIFpozxDmc5EgA0tHqogcth6ncW3uGXtNtKg840hejawhpEryCXNPbPK0pq1P95iWpmV+YtxTUWSfFTgjc88JPCaNSfhpPx11Up3oDHsMa+RlsKD1xaetLzjfPwoU73ymPVo0ii88z/KrzdNKfTE0Mkm4GQbID31GJ4yhYW/jsLNUQs+vAgMBAAECggEAN8TEOjVVQMkW1q3MQD15eregAxlWoXmXpZQd819jRTsNkkv93empHnJ99POK2imJ0if3m2RipK6j5SVcs0Zdv7OaBbSzYKBAg+8qOqp/yFwZqeRxoGyKUD1apLJLO3qEJ+yvLw7lyZncFpNx751w/ZukHHp4hf1kPuzceP40B6gH8h8BIJTpYItP3fVYrECjJ94Yr68OAQZ1pvlwK68b1HD68MIInHZIeZ9QYpzfMoCk/6wNYE31yYuoUpkmoENuCrA2r/G2xOQBVwgIO8pPyJ7WQCC5/jtFu8pbob8HBb2QHAUfvYj+MXtxglC8cHZmXECW7+mc61YRFCS7AlnmkQKBgQD0prghOEQdp1zCw0y2yfhmLhwfARyZUFZbOe4yuKuWitsuG3c7t8JCPiT3ifXzRnyoG3ticQxctFtfsBmGFzNxk+Y7fyexzN5EMcwD6wGIstemxumF76ts4Ycj4iiuotxbqJ/gw/xPHcL03AZTMokO1+HR78xjHLXjl0LshgK9pwKBgQCNE6arORAsnvJnC5scDsE2IYcbB13+eRKed2I5KAIMfEnXYRIscI413dujU3vR85s6ed91+vifh6wchwtdngX/eJ7V5Diz7m46hvGDH7YAe9RbSD9QaedDf2z/kotKV6m16Wlwy64DCEUlyVkaw3I7qOjrezfATQLWqbsimCZuuQKBgGvEyRVxGKhLYhQ1PaTDYVV5eE+8CKIMfo3e/et/563/6r7rwGEg+ER/5X7ZWetZIG5Y9MgPblej5yBGjWfA7ptYgDGzOIQc78fwe6M6MUnLJi3EL3gddFEZI5ON+0e6XAFQTWUQUCN1w7xi87JQb4mHVWVKEamTKxhfOE7CVZC/AoGAHA2UTugB912EBkmghmvIr+Lq4s0MO9YHhctnlMYH4kO0y0daPcwD+2Iqkse/D3jJnU8uyF8noVFxQBr6f5s0xiBONWo0fFMlSC4dSF2960q0Z5JuRKdKfXmRSyDw4c+cx7eqZ+uYprG2TlVDirbiuEpWRr0x0ON/dQA7Xh2zRsECgYEAj4iagNb8hBqJOPLBLzca3qLbUmdrGMVSEbXxyJaR6RP9C4SFeuJTh09LqVcFuss+jw7GaCJ74j1a2xQuKDF1xlfO7krb32EV0KGnrMtVwTCyT7LVcugPw+rsd97pros85jZhigARiSUA3vKpQf0bA7BEfq2RFSVKZ9fdHVsUSAM=";
        return config;
    }
}

    测试如下：

    看看我们的数据库时间有没有，状态发生改变没有如下：

  • 相关阅读:
    基于灰狼算法(GWO)优化的VMD参数（GWO-VMD）
    Unity3D Entity_CacheService实现详解
    基于springboot实现班级综合测评管理系统项目【项目源码+论文说明】
    六、Docker仓库之Harbor搭建（三）
    java计算机毕业设计基于springboot+vue+elementUI的在线彩妆化妆品销售店铺商城(前后端分离）
    企业级-精度计算
    基于华为云服务器Docker nginx安装和配置挂载
    深入浅出DAX：数据分析
    本地FTP YUM源报错处理
    Con A-PEG-Indocyanine green 刀豆球蛋白A-聚乙二醇-吲哚菁绿,Concanavalin A-ICG
  • 原文地址：https://blog.csdn.net/weixin_67465673/article/details/127775386