【SpringBoot开发】之商城项目案例(订单及订单项生成)

news2025/6/10 13:13:45

  🎉🎉欢迎来到我的CSDN主页!🎉🎉

🏅我是君易--鑨,一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的博客专栏《SpringBoot开发之商城项目系列》。🎯🎯

🎁如果感觉还不错的话请给我关注加三连吧!🎁🎁


前言

        在上一期的博客中我们实现了购物车的全选全不选、单个删除以及删除所选中的商品,还有选中相应的商品进行对应的商品件数及总价的计算。本期的博客是基于上期的博客进行订单及订单项的生成。

一、订单及订单项的生成

1. 订单页面的数据绑定

        首先设置点击结算的点击事件,我们在cart.js中进行编写其函数方法

// 	设置结算的点击事件
	$(".count").click(function (){
		      // 	获取所有选中的商品ID
			// 	获取所有选中的商品ID
		let ids=[]
		// 遍历所有的行
		$(".th").each((i,ele)=>{
			// 	判断元素是否选中
			let f=$(ele).find('input[type="checkbox"]').prop("checked")
			//
			if (f) {//选中
				let id= $(ele).find('.mynum').attr('data-gid')//获取选中的商品id
				//将Id放入数组中
				ids.push(id)
			}
		})
		// 判断
		if (ids.length==0){
			alert("请选择要结算的商品")
		}else{
		// 	将ids转换为数组的格式
			ids=ids.join(",")
			// 跳转订单页面
			location.href='/cart/toOrder?ids='+ids

		}
	})

        我们传递的过来的购物车id首先要到缓存中去获取其商品id,再用商品id进行从数据库获取商品信息进行传输,因此我们在Redis的相关接口红编写一个方法根据id的数组获取

        在控制层编写对应的请求方法,有一点要注意因为我们前端传递过来的是字符串id,我们要对其进行截取并且将其转成集合的形式方便我们后续的传参。 

         最后是我们运行代码进行效果测试

        这样我们从购物车进行结算的商品成功绑定在其的页面上了。 

 2. 点击去支付生成订单

        首先我们新建一个Order.js用于编写前端的一些点击事件以及一些获取页面的参数传递到后台

 order.js

//设置点击去支付的点击事件
$(".pay").click(function (){
//   接下来获取的请求参数
//     获取到收货地址的元素框
    let el= $(".addres").find(".on");

    let person= el.find(".tit .fl").text();//收货人
    let address=el.find(".addCon p:first-child").text()//收货地址
    let telephone=el.find(".addCon p:first-child").text()//电话号码
    let pay=$(".way .on").attr('value');//获取支付方式
    let mail=$(".dis .on").text();//获取快递方式
    let ids= $(this).attr('data-ids')//获取购物车传递来的商品id
//     将参数打成一个对象
    let order={
        person,address,telephone,pay,mail,ids
    }
    $.post('/order/add',order,resp=>{
        if(resp.code===200){
            alert("添加订单成功,待支付!!!");
        }
    })

    console.log(order)


})

        当然在前面的按钮元素标签上携带商品id字符串参数,并且我还将默认地址字段的标签去除了否则会干扰我们的参数获取,当然不去除亦可以,自己更改参数的获取方式

        在后端编对应的接口方法 ,参数接受类以及请求方法

 OrderVo.java
package com.yx.yxshop.vo;

import com.yx.yxshop.pojo.Order;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**
 * com.yx.yxshop.vo
 *
 * @author 君易--鑨
 * @site www.yangxin.com
 * @company 木易
 * @create 2024/1/3
 * 订单接受参数类
 */
@Data//get/set
@AllArgsConstructor//有参
@NoArgsConstructor//无参
public class OrderVo extends Order implements Serializable {

//    商品id字符串
    private String ids;

}

         记得将Order实体中的时间类型改为Date类型

         我们在Redis的接口类以及接口实现类编写了一个方法用于当我们点击去支付后,在缓存中去除购物车中对应的商品信息。

 

        最后我们在编写我们的请求方法 

 OrderController.java
