资料来源于：B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ，本人才疏学浅，记录笔记以供日后回顾
由于是多个视频内容混合在一起，因此只放了第一个链接
视频链接
代码示例
index.html代码
修改后，点击购物车按钮，直接访问cart.html页面
点击查看代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>书城首页</title>
<link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
<link rel="stylesheet" th:href="@{/static/css/common.css}" />
<link rel="stylesheet" th:href="@{/static/css/iconfont.css}" />
<link rel="stylesheet" th:href="@{/static/css/index.css}" />
<link rel="stylesheet" th:href="@{/static/css/swiper.min.css}" />
<script language="JavaScript" th:src="@{/static/script/index.js}"></script>
</head>
<body>
<div id="app">
<div class="topbar">
<div class="w">
<div class="topbar-left">
<i>送至:</i>
<i>北京</i>
<i class="iconfont icon-ai-arrow-down"></i>
</div>
<div class="topbar-right" th:if="${session.currUser==null}">
<a href="user/login.html" class="login">登录</a>
<a href="user/regist.html" class="register">注册</a>
<a href="cart/cart.html" class="cart iconfont icon-gouwuche">
购物车
<div class="cart-num">3</div>
</a>
<a href="manager/book_manager.html" class="admin">后台管理</a>
</div>
<div class="topbar-right" th:unless="${session.currUser==null}">
<!--登录后风格-->
<span>欢迎你<b th:text="${session.currUser.getUname()}">张总</b></span>
<a href="#" class="register">注销</a>
<a th:href="@{/page.do(operate='page',page='cart/cart')}" class="cart iconfont icon-gouwuche">
购物车
<div class="cart-num" th:text="${session.currUser.cart.totalCount}">3</div>
</a>
<a href="./pages/manager/book_manager.html" class="admin">后台管理</a>
</div>
</div>
</div>
<div class="header w">
<a href="#" class="header-logo"></a>
<div class="header-nav">
<ul>
<li><a href="#">java</a></li>
<li><a href="#">前端</a></li>
<li><a href="#">小说</a></li>
<li><a href="#">文学</a></li>
<li><a href="#">青春文学</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">管理</a></li>
</ul>
</div>
<div class="header-search">
<input type="text" placeholder="十万个为什么" />
<button class="iconfont icon-search"></button>
</div>
</div>
<div class="banner w clearfix">
<div class="banner-left">
<ul>
<li>
<a href="">
<span>文学 鉴赏</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>社科 研究</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>少儿 培训</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>艺术 赏析</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>生活 周边</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>文教 科技</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
<li>
<a href="">
<span>热销 畅读</span>
<i class="iconfont icon-jiantou"></i
></a>
</li>
</ul>
</div>
<div class="banner-right">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<img src="./static/uploads/banner4.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
<li class="swiper-slide">
<img src="./static/uploads/banner5.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
<li class="swiper-slide">
<img src="./static/uploads/banner6.jpg" alt="">
<!-- <div class="banner-img"></div> -->
</li>
</ul>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="books-list ">
<div class="w">
<div class="list">
<div class="list-header">
<div class="title">图书列表</div>
<div class="price-search">
<span>价格:</span>
<input type="text">
<span>-元</span>
<input type="text">
<span>元</span>
<button>查询</button>
</div>
</div>
<div class="list-content">
<div href="" class="list-item" th:each="book : ${session.bookList}" th:object="${book}">
<img th:src="@{|/static/uploads/*{bookImg}|}" alt="">
<p th:text="|书名:*{bookName}|">书名:活着</p>
<p th:text="|作者:*{author}|">作者:余华</p>
<p th:text="|价格:￥*{price}|">价格:￥66.6</p>
<p th:text="|销量:*{saleCount}|">销量:230</p>
<p th:text="|库存:*{bookCount}|">库存:1000</p>
<button th:onclick="|addCart(*{id})|">加入购物车</button>
</div>
</div>
<div class="list-footer">
<div>首页</div>
<div>上一页</div>
<ul><li class="active">1</li><li>2</li><li>3</li></ul>
<div>下一页</div>
<div>末页</div>
<span>共10页</span>
<span>30条记录</span>
<span>到第</span>
<input type="text">
<span>页</span>
<button>确定</button>
</div>
</div>
</div>
</div>
<div class="cate w">
<div class="list">
<a href="" class="list-item">
<i class="iconfont icon-java"></i>
<span>java</span>
</a>
<a href="" class="list-item"
><i class="iconfont icon-h5"></i>h5</a
>
<a href="" class="list-item">
<i class="iconfont icon-python"></i>python
</a>
<a href="" class="list-item"
><i class="iconfont icon-tianchongxing-"></i>pm</a
>
<a href="" class="list-item"
><i class="iconfont icon-php_elephant"></i>php</a
>
<a href="" class="list-item"
><i class="iconfont icon-go"></i>go</a
>
</div>
<a href="" class="img">
<img src="./static/uploads/cate4.jpg" alt="" />
</a>
<a href="" class="img">
<img src="./static/uploads/cate5.jpg" alt="" />
</a>
<a href="" class="img">
<img src="./static/uploads/cate6.jpg" alt="" />
</a>
</div>
<div class="books">
<div class="w">
<div class="seckill">
<div class="seckill-header">
<div class="title">
图书秒杀
</div>
<!-- <i class="iconfont icon-huanyipi"></i> -->
</div>
<div class="seckill-content">
<a href="" class="tip">
<h5>距离结束还有</h5>
<i class="iconfont icon-shandian"></i>
<div class="downcount">
<span class="time">00</span>
<span class="token">:</span>
<span class="time">00</span>
<span class="token">:</span>
<span class="time">00</span>
</div>
</a>
<a href="" class="books-sec">
<img src="./static/uploads/congwanqingdaominguo.jpg" alt="">
<p>从晚晴到民国</p>
<div>
<span class="cur-price">￥28.9</span>
<span class="pre-price">￥36.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="./static/uploads/cyuyanrumenjingdian.jpg" alt="">
<p>c语言入门经典</p>
<div>
<span class="cur-price">￥55.9</span>
<span class="pre-price">￥68.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="./static/uploads/fusang.jpg" alt="">
<p>扶桑</p>
<div>
<span class="cur-price">￥30.9</span>
<span class="pre-price">￥47.5</span>
</div>
<button>立即购买</button>
</a>
<a href="" class="books-sec">
<img src="./static/uploads/geihaizideshi.jpg" alt="">
<p>给孩子的诗</p>
<div>
<span class="cur-price">￥18.9</span>
<span class="pre-price">￥25.5</span>
</div>
<button>立即购买</button>
</a>
</ul>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="w">
<div class="top">
<ul>
<li>
<a href="">
<img src="./static/img/bottom1.png" alt="">
<span>大咖级讲师亲自授课</span>
</a>
</li>
<li>
<a href="">
<img src="./static/img/bottom.png" alt="">
<span>课程为学员成长持续赋能</span>
</a>
</li>
<li>
<a href="">
<img src="./static/img/bottom2.png" alt="">
<span>学员真是情况大公开</span>
</a>
</li>
</ul>
</div>
<div class="content">
<dl>
<dt>关于尚硅谷</dt>
<dd>教育理念</dd>
<!-- <dd>名师团队</dd>
<dd>学员心声</dd> -->
</dl>
<dl>
<dt>资源下载</dt>
<dd>视频下载</dd>
<!-- <dd>资料下载</dd>
<dd>工具下载</dd> -->
</dl>
<dl>
<dt>加入我们</dt>
<dd>招聘岗位</dd>
<!-- <dd>岗位介绍</dd>
<dd>招贤纳师</dd> -->
</dl>
<dl>
<dt>联系我们</dt>
<dd>http://www.atguigu.com<dd>
</dl>
</div>
</div>
<div class="down">
尚硅谷书城.Copyright ©2015
</div>
</div>
</div>
<script src="./static/script/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
autoplay: true,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
</script>
</body>
</html>
cart.html代码
原先使用的是thymeleaf，现在改为vue异步获取
点击查看代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
<link rel="stylesheet" th:href="@{/static/css/common.css}" />
<link rel="stylesheet" th:href="@{/static/css/cart.css}" />
<script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
<script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
<script language="JavaScript" th:src="@{/static/script/cart.js}"></script>
<base th:href="@{/}">
</head>
<body>
<div class="header">
<div class="w">
<div class="header-left">
<a th:href="@{/index.html}">
<img th:src="@{/static/img/logo.gif}" alt=""
/></a>
<h1>我的购物车1</h1>
</div>
<div class="header-right">
<h3>欢迎<span th:text="${session.currUser.uname}">张总</span>光临尚硅谷书城</h3>
<div class="order"><a th:href="@{/order.do(operate='getOrderList')}">我的订单1</a></div>
<div class="destory"><a href="../index.html">注销</a></div>
<div class="gohome">
<a href="../index.html">返回</a>
</div>
</div>
</div>
</div>
<div class="list" id="cart_div">
<div class="w">
<table>
<thead>
<tr>
<th>图片</th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="cartItem in cart.cartItemMap">
<td>
<img v-bind:src="'static/uploads/'+cartItem.book.bookImg" alt="" />
</td>
<td>{{cartItem.book.bookName}}</td>
<td>
<span class="count" @click="editCart(cartItem.id,cartItem.buyCount-1)">-</span>
<input class="count-num" type="text" value="1" v-bind:value="cartItem.buyCount"/>
<span class="count" @click="editCart(cartItem.id,cartItem.buyCount+1)">+</span>
</td>
<td>{{cartItem.book.price}}</td>
<td>{{cartItem.xj}}</td>
<td><a href="">删除</a></td>
</tr>
</tbody>
</table>
<div class="footer">
<div class="footer-left">
<a href="#" class="clear-cart">清空购物车</a>
<a href="#">继续购物</a>
</div>
<div class="footer-right">
<div>共<span>{{cart.totalBookCount}}</span>件商品</div>
<div class="total-price">总金额<span>{{cart.totalMoney}}</span>元</div>
<a class="pay" th:href="@{/order.do(operate='checkout')}">去结账</a>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="w">
<div class="top">
<ul>
<li>
<a href="">
<img src="static/img/bottom1.png" alt="" />
<span>大咖级讲师亲自授课</span>
</a>
</li>
<li>
<a href="">
<img src="static/img/bottom.png" alt="" />
<span>课程为学员成长持续赋能</span>
</a>
</li>
<li>
<a href="">
<img src="static/img/bottom2.png" alt="" />
<span>学员真是情况大公开</span>
</a>
</li>
</ul>
</div>
<div class="content">
<dl>
<dt>关于尚硅谷</dt>
<dd>教育理念</dd>
<!-- <dd>名师团队</dd>
<dd>学员心声</dd> -->
</dl>
<dl>
<dt>资源下载</dt>
<dd>视频下载</dd>
<!-- <dd>资料下载</dd>
<dd>工具下载</dd> -->
</dl>
<dl>
<dt>加入我们</dt>
<dd>招聘岗位</dd>
<!-- <dd>岗位介绍</dd>
<dd>招贤纳师</dd> -->
</dl>
<dl>
<dt>联系我们</dt>
<dd>http://www.atguigu.com</dd>
<dd></dd>
</dl>
</div>
</div>
<div class="down">
尚硅谷书城.Copyright ©2015
</div>
</div>
</body>
</html>
cart.js代码
数据装载完后，调用getCart方法，获取购物车的信息。在cart.html页面按数量的加减键时，调用editCart方法。
点击查看代码
window.onload=function(){
var vue = new Vue({
el:"#cart_div",
data:{
cart:{}
},
methods:{
getCart:function(){
axios({
method:"POST",
url:"cart.do",
params:{
operate:'cartInfo'
}
})
.then(function (value) {
var cart = value.data ;
vue.cart = cart ;
})
.catch(function (reason) { });
},
editCart:function(cartItemId , buyCount){
axios({
method:"POST",
url:"cart.do",
params:{
operate:'editCart',
cartItemId:cartItemId,
buyCount:buyCount
}
})
.then(function (value) {
vue.getCart();
})
.catch(function (reason) { });
}
},
mounted:function(){
this.getCart() ;
}
});
}
CartController.java代码
点击查看代码
package com.ypf.book.controller;
import com.google.gson.Gson;
import com.ypf.book.pojo.Book;
import com.ypf.book.pojo.Cart;
import com.ypf.book.pojo.CartItem;
import com.ypf.book.pojo.User;
import com.ypf.book.service.CartItemService;
import javax.servlet.http.HttpSession;
public class CartController {
private CartItemService cartItemService ;
//加载当前用户的购物车信息
public String index(HttpSession session){
User user =(User)session.getAttribute("currUser");
Cart cart = cartItemService.getCart(user);
user.setCart(cart);
session.setAttribute("currUser",user);
return "cart/cart";
}
public String addCart(Integer bookId , HttpSession session){
User user = (User)session.getAttribute("currUser");
CartItem cartItem = new CartItem(new Book(bookId),1,user);
//将指定的图书添加到当前用户的购物车中
cartItemService.addOrUpdateCartItem(cartItem,user.getCart());
return "redirect:cart.do";
}
public String editCart(Integer cartItemId , Integer buyCount){
cartItemService.updateCartItem(new CartItem(cartItemId , buyCount));
return "";
}
public String cartInfo(HttpSession session){
User user =(User)session.getAttribute("currUser");
Cart cart = cartItemService.getCart(user);
//调用Cart中的三个属性的get方法，目的是在此处计算这三个属性的值，否则这三个属性为null，
//导致的结果就是下一步的gson转化时，为null的属性会被忽略
cart.getTotalBookCount();
cart.getTotalCount();
cart.getTotalMoney();
Gson gson = new Gson();
String cartJsonStr = gson.toJson(cart);
return "json:"+cartJsonStr ;
}
}
CharacterEncodingFilter.java代码
对返回结果设置编码，处理乱码问题
点击查看代码
package com.ypf.myssm.filters;
import com.ypf.myssm.util.StringUtil;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(urlPatterns = {"*.do"},initParams = {@WebInitParam(name = "encoding",value = "UTF-8")})
public class CharacterEncodingFilter implements Filter {
private String encoding = "UTF-8";
@Override
public void init(FilterConfig filterConfig) throws ServletException {
String encodingStr = filterConfig.getInitParameter("encoding");
if(StringUtil.isNotEmpty(encodingStr)){
encoding = encodingStr ;
}
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
((HttpServletRequest)servletRequest).setCharacterEncoding(encoding);
((HttpServletResponse)servletResponse).setCharacterEncoding(encoding);
filterChain.doFilter(servletRequest,servletResponse);
}
@Override
public void destroy() {
}
}