基于springboot框架的电脑商城项目(九)

这篇具有很好参考价值的文章主要介绍了基于springboot框架的电脑商城项目(九)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🎁🎁静态资源及sql文件分享
链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr
提取码:23gr

显示勾选的购物车信息

(一)显示勾选的购物车信息(持久层)

1.规划sql

用户在购物车列表页中通过随机勾选相关的商品,在点击"结算"按钮后跳转到"确认订单页",在这个页面中需要展示用户在上个页面所勾选的"购物车列表页"中对应的数据.且展示的内容还是来自于购物车表,所以"购物车列表页"需要将用户勾选的商品id传递给"确认订单页"

select
    cid,
    uid,
    pid,
    t_cart.price,
    t_cart.num,
    title,
    t_product.price as realPrice,
    image
from t_cart
left join t_product on t_cart.pid = t_product.id
where
	cid in (?,?,?)
order by
	t_cart.created_time desc

2.设计接口和抽象方法

在CartMapper接口中添加findByCid2抽象方法

    List<CartVo> findByCid2(Integer[] cids);

在CartMapper.xml文件中添加SQL语句的映射配置

 <select id="findByCid2" resultType="com.cy.store.vo.CartVo">
        select cid,uid,pid,t_cart.price,t_cart.num,t_product.image,
               t_product.title,t_product.price as realPrice
        from t_cart left join t_product on t_product.id=t_cart.pid
        where cid in (
        <foreach collection="array" item="cid" separator=",">
            #{cid}
        </foreach>
            )
        order by t_cart.created_time desc

    </select>

foreach循环就是一个for循环
collection标识循环的是list集合还是数组,如果是list集合就用collection=“list”
item用来接收每次循环获取的值
separator标识循环出来的值中间用什么隔开,且最后循环出来的值后面不加

(二)显示勾选的购物车信息(业务层)

1.规划异常

查询语句,没有需要规划的异常,在业务层判断这几条购物车商品的数据归属是否正确,如果不正确也不需要抛出异常,直接从查询到的数据中移除该商品就行了

2.设计接口和抽象方法及实现

在ICartService接口中添加getByCids()抽象方法

    List<CartVo> getByCids(Integer uid,Integer[] cids);

在CartServiceImpl类中重写业务接口中的抽象方法

  @Override
    public List<CartVo> getByCids(Integer uid, Integer[] cids) {
        List<CartVo> result = cartMapper.findByCid2(cids);
        if (result==null){
            throw new CartNotFoundException("商品不存在");
        }
        Iterator<CartVo> iterator = result.iterator();
        while (iterator.hasNext()){
            CartVo cartVo = iterator.next();
            Integer uid1 = cartVo.getUid();
            if (!uid1.equals(uid)){
                result.remove(cartVo);
                throw new AccessDeniedException("数据访问异常");
            }
        }
        return result;
    }

(三)显示勾选的购物车信息(控制层)

1.处理异常

没有异常需要处理

2.设计请求

请求路径:/carts/list
请求方式:GET
请求参数:Integer[] cids, HttpSession session
响应结果:JsonResult<List< CartVO>>

3.处理请求

在CartController类中添加处理请求的findVOByCids()方法。

@GetMapping("/list")
    public JsonResult<List<CartVo>> findVOByCids(Integer[] cids,HttpSession session){
    List<CartVo> cartVoList = cartService.getByCids(getuidfromsession(session), cids);
    return new JsonResult<>(ok,cartVoList);
}

(四)显示勾选的购物车信息(前端页面)

orderConfirm.js文件在orderConfirm.html页面中无用,所有在orderConfirm.html中注释掉

<!--		<script src="../js/orderConfirm.js" type="text/javascript" charset="utf-8"></script>-->

在orderConfirm.html页面编写js代码

