目标：
1、解决乱码
2、购物车结算功能
一、解决乱码
1、修改util包中的EncodingFiter
注掉不需要部分就可以了
2、界面展示
二、购物车结算功能
1、购物车结算前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
<link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body class="text-center">
<div class="container">
<!-- 购物车新增模态框 -->
<div class="shop-modal modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">订单信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="shop-form" method="post">
<div class="row">
<!-- <div class="col-md-3">收货人：</div> -->
<div class="col-md-12"><input type="text" name="consignee" id="consignee" placeholder="收货人"
value=""/></div>
</div>
<div class="row">
<!-- <div class="col-md-3">手机号：</div> -->
<div class="col-md-12"><input type="text" name="phone" placeholder="收货人手机号" id="phone"
value=""/></div>
</div>
<div class="row">
<!-- <div class="col-md-3">收货人邮编：</div> -->
<div class="col-md-12"><input type="text" name="postalcode" placeholder="收货人邮编"
id="postalcode" value=""/></div>
</div>
<div class="row">
<!-- <div class="col-md-3">收货地址：</div> -->
<div class="col-md-12"><input type="text" name="address" placeholder="收货地址" id="address"
value=""/></div>
</div>
<div class="row">
<!-- <div class="col-md-3">发货方式</div> -->
<div class="col-md-12">
<select class="form-control" name="sendType" id="sendType">
<option value="1">平邮</option>
<option value="2">快递</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary order_Create">确定</button>
</div>
</div>
</div>
</div>
<div class="row head">
<div class="col-md-12">
<i>
您好，欢迎来到飞凡网上书店！
</i>
<b>
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
</b>
</div>
</div>
<!-- 横幅搜索栏 start -->
<div class="row banner">
<div class="img1"></div>
<div class="col-md-12">
<form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByType" method="post">
<%--<input type="hidden" name="methodName" value="findByName">--%>
<input type="text" name="name" value="" id="input" class="search">
<input type="submit" class="btn btn-primary" value="查询">
</form>
</div>
</div>
<!-- 横幅搜索栏 end -->
<!-- 页面主体内容 start -->
<div class="row content">
<div class="col-md-3 float-left c-left">
<ul class="list-group">
<li class="list-group-item">书籍分类</li>
</ul>
</div>
<%--${books}--%>
<div class="col-md-9 float-right c-right">
<table class="table table-striped">
<thead class="list-group-item-hover">
<tr>
<%--<th>编号</th>--%>
<th>书名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="s" items="${shopGoodsVos}" varStatus="index">
<tr>
<%--<th>${index.index}</th>--%>
<th>${s.name}</th>
<td>${s.price}</td>
<td>
<input type="text" class="text-center item_num" name="num" value="${s.num}"/>
</td>
<td>${s.total}</td>
<td>
<%--<a href="#" class="text-primary" onclick="shopingDel(${s.name},${s.price},${s.num},${s.total})">删除</a>--%>
<a href="${pageContext.request.contextPath}/shopping.action?methodName=del&pageStr=${index.index}"
class="text-primary">删除</a>
<a href="#" class="text-primary" onclick="sshopUpdate(this);">更新</a>
</td>
</tr>
</c:forEach>
<tr class="bg-white">
<td colspan="5" class="text-center">
<button type="button" onclick="clearCar();" class="btn bg-orange2">清空购物车</button>
<button type="button" class="btn bg-orange2 continue-buy">继续购买</button>
<button type="button" class="btn btn-danger car_pay">去结算</button>
</td>
</tr>
</tbody>
</table>
<%--<xl:page pageBean="${pageBean}"></xl:page>--%>
</div>
</div>
<!-- 页面主体内容 end -->
<!-- 网站版权 start -->
<div class="row footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育，版权所有
</div>
</div>
<!-- 网站版权 end -->
</div>
<script type="text/javascript">
<%--跟新购物车--%>
function sshopUpdate(ele) {
// console.log($(ele).parent().parent());
var $parent = $(ele).parent().parent();
var $price_td = $parent.children().eq(1);
var $num_td = $parent.children().eq(2);
var $total_td = $parent.children().eq(3);
var price = $price_td.html();
var num = $num_td.find(":input").val();
var total = parseInt(num) * parseFloat(price);
$total_td.html(parseFloat(total).toFixed(1));
}
<%--书籍搜索功能--%>
function searchByType(cid) {
location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
};
//清除购物车
function clearCar() {
$.messager.confirm('确认', '您确认想要清空购物车吗？', function (r) {
if (r) {
$.ajax({
url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
success: function (data) {
location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';
}
});
}
})
}
$(function () {
// 给模态框添加关闭事件
$('.close span,.modal-footer .btn-secondary').click(function () {
$('.shop-modal').addClass('modal');
})
// 购物车结算
$(".car_pay").click(function () {
$('.shop-modal').removeClass('modal');
})
$(".order_Create").click(function () {
var consignee = $("#consignee").val();
var phone = $("#phone").val();
var postalcode = $("#postalcode").val();
var address = $("#address").val();
var sendType = $("#sendType").val();
var single_tr = "";
$(".table tr:gt(0)").not(":last").each(function (index, node) {
console.log(index);
single_tr = single_tr + "," + $(this).find("th").eq(0).html() + "-" + $(this).find("td").eq(0).html() + "-"
+ $(this).find("td").eq(1).find("input").val() + "-" + $(this).find("td").eq(2).html();
})
console.log(single_tr.substring(1));
var param = "consignee=" + consignee + "&phone=" + phone + "&postalcode=" + postalcode + "&address=" + address + "&sendType=" + sendType + "&pageStr=" + single_tr;
$.ajax({
url: '${pageContext.request.contextPath}/shopping.action?methodName=createOrder',
type: "POST",
data: param,
success: function (data) {
var consignee = $("#consignee").val("");
var phone = $("#phone").val("");
var postalcode = $("#postalcode").val("");
var address = $("#address").val("");
var sendType = $("#sendType").val("");
$('.shop-modal').addClass('modal');
$(".table tr:gt(0)").not(":last").remove();
$.ajax({
url: '${pageContext.request.contextPath}/shopping.action?methodName=clear',
success: function (data) {
<%--location.href = '${pageContext.request.contextPath}/shopping.action?methodName=list';--%>
}
});
}
});
});
})
</script>
</body>
</html>
2、增加订单类和订单项类
①、订单类
package com.mwy.entity;
import java.util.Date;
public class Order {
private long id;
private long uid;
private Date orderTime;
private String consignee;
private String phone;
private String postalcode;
private String address;
private int sendType;
private Date sendTime;
private float orderPrice;
private int orderState;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public long getUid() {
return uid;
}
public void setUid(long uid) {
this.uid = uid;
}
public Date getOrderTime() {
return orderTime;
}
public void setOrderTime(Date orderTime) {
this.orderTime = orderTime;
}
public String getConsignee() {
return consignee;
}
public void setConsignee(String consignee) {
this.consignee = consignee;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getPostalcode() {
return postalcode;
}
public void setPostalcode(String postalcode) {
this.postalcode = postalcode;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public int getSendType() {
return sendType;
}
public void setSendType(int sendType) {
this.sendType = sendType;
}
public Date getSendTime() {
return sendTime;
}
public void setSendTime(Date sendTime) {
this.sendTime = sendTime;
}
public float getOrderPrice() {
return orderPrice;
}
public void setOrderPrice(float orderPrice) {
this.orderPrice = orderPrice;
}
public int getOrderState() {
return orderState;
}
public void setOrderState(int orderState) {
this.orderState = orderState;
}
@Override
public String toString() {
return "Order [id=" + id + ", uid=" + uid + ", orderTime=" + orderTime + ", consignee=" + consignee + ", phone="
+ phone + ", postalcode=" + postalcode + ", address=" + address + ", sendType=" + sendType
+ ", sendTime=" + sendTime + ", orderPrice=" + orderPrice + ", orderState=" + orderState + "]";
}
}②、订单项类
package com.mwy.entity;
public class OrderItem {
private long id;
private long oid;
private String bid;
private int quantity;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public long getOid() {
return oid;
}
public void setOid(long oid) {
this.oid = oid;
}
public String getBid() {
return bid;
}
public void setBid(String bid) {
this.bid = bid;
}
public int getQuantity() {
return quantity;
}
public void setQuantity(int quantity) {
this.quantity = quantity;
}
@Override
public String toString() {
return "OrderItem [id=" + id + ", oid=" + oid + ", bid=" + bid + ", quantity=" + quantity + "]";
}
}3、购物车结算生成订单和生成订单项方法
①、增加订单、按照订单时间倒序查询
按照订单时间倒序查询：需要设置当前订单项是属于哪个订单的,思路是查询出最新订单的id
按照订单时间进行倒序查询，取第一条数据即可
package com.mwy.dao;
import java.util.List;
import com.mwy.entity.Order;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class OrderDao extends BaseDao<Order>{
/**
* 购物车结算生成订单
* @param order
* @throws Exception
*/
public void add(Order order) throws Exception {
String sql="insert into t_easyui_order(uid,orderTime,consignee,phone,postalcode,address,sendType,sendTime,orderPrice,orderState) values(?,now(),?,?,?,?,?,?,?,?)";
super.executeUpdate(sql, order, new String[] {"uid","consignee","phone","postalcode","address","sendType","sendTime","orderPrice","orderState"});
}
/**
* 按照订单时间倒序查询
* @param order
* @param pageBean
* @return
* @throws Exception
*/
public List<Order> list( Order order, PageBean pageBean) throws Exception {
String sql="select * from t_easyui_order order by orderTime desc";
return super.executeQuery(sql, Order.class, pageBean);
}
}②、生成订单项方法
package com.mwy.dao;
import com.mwy.entity.OrderItem;
import com.zking.util.BaseDao;
public class OrderItemDao extends BaseDao<OrderItem>{
/**
* 购物车结算生成订单项
* @param OrderItem
* @throws Exception
*/
public void add(OrderItem orderItem) throws Exception {
String sql="insert into t_easyui_orderitem(oid,bid,quantity) values(?,?,?)";
super.executeUpdate(sql, orderItem, new String[] {"oid","bid","quantity"});
}
}4、BookDao写修改销量方法
当购买书籍后，对应书籍销量增加
/**
* 根据书籍的名称（唯一）修改销量的方法
* @param book
* @throws Exception
*/
public void editSales(Book book) throws Exception {
String sql="update t_easyui_book set sales=sales+? where name=?";
super.executeUpdate(sql, book, new String[] {"sales","name"});
}
5、ShoppingAction 增加购物车结算功能
package com.mwy.web;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mwy.dao.BookDao;
import com.mwy.dao.OrderDao;
import com.mwy.dao.OrderItemDao;
import com.mwy.entity.Book;
import com.mwy.entity.Order;
import com.mwy.entity.OrderItem;
import com.mwy.entity.User;
import com.mwy.vo.ShoppingVo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.StringUtils;
public class ShoppingAction extends ActionSupport implements ModelDriver<ShoppingVo>{
private ShoppingVo vo=new ShoppingVo();
private OrderDao od=new OrderDao();
private OrderItemDao oid=new OrderItemDao();
private BookDao bd=new BookDao();
/**
* 查询购物车
* @param req
* @param resp
* @return
*/
public String list(HttpServletRequest req, HttpServletResponse resp) {
HttpSession session=req.getSession();
User cuser = (User)session.getAttribute("cuser");
ObjectMapper om=new ObjectMapper();
String shoppingInfo = (String) session.getAttribute("shopping_"+cuser.getId());
try {
List<ShoppingVo> shopGoodsVos=om.readValue(shoppingInfo, List.class);
req.setAttribute("shopGoodsVos", shopGoodsVos);
} catch (Exception e) {
e.printStackTrace();
}
return "shoppingCar";
}
/**
* 将信息加入购物车
* @param req
* @param resp
* @return
*/
public String add(HttpServletRequest req, HttpServletResponse resp) {
HttpSession session=req.getSession();
User cuser = (User)session.getAttribute("cuser");
ObjectMapper om=new ObjectMapper();
try {
if(cuser!=null) {
long uid = cuser.getId();
List<ShoppingVo> shopGoodsVos=null;
//从session取出当前用户对应的购物车信息
String shoppingInfo = (String) session.getAttribute("shopping_"+uid);
if(StringUtils.isNotBlank(shoppingInfo)) {
//第2~n次
shopGoodsVos=om.readValue(shoppingInfo, List.class);
}else {
//第1次
shopGoodsVos=new ArrayList<ShoppingVo>();
}
//vo指的是前台点击购物车具体商品内容
shopGoodsVos.add(vo);
session.setAttribute("shopping_"+uid, om.writeValueAsString(shopGoodsVos));
req.setAttribute("shopGoodsVos", shopGoodsVos);
}
} catch (Exception e) {
e.printStackTrace();
}
return "shoppingCar";
}
/**
* 清空购物车
* @param req
* @param resp
*/
public void clear(HttpServletRequest req, HttpServletResponse resp) {
HttpSession session=req.getSession();
User cuser = (User)session.getAttribute("cuser");
session.removeAttribute("shopping_"+cuser.getId());
try {
ResponseUtil.writeJson(resp, 1);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 购物车结算
* @param req
* @param resp
*/
public void createOrder(HttpServletRequest req, HttpServletResponse resp) {
/**
* 1、数据入订单表
* 2、数据入订单项表
* 3、下单结束后，要将商品的销售数量发生改变
*/
User cuser = (User) req.getSession().getAttribute("cuser");
//判断登录
if(cuser==null) {
return;
}
//组装数据
Order order=new Order();
order.setAddress(vo.getAddress());
order.setConsignee(vo.getConsignee());
//订单价格总计
float orderPrice=0f;
String pageStr = vo.getPageStr();
if(StringUtils.isNotBlank(pageStr)&&pageStr.length()>1) {
for (String item:pageStr.substring(1).split(",")) {
String[] itemEle = item.split("-");
orderPrice+=Float.valueOf(itemEle[3]);
}
}
order.setOrderPrice(orderPrice);
order.setOrderState(1);
order.setPhone(vo.getPhone());
order.setPostalcode(vo.getPostalcode());
order.setSendType(vo.getSendType());
order.setUid(cuser.getId());
try {
od.add(order);
Order newest = od.list(null, null).get(0);
if(StringUtils.isNotBlank(pageStr)&&pageStr.length()>1) {
for (String item:pageStr.substring(1).split(",")) {
OrderItem oi=new OrderItem();
String[] itemEle = item.split("-");
oi.setBid(itemEle[0]);
//需要设置当前订单项是属于哪个订单的,思路是查询出最新订单的id
//按照订单时间进行倒序查询，取第一条数据即可
oi.setOid(newest.getId());
oi.setQuantity(Integer.valueOf(itemEle[2]));
oid.add(oi);
//当前书籍被购买，那么这本书的销量就应该加Quantity
Book b=new Book();
b.setName(itemEle[0]);
b.setSales(Integer.valueOf(itemEle[2]));
bd.editSales(b);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public ShoppingVo getModel() {
return vo;
}
}
6、结果界面展示
①、购买成功后增加订单与订单项
订单表：
订单项表 ：
②、对应销量变化
今天结束了！！
3540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
