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

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

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

原文地址:https://www.cnblogs.com/yangshixiong/p/12239354.html

时间: 2024-10-27 20:18:33

spring项目篇14 --- 编写商品展示以及购物车信息的相关文章

iOS开发项目篇—14点击标题按钮弹出菜单

iOS开发项目篇—14点击标题按钮弹出菜单 一.简单说明 (1)简单实现 点击标题按钮弹框,在箭头向上的时候,显示标题菜单 把ImageView添加到谁的身上?三角形的箭头在导航栏上,因此不能添加到tableview上. 分析图示: 有两个两种方法可以考虑: (1)添加到导航控制器上,因为导航栏是在导航控制器上的. (2)不用考虑控制器,直接添加到窗口上. 拿到窗口 (1)self.view.window这个属性谨慎使用,当开始加载的时候,为空 (2)获取主窗口  [UIApplication

spring项目篇12---网上商城之配置以及工具类的编写

这个项目用到jdbc技术,研究了一下,为了学习一下,对于执行sql语句,自己进行封装工具类来进行处理,这样便于进一步理解. 首先我们来看一下搭建的基本项目结构 我们接下来看一下相关的配置信息: 首先看一下web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="

spring项目篇2----编写配置文件

我们接下来开始编写我们的权限系统,以便进一步熟悉SSM,接下来按照第一篇起一个maven项目,项目简介如下,接下来看一下配置文件 web.xml <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app xmlns="http:/

spring项目篇15 --- 商城小项目创建订单以及查看所有订单

深圳肺炎患者突破80了,现在心里慌慌的,不知什么时候返深啊...既来之,则安之! 今天,这个简单的小项目最后一步,创建订单以及查看所有订单状态,我们的订单只需要点击一下付款即可完成支付,没有接入第三方支付.下面计划开始学习mybatis. 因为大多是业务代码,我们直接看就可以 先看dao层,在创建订单的时候,因为设计多表操作,因此需要开启事务 // IOrderDao package com.yang.dao; import com.yang.domain.Car; import com.yan

spring项目篇5----shiro以及实现登陆认证

接下来做一下,用户的认证登陆以及权限验证,在这里使用shiro,首先来看一下shiro Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序. 主要功能 三个核心组件:Subject, SecurityManager 和 Realms. Subject:即“当前操作用户”.但是,在Shiro中,Subject这一概念并不仅仅指人,也可以是

spring项目篇13 --- 网上商城之登陆注册

首先我们这次使用的是jwt来实现的登陆认证,首先看一下需要引入的jar包 尤其是commons-codec这个包,一定要引入,否则会报binary那个包的错误,因为找不到方法,另外不要使用那个结尾是20... 就是那个最新的这个包,会出错,找了好半天这个错误... 首先说一下基本思想,就是通过拦截器将我们的login以及rgister与静态文件放行,其余的检测是否携带token,并对token进行检测,合格之后在进行放行. 接下来直接看源码 首先看一下我们的spring配置补充的,因为没有使用r

spring项目篇3----编写用户展示模块

第一步创建两张数据库表 员工表: 部门表: 第二步: 使用之前配置的mybatis-generator自动从数据库中生成pojo类与mapper映射文件 首先在配置文件中添加我们的表信息 <!--指定生成那个表--> <table tableName="employee" /> <table tableName="department" /> 之后点击运行 在java.com.yang.mapper包中的xml文件需要移动到res

spring项目篇4----编写角色与权限

首先,先建立四个表 角色表 权限表 角色与权限关系表 员工与角色表 然后使用插件生成pojo类以及映射文件并把xml文件移动到recourses文件中,接下来编写前端页面,跟之前编写的员工前端页面差不多 role.jsp <%--工具栏--%> <div id="toolbar"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'ic

第04项目:淘淘商城(SpringMVC+Spring+Mybatis)【第十一天】(购物车+订单)

https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)[第七天](redis缓存) 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)[第八天](solr服务器搭建.搜索功能实现) 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)[第九天](商