SpringBoot项目--电脑商城【确认订单】

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

1.持久层[Mapper]

SpringBoot项目--电脑商城【确认订单】,mybatis,数据库,spring boot,spring

SpringBoot项目--电脑商城【确认订单】,mybatis,数据库,spring boot,spring

1.1规划需要执行的SQL语句

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

所以在持久层需要完成“根据若干个不确定的id值,查询购物车数据表,显示购物车中的数据信息”。则需要执行的SQL语句大致是。

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

注意where cid in (?,?,?),这里是需要传入cid的集合

1.2 设计接口和抽象方法

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

List<CartVO> findVOByCids(Integer[] cids);

1.3配置映射

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

<select id="findVOByCids" resultType="com.cy.store.vo.CartVO">
    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 (
            <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.4 单元测试

@Test
public void findVOByCids() {
    Integer[] cids = {1, 2, 6, 8, 100};//可以写表中不存在的,无非就是查不到数据,并不会报错
    List<CartVO> list = cartMapper.findVOByCids(cids);
    for (CartVO item : list) {
        System.out.println(item);
    }
}

2.业务层[Service]

2.1规划异常

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

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

1.在ICartService接口中添加getVOByCids()抽象方法

List<CartVO> getVOByCids(Integer uid, Integer[] cids);//uid是为了判断数据归属是否正确

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

@Override
public List<CartVO> getVOByCids(Integer uid, Integer[] cids) {
    List<CartVO> list = cartMapper.findVOByCids(cids);

    //可以使用for遍历,这里玩个新的,用迭代器遍历
    Iterator<CartVO> it = list.iterator();
    while (it.hasNext()) {

        //指向的是该元素之前,所以需要next得到该元素
        CartVO cart = it.next();

        if (!cart.getUid().equals(uid)) {
            /**
             * 不能用list.remove(cart)
             * 在迭代器进行遍历的时候不能使用集合的移除
             * 方法,需要用迭代器特有的移除方法
             */
            it.remove();
        }
    }
    return list;
}

2.3单元测试

业务层只是调用持久层获取数据并判断归属是否正确,这里不再测试

3.控制层[Controller]

3.1处理异常

业务层没有抛出异常,所以不需要处理异常

3.2设计请求

  • /carts/list
  • GET
  • Integer[] cids, HttpSession session
  • JsonResult<List<CartVO>>

3.3处理请求

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

@RequestMapping("list")
public JsonResult<List<CartVO>> findVOByCids(Integer[] cids, HttpSession session) {
    List<CartVO> data = cartService.getVOByCids(getUidFromSession(session), cids);
    return new JsonResult<>(OK, data);
}

4.确定订单--前端页面

4.1显示勾选的购物车数据

1.检查cart.html页面,里面form标签的action="orderConfirm.html"属性(规定表单数据提交到哪里)和结算按钮的类型"type=submit"是必不可少的,这样点击"结算"时才能将数据传给"确认订单页"并在"确认订单页"展示选中的商品数据

2.在orderConfirm.html页面中实现自动加载从cart.html页面中传递过来的cids数据,再去请求ajax,然后将后端返回的数据填充在页面的某个区域中

3.orderConfirm.js文件中

  • $(“.link-pay”).click(……)作用:点击"在线支付"后跳转到支付页面,这个其实就是下个模块要做的"创建订单"功能,该功能需要和数据库交互,所以不是在前端实现的,所以这行代码无用
  • $(“.link-success”).click(…):在orderConfirm.html页面没有class为link-success的标签,所以这行代码不会被执行
  • 综上两条,orderConfirm.js文件在orderConfirm.html页面中无用,但存在可能会和下个模块"创建订单"功能冲突(下个模块会实现点击"创建订单"后页面跳转),所以注释掉

下面在orderConfirm.html页面编写js代码

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


		function showCartList() {
			$("#cart-list").empty();
			/*
            * location.search.substr:是获取url中的数据
            * 1:表示查找?之前
            * 0:表示查找?之后【请求参数】
            *
            * 	这里要传data是因为后端接口需要传入参数,所以这里才要写
            * */
			$.ajax({
				url: "/cart/list",
				data: location.search.substr(1),
				type: "GET",
				dataType: "JSON",
				success: function(json) {
					let list = json.data;
					console.log("count=" + list.length);
					let allCount = 0;
					let allPrice = 0;
					for (let i = 0; i < list.length; i++) {
						console.log(list[i].title);
						let tr = '<tr>'
								+ '<td><img src="..#{image}collect.png" class="img-responsive" /></td>'
								+ '<td><input type="hidden" name="cid" value="#{cid}" />#{title}</td>'
								+ '<td>¥<span>#{realPrice}</span></td>'
								+ '<td>#{num}</td>'
								+ '<td>¥<span>#{totalPrice}</span></td>'
								+ '</tr>';

						tr = tr.replace(/#{cid}/g, list[i].cid);
						tr = tr.replace(/#{image}/g, list[i].image);
						tr = tr.replace(/#{title}/g, list[i].title);
						tr = tr.replace(/#{realPrice}/g, list[i].realPrice);
						tr = tr.replace(/#{num}/g, list[i].num);
						tr = tr.replace(/#{totalPrice}/g, 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() {
					alert("购物车数据加载未知异常 + 原因:" + xhr.status);
				}
			});
		}
	</script>

1.为什么点击购物车列表页面的"结算"按钮后地址栏中会请求http://localhost:8080/web/orderConfirm.html?cids=6&cids=5呢,因为该按钮有一个type=submit属性,且表单有一个action="orderConfirm.html"属性,所以点击该按钮后会携带表单中参数自动跳转

会携带哪些参数呢:把表单中有name属性的标签的value值传递出去,针对这个请求传递的是name"cids",其value值根据勾选的商品而定,可以是1或3或10

2.data: location.search.substr(1)这个API的参数为0表示截取地址栏中?后面的数据,即参数

如果这个API的参数为0则表示截取地址栏中?前面的数据,即请求地址

4.2显示选择收货地址

SpringBoot项目--电脑商城【确认订单】,mybatis,数据库,spring boot,spring

SpringBoot项目--电脑商城【确认订单】,mybatis,数据库,spring boot,spring

收货地址存放在前端的一个select下拉列表中,我们需要将查询到的当前登录用户的收货地址动态的加载到这个下拉列表中.从数据库的角度看,是一个select查询语句,在"收货地址列表展示"模块已经编写了该持久层,业务层,控制层,所以这里只需要编写对应的前端页面就可以了

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

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

2.在orderConfirm.html页面中编写showAddressList方法文章来源地址https://www.toymoban.com/news/detail-708004.html

function showAddressList(){
			//清空select标签中的数据
			$("#address-list").empty();
			$.ajax({
				url:"/address",
				type: "GET",
				dataType:"JSON",
				success(e) {
					if(e.state==200){
						let list=e.data;
						for(let i=0;i<list.length;i++){
							/**
                                value="#{aid}"在该模块没有用,但是扔写上,只要是从数据库查到到的数据,都要让前端页
                                面的该条数据和id绑定(因为可能干别的什么时需要用到,就比如说下一个"创建订单"模块
                                就需要根据前端传给后端的aid查询用户选中的是哪一个地址然后将其加入订单表)
                     * */
							let opt='<option value="#{aid}">#{name}&nbsp;&nbsp;&nbsp;#{tag}&nbsp;&nbsp;&nbsp;#{provinceName}#{cityName}#{areaName}#{address}' +
									'&nbsp;&nbsp;&nbsp;#{phone}</option>\n';
							opt = opt.replace(/#{aid}/g, list[i].aid);
							opt = opt.replace(/#{tag}/g, list[i].tag);
							opt = opt.replace("#{name}", list[i].name);
							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("#{phone}", list[i].phone);

							$("#address-list").append(opt)

						}
					}
				},
				error: function(xhr) {
					alert("您的登录信息已经过期,请重新登录!HTTP响应码:" + xhr.status);
					location.href = "login.html";
				}
			})
		}

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

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

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

相关文章

  • SpringBoot项目--电脑商城【新增收货地址】

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

    2024年02月09日
    浏览(46)
  • 基于springboot框架的电脑商城项目(二)

    当用户输入用户名和密码将数据提交给后台数据库进行查询,如果存在对应的用户名和密码则表示登录成功,登录成功之后跳转到系统的主页就是index.html页面,跳转在前端使用jquery来完成。 1.规划sql语句 依据用户提交的用户名和密码做select查询。 2.设计接口和抽象方法 在

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

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

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

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

    2024年02月05日
    浏览(41)
  • 基于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日
    浏览(47)
  • 基于springboot框架的电脑商城项目(四)

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 在store数据库中创建t_address表 在entity包下创建实体类Address继承baseEntity类 1.规划sql 1.新增收货地址对应的是插入语句: 2.大部分平台都会规定一个用户的收货地址数量,这里规定最多20个

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

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 在store数据库中创建t_order和t_order_item数据表 在entity包下创建Order实体类并继承BaseEntity类 在com.cy.store.entity包下创建OrderItem实体类并继承BaseEntity类 1.规划sql 插入订单数据的SQL语句 插入

    2024年02月06日
    浏览(39)
  • 基于springboot框架的电脑商城项目(八)

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 1.规划sql 这里需要将商品表和购物车表进行连表查询 2.设计接口和抽象方法 在store包下创建一个vo包,在该包下面创建CartVO类,不需要继承BaseController类,那相应的就需要单独实现Serializa

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

    🎁🎁静态资源及sql文件分享 链接:https://pan.baidu.com/s/1X-yjmQcPD3PqS21x0HplNA?pwd=23gr 提取码:23gr 1.规划需要执行的SQL语句 其中order by is_default DESC是为了让默认收货地址展示在最上面,order by可以有多个子句,中间用逗号隔开,后面加的create_time DESC是为了让非默认收货地址创建的越晚

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

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

    2024年02月09日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包