package com.yx.yxshop.controller;

import com.github.yitter.idgen.YitIdHelper;
import com.yx.yxshop.pojo.Goods;
import com.yx.yxshop.pojo.Order;
import com.yx.yxshop.pojo.OrderItem;
import com.yx.yxshop.pojo.User;
import com.yx.yxshop.resp.JsonResponseBody;
import com.yx.yxshop.service.IGoodsService;
import com.yx.yxshop.service.IOrderItemService;
import com.yx.yxshop.service.IOrderService;
import com.yx.yxshop.service.IRedisService;
import com.yx.yxshop.vo.CartVo;
import com.yx.yxshop.vo.OrderVo;
import org.checkerframework.checker.units.qual.A;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Objects;
import java.util.stream.Collectors;

/**
 * <p>
 * 订单信息表 前端控制器
 * </p>
 *
 * @author yangxin
 * @since 2023-12-27
 */
@RestController
@RequestMapping("/order")
public class OrderController {

//    引入对应接口
    @Autowired
    private IRedisService redisService;
    @Autowired
    private IGoodsService goodsService;
    @Autowired
    private IOrderItemService orderItemService;
    @Autowired
    private IOrderService orderService;

    /**
     * 跳转订单的请求方法
     * @return
     */
    @RequestMapping("/add")
    public JsonResponseBody<?> toOrder(User user, OrderVo orderVo){
//        获取购物车商品id字符串
        String ids = orderVo.getIds();
//        从缓存中获取购物车商品信息   此时只有id和数量
        List<CartVo> cartitems = redisService.loadCart(user, ids);
        //        从数据库中获取商品信息
        //        获取到所选中商品的Id集合
        List<Long> gds = cartitems.stream().map(CartVo::getGid).collect(Collectors.toList());
//      根据集合查询对应的商品信息
        List<Goods> goods = goodsService.listByIds(gds);
//      遍历结合赋值给对应的选项
        for (Goods g : goods) {
//            根据商品Id查询对应的购物车选项
            CartVo cartVo = cartitems.stream().filter(v -> Objects.equals(v.getGid(), g.getGid()))
                    .findFirst()
                    .get();
//            商品g的属性赋值给vo
            BeanUtils.copyProperties(g,cartVo);
        }
//          使用雪花id生成订单id
        long oid = YitIdHelper.nextId();//订单id
//        定义一个变量计算总价
        BigDecimal total = new BigDecimal("0");
//        增加订单项
//        实例化一个集合
        List<OrderItem> orderItems = new ArrayList<>();//用户后续插入数据
//        遍历商品信息集合
        for (CartVo item : cartitems) {
//            生成订单项
//            实例化一个订单项
            OrderItem orderItem = new OrderItem();
//              赋值属性
            BeanUtils.copyProperties(item,orderItem);
//            订单项的订单商品数量
            orderItem.setQuantity(item.getNum());
            orderItem.setOoid(YitIdHelper.nextId());//订单项id
            orderItem.setOid(oid);//订单id
//            订单对象存放到订单集合中
//              减少请求生成
            orderItems.add(orderItem);
//            计算总价
            total = total.add(item.sumprice());

        }
//        向数据库中批量插入数据
        orderItemService.saveBatch(orderItems,5);//分批插入防止数据量过多
//        增加订单
//        实例化订单对象
        Order order = new Order();
//        设置订单属性
        BeanUtils.copyProperties(orderVo,order);
//      设置总价
        order.setTotal(total);
//        设置用户id
        order.setUserId(user.getId());
//        设置订单状态  默认0
        order.setStatus(0);
//      设置创建时间
        order.setCreateDate(new Date());
//      将订单插入数据库
        orderService.save(order);
//        删除缓存中购物车对应的商品
        redisService.removeCart(user,orderVo.getIds());
        return JsonResponseBody.success();
    }


}

3. 代码测试

         数据库对应的表也生成了数据

 🎉🎉本期的博客分享到此结束🎉🎉

