07-Springboot电脑网上商城项目-热销商品、加入购物车、显示购物车
2024-06-23 01:33:02
十三、热销商品和商品详情
热销商品
1 实体类
@Data
public class Product extends BaseEntity{private Integer id;private Integer categoryId;private String itemType;private String title;private String sellPoint;private Long price;private Integer num;private String image;private Integer status;private Integer priority;
}
2 持久层
规划SQL语句
select * from t_product where status=1 order by priority DESC limit 0,4设计接口和抽象方法
List<Product> getProduct();编写xml映射语句
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!--namespaces属性 用于指定当前映射文件与哪一个mapper接口进行映射，需要指定包完整路径--> <mapper namespace="com.cy.store.mapper.ProductMapper"><resultMap id="product" type="com.cy.store.entity.Product"><id column="id" property="id"/><result column="category_id" property="categoryId"></result><result column="item_type" property="itemType"></result><result column="sell_point" property="sellPoint"></result><result column="created_user" property="createdUser"></result><result column="created_time" property="createdTime"></result><result column="modified_user" property="modifiedUser"></result><result column="modified_time" property="modifiedTime"></result></resultMap><select id="getProduct" resultMap="product">select * from t_product where status=1 order by priority DESC limit 0,4</select> </mapper>
3 业务层
设计接口和抽象方法
List<Product> getProduct();实现接口和抽象方法
@Service public class ProductServiceImpl implements IProductService {@Autowiredprivate ProductMapper productMapper;@Overridepublic List<Product> getProduct() {List<Product> product = productMapper.getProduct();for (Product product1 : product) {product1.setPriority(null);product1.setCreatedTime(null);product1.setCreatedUser(null);product1.setModifiedTime(null);product1.setModifiedUser(null);}return product;} }
4 控制层
设计请求
/products/hot_list psot JsonResult<List<Product>>实现请求
@RestController @RequestMapping("products") public class ProductController extends BaseController{@Autowiredprivate IProductService productService;@RequestMapping("hot_list")public JsonResult<List<Product>> getProduct(){List<Product> product = productService.getProduct();return new JsonResult<List<Product>>(OK,product);} }
5 前端页面
<script type="text/javascript">$(document).ready(function () {showHotList();
});
function showHotList(){//清除列表$("#hot-list").empty();$.ajax({url: "/products/hot_list",type: "GET",dataType: "JSON",success: function (json) {if (json.state == 200){let list = json.data;console.log("count="+list.length);for (let i = 0;i < list.length;i++){console.log(list[i].title);let html ='<div class="col-md-12">' +'<div class="col-md-7 text-row-2"><a href="product.html?id=#{id}">#{title}</a></div>' +'<div class="col-md-2">¥#{price}</div>\n' +'<div class="col-md-3"><img src="..#{image}collect.png" class="img-responsive" /></div>' +'</div>';html = html.replace(/#{id}/g,list[i].id);html = html.replace(/#{title}/g,list[i].title);html = html.replace(/#{price}/g,list[i].price);html = html.replace(/#{image}/g,list[i].image);$("#hot-list").append(html);}}},});
}
</script>
商品详情
1 持久层
规划SQL语句
select * from t_product where id=#{id}设计接口和抽象方法
Product findProduct(Integer id);实现接口和抽象方法
<select id="findProduct" resultMap="product">select * from t_product where id=#{id} </select>
2 业务层
设计接口和抽象方法
Product findProduct(Integer id);实现接口和抽象方法
@Overridepublic Product findProduct(Integer id) {Product product = productMapper.findProduct(id);return product;}
3 控制层
异常规划：商品信息不存在ProductNotFoundException
设计请求
/products/{id}/details Integer id GET JsonResult<Product>实现请求
@GetMapping("{id}/details") public JsonResult<Product> findProduct(@PathVariable("id") Integer id){Product product = productService.findProduct(id);return new JsonResult<Product>(OK,product); }
4 前端页面
<script type="text/javascript">let id = $.getUrlParam("id");
console.log("id="+id);
$(document).ready(function () {$.ajax({url: "/products/"+ id +"/details",type: "GET",dataType: "JSON",success: function (json) {if (json.state == 200){console.log("title="+json.data.title);$("#product-title").html(json.data.title);$("#product-sell-point").html(json.data.sellPoint);$("#product-price").html(json.data.price);for (let i = 1; i <= 5; i++) {$("#product-image-"+i+"-big").attr("src",".."+json.data.image+i+"_big.png");$("#product-image-"+i).attr("src",".."+json.data.image+i+".ipg");}}else if (json.state == 4003){location.href="index.html";}else{alert("获取信息失败："+json.message);}},});
});
</script>
十四、加入购物车
1 创建表
CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '购物车数据id',uid INT NOT NULL COMMENT '用户id',pid INT NOT NULL COMMENT '商品id',price BIGINT COMMENT '加入时商品单价',num INT COMMENT '商品数量',created_user VARCHAR(20) COMMENT '创建人',created_time DATETIME COMMENT '创建时间',modified_user VARCHAR(20) COMMENT '修改人',modified_time DATETIME COMMENT '修改时间',PRIMARY KEY (cid)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2 创建实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Cart extends BaseEntity{private Integer cid;private Integer uid;private Integer pid;private Long price;private Integer num;
}
3 持久层
规划SQL语句
//插入加入购物车的数据 insert into t_cart (uid,pid,price,num,created_user,created_time,modified_user,modified_time) values(#{uid},#{pid},#{price},#{num},#{modifiedUser},#{modifiedTime},#{modifiedUser},#{modifiedTime}) //重复加入购物车更新num update t_cart set num=#{num},modified_user=#{modifiedUser},modified_time=#{modifiedTime} where cid=#{cid} //加入购物车和更新num时判断数据是否存在 select * from t_cart where uid=#{uid} and pid=#{pid}设计接口和抽象方法
public interface CartMapper {/*** 加入购物车* @param cart* @return*/Integer insertCart(Cart cart);/*** 跟新购物车商品数量* @param cid 狗去除数据id* @param modifiedUser 更新者* @param modifiedTime 更新时间* @param num 数量* @return*/Integer updateCart(@Param("cid") Integer cid, @Param("num") Integer num,@Param("modifiedUser") String modifiedUser,@Param("modifiedTime") Date modifiedTime);/*** 加入购物车和更新num时判断数据是否存在* @param uid 用户id* @param pid 购物车商品id* @return 返回获取的结果*/Cart findCart(@Param("uid") Integer uid,@Param("pid") Integer pid); }编写映射文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!--namespaces属性 用于指定当前映射文件与哪一个mapper接口进行映射，需要指定包完整路径--> <mapper namespace="com.cy.store.mapper.CartMapper"><resultMap id="cart" type="com.cy.store.entity.Cart"><id column="cid" property="cid"/><result column="created_user" property="createdUser"></result><result column="created_time" property="createdTime"></result><result column="modified_user" property="modifiedUser"></result><result column="modified_time" property="modifiedTime"></result></resultMap><insert id="insertCart">insert into t_cart (uid,pid,price,num,created_user,created_time,modified_user,modified_time)values(#{uid},#{pid},#{price},#{num},#{modifiedUser},#{modifiedTime},#{modifiedUser},#{modifiedTime})</insert><update id="updateCart">update t_cart set num=#{num},modified_user=#{modifiedUser},modified_time=#{modifiedTime}where cid=#{cid}</update><select id="findCart" resultMap="cart">select * from t_cart where uid=#{uid} and pid=#{pid}</select> </mapper>
4 业务层
异常规划：加入购物车异常，更新数量异常
设计接口和抽象方法
public interface ICartService {/*** 加入购物车* @param uid 用户id* @param pid 商品id* @param amount 加入购物车数量* @param username 用户名*/void addCart(Integer uid,Integer pid,Integer amount,String username); }实现接口和抽象方法
@Service public class CartServiceImpl implements ICartService {@Autowiredprivate CartMapper cartMapper;@Autowiredprivate ProductMapper productMapper;@Overridepublic void addCart(Integer uid, Integer pid, Integer amount, String username) {Cart findCart = cartMapper.findCart(uid, pid);Date date = new Date();if (findCart == null){Cart cart = new Cart();cart.setUid(uid);cart.setPid(pid);Product product = productMapper.findProduct(pid);cart.setPrice(product.getPrice());cart.setNum(amount);cart.setCreatedUser(username);cart.setCreatedTime(date);Integer integer = cartMapper.insertCart(cart);if (integer!=1){throw new InsertException("加入购物车异常");}}else {Integer num = findCart.getNum()+amount;Integer integer = cartMapper.updateCart(findCart.getCid(), num, username, date);if (integer!=1){throw new UpdateException("更新购物车时异常");}}} }
5 控制层
设计请求
/carts/add_to_cart GET pid amount session JsonResult<Void>实现请求
@RestController @RequestMapping("carts") public class CartController extends BaseController{@Autowiredprivate ICartService cartService;@RequestMapping("add_to_cart")public JsonResult<Void> addCart(Integer pid, Integer amount, HttpSession session){cartService.addCart(getUidFromSession(session),pid,amount,getUsernameFromSession(session));return new JsonResult<>(OK);} }
6 前端页面
//在product.html中
$("#btn-add-to-cart").click(function () {$.ajax({url: "/carts/add_to_cart",type: "POST",data: {"pid":id,"amount":$("#num").val()},dataType: "JSON",success: function (json) {if (json.state == 200){alert("加入购物车成功");}else {alert("加入购物车失败")}},error: function (xhr) {alert("加入购物车时发生未知异常："+xhr.status)}});
});
十五、显示购物车
1 持久层
规划SQL语句
select cid,uid,pid,t_cart.price,t_cart.num,t_product.title,t_product.image,t_product.price as realPrice from t_cart left join t_product on t_cart.pid=t_product.id where Uid=#{uid} order by t_cart.craeted_time desc设计接口和抽象方法
List<CartVO> findVO(Integer uid);编写映射文件
<select id="findVO" resultType="com.cy.store.vo.CartVO">selectcid,uid,pid,t_cart.price,t_cart.num,t_product.title,t_product.image,t_product.price as realPricefromt_cart left join t_product on t_cart.pid=t_product.idwhereUid=#{uid}order byt_cart.created_time desc</select>
2 业务层
设计接口和抽象方法
List<CartVO> findCartVO9(Integer uid);实现接口和抽象方法
@Override public List<CartVO> findCartVO9(Integer uid) {List<CartVO> vo = cartMapper.findVO(uid);return vo; }
3 控制层
设计请求
/carts/ session get JsonResoult<List<CartVO>>实现请求
@RequestMapping({"","/"}) public JsonResult<List<CartVO>> findVO(HttpSession session){List<CartVO> cartVO = cartService.findCartVO(getUidFromSession(session));return new JsonResult<>(OK,cartVO); }
4 前端页面
<script type="text/javascript">$(document).ready(function () {showCart();
});
function showCart(){$("#cart-list").empty();$.ajax({url: "/carts/",type: "GET",dataType: "JSON",success: function (json) {let list = json.data;for (let i = 0; i < list.length; i++) {let tr = '<tr>\n' +'<td>\n' +'<input name="cids" value="#{cid}" type="checkbox" class="ckitem" />\n' +'</td>\n' +'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +'<td>#{title}#{msg}</td>\n' +'<td>¥<span id="goodsPrice#{cid}">#{singlePrice}</span></td>\n' +'<td>\n' +'<input id="price-#{cid}" type="button" value="-" class="num-btn" onclick="reduceNum(1)" />\n' +'<input id="goodsCount#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">\n' +'<input id="price+#{cid}" class="num-btn" type="button" value="+" onclick="addNum(1)" />\n' +'</td>\n' +'<td><span id="goodsCast#{cid}">#{totalPrice}</span></td>\n' +'<td>\n' +'<input type="button" onclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="删除" />\n' +'</td>\n' +'</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(/#{num}/g,list[i].num);tr = tr.replace(/#{msg}/g,list[i].realPrice);tr = tr.replace(/#{singlePrice}/g,list[i].price);tr = tr.replace(/#{totalPrice}/g,list[i].price*list[i].num);$("#cart-list").append(tr);}},error: function (xhr) {alert("显示购物车时发生异常："+xhr.status)}});
}/*$(function() {//返回链接$(".link-account").click(function() {location.href = "orderConfirm.html";})})*/
</script>
07-Springboot电脑网上商城项目-热销商品、加入购物车、显示购物车相关推荐
- java基于springboot的网上商城购物系统
项目介绍 随着社会的快速发展,计算机的影响是全面且深入的.人们生活水平的不断提高,日常生活中人们对网上商城购物系统方面的要求也在不断提高,购物的人数更是不断增加,使得网上商城购物系统的开发成为必需而且 ...
- 基于springboot mybatis网上商城系统源码和论文
伴随着互联网技术的进步,各种电商平台也如雨后 春笋不断涌现.一个好的电商平台应该具有用户体验度高,用户信息安全等特点, 从而可以满足更多的用户需求.现有的电商平台虽然在不断完善,但仍然存在着 不少问题 ...
- Django框架学习之网上商城项目一（后端设计）
目录 一.项目需求分析 1.项目介绍 1.技术难点 2.系统功能 3.项目环境 4.后台管理页面 二.数据库模型设计 一.准备工作 二.用户认证数据库模型设计 1. app/users/models. ...
- 【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示
转自:https://blog.csdn.net/eson_15/article/details/51405911 网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要 ...
- 网上商城—管理员修改商品
管理员修改商品(图书.服装.电器.零食) 先上本人的项目相应图片: (与网上商城-管理员增加商品http://blog.csdn.net/lmb55/article/details/45288321 ...
- 网上商城—管理员删除商品
管理员删除商品(图书.服装.电器.零食) [要删除商品时只需要给出相应商品的ID(主键)即可] 先上本人的项目相应图片: 功能描述: 当以管理员的身份登录时,页面跳转到相应的管理商铺(shopkeep ...
- SpringBoot+MyBatis 天猫商城项目，超级漂亮【附源码】
大家好,我是小咖秀! 帮粉丝找了一个基于SpringBoot的天猫商城项目,快速部署运行,所用技术:MySQL,Druid,Log4j2,Maven,Echarts,Bootstrap ... 免费给 ...
- 商城项目中信息的集合怎么存储_网上商城项目_数据库设计说明书.doc
秘密 第 PAGE 2 页 共 NUMPAGES 10 页 信用卡网上商城项目 数据库设计说明书 文件修订历史 修订时间 修订说明 作者 审核 2010.08.05 编写数据字典 谭星佑 曾玉贞 20 ...
- 十七、网上商城项目（1）
本章概要 脚手架项目搭建 安装与配置 axios 首页 页面头部组件 头部搜索框组件 头部购物车组件 头部组件 本章结合前面所学知识,开发一个网上商城项目. 成品如下 17.1 脚手架项目搭建 选择好 ...
最新文章
- Android 活动与活动间数据传递
- 怎么使用html及jsp开发,jsp怎么用css
- java 命名代码检查-注解处理器
- 【以太坊】Ethereum交易过程及ethereumjs-tx的应用
- AE开发使用内存图层
- linux无线网卡的安装
- mysql select db 废弃_php 项目放服务器显示mysql_connect 已经废弃 ？
- MongoDB服务重启及后台运行解决方法
- php中configuration,php configuration
- 工信部副部长怀进鹏：信息产业呈现四大发展特点
- 地产IT人福利：帆软地产BI解决方案全解析
- leetcode字符串练习--整数反转
- Springboot thymeleaf i18n国际化多语言选择
- API章节--第四节包装类总结
- UE4官方文档阅读笔记——蓝图可视化编程
- py爬虫pandas
- UnicodeDecodeError: 'shift_jis' codec can't decode byte 0x93 in position 4: illegal multibyte sequen
- 【youcans 的 OpenCV 例程200篇】176.图像分割之均值漂移算法 Mean Shift
- FIR内插滤波器结构与代码实现
- 2019软件测试都学习什么？