ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2020-01-28 23:57:51  阅读：239  来源： 互联网

标签：product 14 spring 购物车 yang car import com id


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

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

 

标签：product,14,spring,购物车,yang,car,import,com,id
来源： https://www.cnblogs.com/yangshixiong/p/12239354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有