📚📚各位老铁慢慢消化📚📚

🎯🎯下期博客博主会带来新货🎯🎯

🎁三连加关注,阅读不迷路 !🎁

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1354987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu无网络解决办法

1.进入root并输入密码 sudo su 2.更新NetworkManager的配置 用vim打开NetworkManager.conf vim /etc/NetworkManager/NetworkManager.conf 将第五行 managedFalse 改为 managedTrue 。 如果本身就是True就不用改了。 3.删除NetworkManager配置 service NetworkManager st…

Application layer

title: 应用层 date: 2023-12-20 21:03:48 tags: 知识总结 categories: 计算机网络 应用层&#xff1a;负责最直观的应用请求的封装、发起 一、域名系统DNS 连接在互联网上的主机不仅有IP地址&#xff0c;还有便于用户记忆的主机名字。域名系统DNS能够把互联网上的主机的名字…

看完这篇 教你玩转镜像转换神器qumu实现虚拟机做题自由!

前言&#xff1a; 最近有小伙伴说比赛没设备&#xff0c;问有没有不需要设备也能实现做题自由的方法&#xff0c;今天这里分享一期&#xff01; 看完这篇你将学会 使用qumu转换镜像格式 一般我们做题都是img格式的环境 需要导入设备&#xff0c;有些小伙伴没有设备 就可以使用…

擎创动态 | 某城商行案例入选信通院 GOLF+年度明星解决方案

2023年12月15日&#xff0c;“2023GOLF IT新治理领导力论坛”在京召开&#xff0c;该论坛由中国信息通信研究院、中国通信标准化协会主办。在此次论坛中&#xff0c;主办方正式发布了XOps领域年度评选结果。擎创科技“一体化智能根因定位解决方案”凭借优秀的落地实践成果&…

Navicat 技术干货 | 如何查看关系型数据库(MySQL、PostgreSQL、SQL Server、 Oracle)查询的运行时间

在数据库优化中&#xff0c;理解和监控查询运行时间是至关重要的。无论你是数据库管理员、开发人员或是参与性能调优的人员&#xff0c;知道如何查看查询运行时间能为你的数据库操作提供有价值的参考。本文中&#xff0c;我们将探索几款热门的关系数据库&#xff08;如 MySQL、…

门店总数超9000家,手握大众茶饮“下沉市场牌”的古茗冲刺上市

奶茶品牌上市潮来袭。1月2日&#xff0c;奶茶品牌古茗控股有限公司&#xff08;下称“古茗”&#xff09;、蜜雪冰城股份有限公司&#xff08;下称“蜜雪冰城”&#xff09;一同递交招股书&#xff0c;计划在港交所主板上市。 近年来&#xff0c;随着现制茶饮的爆火&#xff0…

vue-amap区域显示,3d棱柱效果

文章目录 一、在vue项目中安装和基本使用1. 安装2. 在vue项目中使用1. 在main.js中引入2. demo显示高德地图 二、显示区域三、只显示某个区域四、3D棱柱区域五、添加卫星图层 vue-amap中文文档&#xff1a; https://www.wenjiangs.com/doc/mdxkhhtr 一、在vue项目中安装和基本…

30道Nginx面试题含答案(很全)

1. 什么是Nginx&#xff1f; Nginx是一个 轻量级/高性能的反向代理Web服务器&#xff0c;他实现非常高效的反向代理、负载平衡&#xff0c;他可以处理2-3万并发连接数&#xff0c;官方监测能支持5万并发。 2. 为什么要用Nginx&#xff1f; 跨平台、配置简单、方向代理、高并…

nVisual如何实现数据中心资产管理

背景 随着信息技术的迅速发展&#xff0c;数据中心已经成为了企业信息化建设的重要基础设施之一。数据中心不仅承载着大量的企业数据和业务应用&#xff0c;而且也需要大量的资产投入来支持其运营和发展。 因此&#xff0c;数据中心资产管理的重要性也日益凸显&#xff0c;数…

单电阻落地扇电机驱动 DEMO 方案

