spring项目篇14 --- 编写商品展示以及购物车信息

airfling

2020-01-29

肺炎形势严峻，人心惶惶，愿祖国早日解决，社会早点稳定。

这次主要实现的功能就是商品展示以及购物车，购物车信息保存在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-width: 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-width: 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-width: 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-width: 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-width: 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>

sql数据库