<script type="text/javascript">
			$(document).ready(function() {
				showCartList();
			});

			function showCartList() {
				$("#cart-list").empty();
				$.ajax({
					url: "/carts/list",
					type: "GET",
					data: location.search.substr(1),
					dataType: "JSON",
					success: function(json) {
						if (json.state == 200) {
							var list = json.data;
							console.log(location.search.substr(1));//调试用

							//声明两个变量用于更新"确认订单"页的总件数和总价
							var allCount = 0;
							var allPrice = 0;

							for (var i = 0; i < list.length; i++) {
								var tr = '<tr>\n' +
										'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +
										'<td>#{title}</td>\n' +
										'<td>¥<span>#{price}</span></td>\n' +
										'<td>#{num}</td>\n' +
										'<td><span>#{totalPrice}</span></td>\n' +
										'</tr>';
								tr = tr.replace("#{image}",list[i].image);
								tr = tr.replace("#{title}",list[i].title);
								tr = tr.replace("#{price}",list[i].realPrice);
								tr = tr.replace("#{num}",list[i].num);
								tr = tr.replace("#{totalPrice}",list[i].realPrice*list[i].num);
								$("#cart-list").append(tr);

								//更新"确认订单"页的总件数和总价
								allCount += list[i].num;
								allPrice += list[i].realPrice*list[i].num;
							}
							$("#all-count").html(allCount);
							$("#all-price").html(allPrice);
						}
					},
					error: function (xhr) {
						alert("在确认订单页加载勾选的购物车数据时发生未知的异常"+xhr.status);
					}
				});
			}
		</script>

订单显示收货地址

1.在orderConfirm.html页面中的ready函数中添加showAddressList方法的调用,使确认订单页加载时能够自动从后端获取该用户地址填充到select控件中并将第一个地址显示出来

$(document).ready(function() {
    showCartList();
    showAddressList();
});

2.在orderConfirm.html页面中编写showAddressList方法

function showAddressList() {
    $("#address-list").empty();
    $.ajax({
        url: "/addresses",
        type: "GET",
        dataType: "JSON",
        success: function(json) {
            if (json.state == 200) {
                var list = json.data;
                for (var i = 0; i < list.length; i++) {

                    /*
                                value="#{aid}"在该模块没有用,但是扔写上,只要是从数据库查到到的数据,都要让前端页
                                面的该条数据和id绑定(因为可能干别的什么时需要用到,就比如说下一个"创建订单"模块
                                就需要根据前端传给后端的aid查询用户选中的是哪一个地址然后将其加入订单表)
                     * */
                    var opt = '<option value="#{aid}">#{name}&nbsp;&nbsp;&nbsp;#{tag}&nbsp;&nbsp;&nbsp;#{provinceName}#{cityName}#{areaName}#{address}&nbsp;&nbsp;&nbsp;#{tel}</option>';
                    opt = opt.replace("#{aid}",list[i].aid);
                    opt = opt.replace("#{name}",list[i].name);
                    opt = opt.replace("#{tag}",list[i].tag);
                    opt = opt.replace("#{provinceName}",list[i].provinceName);
                    opt = opt.replace("#{cityName}",list[i].cityName);
                    opt = opt.replace("#{areaName}",list[i].areaName);
                    opt = opt.replace("#{address}",list[i].address);
                    opt = opt.replace("#{tel}",list[i].tel);

                    $("#address-list").append(opt);
                }
            }
        },
        error: function (xhr) {
            alert("在确认订单页加载用户地址时发生未知的异常"+xhr.status);
        }
    });
}

后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹
文章来源地址https://www.toymoban.com/news/detail-453585.html