SYNWIT DEMO方案 低压 PMSM 电机&#xff0c;软件上采用SVPWM空间电压矢量调制技术&#xff0c;直接闭环启动&#xff0c;相比传统方波效率提高15%&#xff0c;具有更小的谐波分量及转矩脉动&#xff0c;同时采用32位MCU芯片SWM201G6S7 SSOP28 封装为主控&#xff0c;为驱动算…

thinkadmin安装步骤

一,先cmd运行安装命令 ### 创建项目&#xff08; 需要在英文目录下面执行 &#xff09; composer create-project zoujingli/thinkadmin二,在confing中的database.php配置数据库 三,将仓库的data复制到app目录下 https://gitee.com/zoujingli/think-plugs-data 四,在cmd运…

ssm基于BS的仓库在线管理系统的设计与实现论文

摘 要 如今的时代&#xff0c;是有史以来最好的时代&#xff0c;随着计算机的发展到现在的移动终端的发展&#xff0c;国内目前信息技术已经在世界上遥遥领先&#xff0c;让人们感觉到处于信息大爆炸的社会。信息时代的信息处理肯定不能用之前的手工处理这样的解决方法&#x…

实验笔记之——下载数据到服务器

开发过程中经常需要把数据传到服务器上&#xff0c;太麻烦了&#xff0c;为此本博文记录采用百度云来传输数据 百度云 使用bypy包。 安装&#xff1a;pip install bypy 配置bypy连接百度网盘&#xff1a; 终端输入bypy info将命令行提示的链接复制到浏览器&#xff0c;并复制…

【webstorm中通过附加方式打开一个项目,这个项目本身有git,但是却看不到git的解决方法】

1、如图所示 设置-》版本控制-》未注册的根&#xff0c;选中后&#xff0c;再点加号&#xff0c;就可以了 2、如图所示 版本控制-》直接点加号-》选中项目路径&#xff0c;vcs选择git&#xff0c;点击确定就可以了

Hadoop之MapReduce 详细教程

MapReduce仅作了解&#xff0c;生产上很少使用该计算程序 1、MapReduce介绍 MapReduce 思想在生活中处处可见。或多或少都曾接触过这种思想。MapReduce的思想核心是“分而治之”&#xff0c;适用于大量复杂的任务处理场景&#xff08;大规模数据处理场景&#xff09;。即使是…

西电期末1018.logistic方程

一.题目 二.分析与思路 根据题目递归即可&#xff0c;用while函数判断是否到达1000项&#xff0c;内部用abs函数&#xff08;绝对值函数&#xff09;判断是否收敛&#xff0c;最后按照结果输出即可。 三.代码实现 #include<bits/stdc.h>//万能头 int main() {double …

Bean如何诞生与消亡:生命周期探秘【beans 二】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Bean如何诞生与消亡&#xff1a;生命周期探秘【beans 二】 前言bean的创建过程bean的初始化阶段1. 实现InitializingBean接口&#xff1a;2. 使用PostConstruct注解&#xff1a; bean的属性注入1. Set…

基于ssm的《数据库系统原理》课程平台的设计与实现论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

RA4803SA (高稳定实时时钟模块)

汽车用RA4803SA&#xff0c;高稳定串行接口实时时钟模块内置频率可调32.768kHz晶体单元和DTCXO。1/100秒分辨率时间寄存器接口类型4线串行接口界面电压范围1.6V ~ 5.5V温度补偿电压范围2.2V至5.5V时钟电源电压范围1.6V ~ 5.5V可选时钟输出(32.768kHz, 1024Hz, 1Hz)各种功能包括…

深入浅出Prometheus架构原理

目录 1 Prometheus简介 2 Prometheus 的优势 2.1 Prometheus 适用于什么场景 2.2 Prometheus 不适合什么场景 3 Prometheus 的架构 4 Prometheus 的组件 4.1 组件介绍 4.1.1 Prometheus Server 4.1.2 Exporter 4.1.3 Push Gateway 4.1.4 Grafana 4.1.5 Alert…