肺炎形势严峻，人心惶惶，愿祖国早日解决，社会早点稳定。
这次主要实现的功能就是商品展示以及购物车，购物车信息保存在mysql数据库中。我们先来看商品数据库层
// IProductDao package com.yang.dao; import com.yang.domain.Product; import java.util.List; public interface IProductDao { // 获取商品 List<Product> getList(); // 获取单个商品 Product getProduct(Integer id); // 增加单个商品 boolean addProduct(Product product); // 删除单个商品 boolean deleteProduct(Integer id); } // ProductDaoImpl package com.yang.dao.impl; import com.yang.dao.IProductDao; import com.yang.domain.Product; import com.yang.handler.BeanHandler; import com.yang.handler.BeanListHandler; import com.yang.util.CRUDTemplate; import org.springframework.stereotype.Repository; import java.util.List; @Repository public class ProductDaoImpl implements IProductDao { // 获取商品列表 @Override public List<Product> getList() { // 创建sql语句 String sql = "select * from product"; //执行 return CRUDTemplate.executeQuery(sql, new BeanListHandler<Product>(Product.class)); } // 获取单个商品 @Override public Product getProduct(Integer id) { // 创建sql语句 String sql = "select * from product where id = ?"; // 执行 return CRUDTemplate.executeQuery(sql, new BeanHandler<Product>(Product.class), id); } // 增加单个商品 @Override public boolean addProduct(Product product) { // 创建插入语句 String sql = "insert into product(name, price, description, pictureUrl) values(?,?,?,?)"; // 使用工具类执行插入操作，返回值为int，成功返回1，失败为0 int result = CRUDTemplate.executeUpdate(sql, product.getName(), product.getPrice(), product.getDescription(), product.getPictureUrl()); return result == 1; } // 删除某个商品 @Override public boolean deleteProduct(Integer id) { // 创建删除语句 String sql = "delete from product where id = ?"; // 根据id，删除商品 int result = CRUDTemplate.executeUpdate(sql, id); return result == 1; } }
server层不看了，东西不多，与dao层类似，直接看controller层
package com.yang.controller; import com.yang.domain.Product; import com.yang.domain.User; import com.yang.service.IProductService; import com.yang.service.IUserService; import com.yang.util.TokenUse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import java.util.List; @Controller public class ProductController { @Autowired private IProductService iProductService; @Autowired private IUserService iUserService; @RequestMapping("/product") public String productList(String token, Model model) { // 根据token获取用户id Integer userId = TokenUse.getUserID(token); User user = iUserService.get(userId); // 获取商品列表 List<Product> list = iProductService.getList(); // 向model中塞模型 model.addAttribute("productList", list); model.addAttribute("user", user); return "product"; } @RequestMapping("/detail/{id}/{userId}") public String detail(@PathVariable(value = "id") Integer id, @PathVariable(value = "userId") Integer userId, Model model) { // 查询商品详情 Product product = iProductService.getProduct(id); // 查询用户 User user = iUserService.get(userId); // 如果没有值，就返回错误页面 if (product == null | user == null) { return "error"; } // 向model中塞模型 model.addAttribute("product", product); model.addAttribute("user", user); return "detail"; } }
看一下商品展示前端页面
<%-- Created by IntelliJ IDEA. User: yangshixiong Date: 2020/1/28 Time: 上午9:48 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <title>网上商城</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="yang"> <!-- Bootstrap core CSS --> <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">杨的购物广场</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="${pageContext.request.contextPath}/">回欢迎页</a></li> <li><a href="#" id="backProduct">返回商品列表</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">购物车</a></li> <li class="dropdown"> <img src="${pageContext.request.contextPath}/${user.avatarUrl}" alt="" style=" max- 30px; display: inline-block;"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: inline-block; padding-left: 3px;">${user.username}<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="${pageContext.request.contextPath}/userinfo/${user.id}">个人信息</a></li> <li><a href="${pageContext.request.contextPath}/order/${user.id}">查看订单</a></li> <li id="logout"><a>退出</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="row" style="max- 1440px; margin: 0 auto"> <c:forEach items="${productList}" var="product"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="${pageContext.request.contextPath}/${product.pictureUrl}" alt="商品照片"> <div class="caption"> <a href="${pageContext.request.contextPath}/detail/${product.id}/${user.id}"> <h3>${product.name}</h3> <h4 style="color: orange">价格：${product.price}</h4> <p>${product.description}</p> </a> </div> </div> </div> </c:forEach> </div> <!-- Jquery --> <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.1.min.js"></script> <!-- Bootstrap --> <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script> <script type="application/javascript"> $(function () { let token = sessionStorage.getItem("token") || null; // 验证是否存在token，没有则返回登陆 if (token == null) { alert("请先登陆！"); window.location = "${pageContext.request.contextPath}/login"; return false; } document.getElementById("backProduct").href = "${pageContext.request.contextPath}/product?token=" + token; $("#logout").click(function () { sessionStorage.removeItem("token"); window.location = "${pageContext.request.contextPath}/login" }) }) </script> </body> </html>
接下来看一下购物车的相关操作
看一下dao层
// ICarDao package com.yang.dao; import com.yang.domain.Car; import java.util.List; public interface ICarDao { // 根据用户Id获取购物车内容 List<Car> getList(Integer userId); // 加入购物车 boolean addCar(Car car); // 根据Id从购物车中删除 boolean deleteCar(Integer id); // 根据productId判断是否在购物车中存在 boolean checkCar(Integer userId, Integer productId); } // CarDaoImpl package com.yang.dao.impl; import com.yang.dao.ICarDao; import com.yang.domain.Car; import com.yang.handler.BeanHandler; import com.yang.handler.BeanListHandler; import com.yang.util.CRUDTemplate; import org.springframework.stereotype.Repository; import java.util.List; @Repository public class CarDaoImpl implements ICarDao { // 查询购物车列表 @Override public List<Car> getList(Integer userId) { String sql = "select * from car where userId = ?"; return CRUDTemplate.executeQuery(sql, new BeanListHandler<>(Car.class), userId); } // 添加至购物车 @Override public boolean addCar(Car car) { String sql = "insert into car(userId, productId, price) values(?, ?, ?)"; int result = CRUDTemplate.executeUpdate(sql, car.getUserId(), car.getProductId(), car.getPrice()); return result == 1; } // 从购物车中删除 @Override public boolean deleteCar(Integer id) { String sql = "delete from car where id = ?"; int result = CRUDTemplate.executeUpdate(sql, id); return result == 1; } // 根据userId以及productId判断购物车中是否存在 @Override public boolean checkCar(Integer userId, Integer productId) { String sql = "select * from car where userId = ? and productId = ?"; Car car = CRUDTemplate.executeQuery(sql, new BeanHandler<>(Car.class), userId, productId); return car != null; } }
同样道理，不需要看server层，直接看controller层
CarController
package com.yang.controller; import com.yang.domain.Car; import com.yang.domain.Product; import com.yang.domain.User; import com.yang.service.ICarService; import com.yang.service.IProductService; import com.yang.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class CarController { @Autowired ICarService iCarService; @Autowired IUserService iUserService; @Autowired IProductService iProductService; // 添加购物车信息，提前检测，如果有就不允许添加 @ResponseBody @RequestMapping(value = "/car/add") public String addCar(Car car) { boolean exist = iCarService.checkCar(car.getUserId(), car.getProductId()); if (exist) { return "exist"; } boolean result = iCarService.addCar(car); if (result) { return "ok"; } return "fail"; } // 根据购物id值进行删除 @ResponseBody @RequestMapping(value = "/car/delete/{id}") public String deleteCar(@PathVariable Integer id) { boolean result = iCarService.deleteCar(id); if (result) { return "ok"; } return "fail"; } // 根据userid获取购物车信息 @RequestMapping("/car/{userId}") public String car(@PathVariable(value = "userId") Integer userId, Model model) { // 获取购物车列表 List<Car> carList = iCarService.getList(userId); // 获取用户信息 User user = iUserService.get(userId); if (user == null) { return "error"; } Map<Integer, Product> productMap = new HashMap<>(); float totalPrice = 0; // 循环购物车，根据里面的商品id去获取商品详情，并保存到字典中 for (Car car : carList) { Product product = iProductService.getProduct(car.getProductId()); productMap.put(car.getId(), product); totalPrice += product.getPrice(); } // 为model添值 model.addAttribute("carList", carList); model.addAttribute("productMap", productMap); model.addAttribute("user", user); model.addAttribute("totalPrice", totalPrice); return "car"; } }
接下来看一下购物车的部分前端代码
<%-- Created by IntelliJ IDEA. User: yangshixiong Date: 2020/1/28 Time: 下午9:07 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <title>${user.username}的购物车</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="yang"> <!-- Bootstrap core CSS --> <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">杨的购物广场</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="${pageContext.request.contextPath}/">回欢迎页</a></li> <li><a href="#" id="backProduct">返回商品列表</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="${pageContext.request.contextPath}/car/${user.id}">购物车</a></li> <li class="dropdown"> <img src="${pageContext.request.contextPath}/${user.avatarUrl}" alt="" style=" max- 30px; display: inline-block;"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: inline-block; padding-left: 3px;">${user.username}<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="${pageContext.request.contextPath}/userinfo/${user.id}">个人信息</a></li> <li><a href="${pageContext.request.contextPath}/order/${user.id}">查看订单</a></li> <li id="logout"><a>退出</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div style="max- 1440px; margin: 0 auto"> <table class="table table-striped"> <caption>${user.username}的购物车</caption> <thead> <tr> <th>照片</th> <th>商品</th> <th>描述</th> <th>价格</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${carList}" var="car"> <tr> <td><img src="${pageContext.request.contextPath}/${productMap[car.id].pictureUrl}" alt="" class="img-circle" style="max- 30px;"></td> <td>${productMap[car.id].name}</td> <td>${productMap[car.id].description}</td> <td>${productMap[car.id].price}</td> <td> <button href="${pageContext.request.contextPath}/car/delete/${car.id}" type="button" class="btn btn-danger delete">删除 </button> <button href="" type="button" class="btn btn-success">单独结算</button> </td> </tr> </c:forEach> </tbody> </table> <div style="display: flex; justify-content: flex-end; align-items: center; border-top:1px solid #333333"> <div style="color: red; font-size: 40px">总计：${totalPrice}</div> <div style="margin: 0 200px 0 20px;"> <button type="button" class="btn btn-primary">结算</button> </div> </div> </div> <!-- Jquery --> <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.1.min.js"></script> <!-- Bootstrap --> <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script> <script type="application/javascript"> $(function () { let token = sessionStorage.getItem("token") || null; // 验证是否存在token，没有则返回登陆 if (token == null) { alert("请先登陆！"); window.location = "${pageContext.request.contextPath}/login"; return false; } document.getElementById("backProduct").href = "${pageContext.request.contextPath}/product?token=" + token; $('.delete').click(function (e) { let url = e.toElement.getAttribute("href"); $.ajax({ type: "get", url: url, success: function (data) { if (data === "ok") { alert("删除成功！"); document.location.reload(); return false; } alert("删除失败，请刷新重试！") }, error: function (err) { console.log(err); alert("服务器故障！") } }) }); $("#logout").click(function () { sessionStorage.removeItem("token"); window.location = "${pageContext.request.contextPath}/login" }) }) </script> </body> </html>