到了这里,关于基于springboot框架的电脑商城项目(九)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于springboot框架的电脑商城项目(九)

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 1.规划sql 用户在购物车列表页中通过随机勾选相关的商品,在点击\\\"结算\\\"按钮后跳转到\\\"确认订单页\\\",在这个页面中需要展示用户在上个页面所勾选的\\\"购物车列表页\\\"中对应的数据.且展示

    2024年02月05日
    浏览(35)
  • 基于springboot框架的电脑商城项目(六)

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 1.规划sql 在删除之前判断该数据是否存在,需要执行查询语句看能否查到该数据,还需要根据返回的aid获取uid并和session中的uid进行比较判断归属是否正确,这一条SQL语句在设置收货地址时

    2024年02月03日
    浏览(45)
  • 基于springboot框架的电脑商城项目(七)

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 1.规划sql 根据商品id显示商品详情的SQL语句 2.设计接口和抽象方法 在ProductMapper接口中添加抽象方法 在ProductMapper.xml文件中配置findById(Integer id)方法的映射 2.规划异常 如果商品数据不存

    2024年02月05日
    浏览(41)
  • 【五一创作】基于springboot框架的电脑商城项目(三)

    1.规划sql 根据用户id修改信息的SQL语句 根据用户id查询的sql语句 2.接口与抽象方法 更新用户的信息方法的定义 在UserMapper.xml文件中进行映射编写 设计两个功能: 1.当打开页面时显示当前登录的用户的信息 2.点击修改按钮时更新用户的信息 1.异常规划 点击个人资料页面时可能找

    2024年02月04日
    浏览(49)
  • Springboot+mysql+基于VUE框架的商城综合项目设计与实现 毕业设计-附源码111612

    基于VUE框架的商城综合项目设计与实现 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外。商城综合项目是以实际运用为开发背景,运用软件工程原理和开发方法,采用

    2024年02月01日
    浏览(62)
  • SpringBoot项目--电脑商城【确认订单】

    用户在购物车列表页中通过随机勾选相关的商品,在点击\\\"结算\\\"按钮后跳转到\\\"确认订单页\\\",在这个页面中需要展示用户在上个页面所勾选的\\\"购物车列表页\\\"中对应的数据.说白了也就是列表展示,且展示的内容还是来自于购物车表.但是用户勾选了哪些商品呢,所 以\\\"购物车列表页\\\"需

    2024年02月09日
    浏览(36)
  • SpringBoot项目--电脑商城【上传头像】

    把文件存到数据库中,需要图片时访问数据库,数据库将文件解析为字节流返回,最后写到本地的某一个文件.这种方法太耗费资源和时间了 将对应的文件保存在操作系统上,然后再把这个 文件路径记录下 来,因为在记录路径的时候是非常便捷和方便的,将来如果要打开这个文件可以

    2024年02月09日
    浏览(36)
  • SpringBoot项目--电脑商城【新增收货地址】

    t_address 注意name是,所以需要用`` 在entity包下创建实体类Address继承BaseEntity类 当前收货地址功能模块: 第一个页面:列表的展示,修改,删除,设置默认 第二个页面:新增收货地址 开发顺序:新增收货地址-列表的展示-设置默认收货地址-删除收货地址-修改收货地址 1.新增收货地

    2024年02月09日
    浏览(42)
  • SpringBoot项目实战笔记:电脑商城项目实战(SpringBoot+MyBatis+MySQL)

    花了一段实现刚学完SpringBoot,做个项目练练手。教程视频来源于B站。 视频链接: 【SpringBoot项目实战完整版】SpringBoot+MyBatis+MySQL电脑商城项目实战_哔哩哔哩_bilibili 目录 一、系统概述与环境搭建 1. 系统开发及运行环境 2.项目分析 3.创建项目 4.配置并运行项目 4.1 运行项目

    2024年02月12日
    浏览(38)
  • SpringBoot项目--电脑商城【加入购物车】

    1.使用use命令先选中store数据库 2.在store数据库中创建t_cart用户数据表 在entity包下创建购物车的Cart实体类并使其继承BaseEntity 1.向购物车表中插入商品数据的SQL语句 2.如果当前商品已经在购物车存在,则直接更新商品即可 3.在插入或者更新具体执行哪个语句,取决于数据库中是否

    2024年02月09日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包