目标
1.使用自定义mvc编写模式＋js通用左侧菜单栏+jsp页面c标签遍历
2.通过编码实现页面与数据库进行数据绑定
3.书籍搜索详情后台实现，加入购物车前台页面，购物车功能
entity
1.加入购物车携带的数据字段
package com.houzhihong.vo;
public class ShoppingVo {
// 购物车列表订单项所需数据
private String name;
private float price;
private int num;
private float total;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public float getTotal() {
return total;
}
public void setTotal(float total) {
this.total = total;
}
public ShoppingVo(String name, float price, int num, float total) {
super();
this.name = name;
this.price = price;
this.num = num;
this.total = total;
}
public ShoppingVo() {
super();
}
@Override
public String toString() {
return "ShoppingVo [name=" + name + ", price=" + price + ", num=" + num + ", total=" + total + "]";
}
// 提交订单所需数据
/* private String consignee;
private String phone;
private String postalcode;
private String address;
private int sendType;*/
}
表结构（设计）
1.左侧菜单栏类别结构表
步骤
dao层
1.BookDao书籍类方法:根据书籍类型查询
package com.houzhihong.dao;
import java.sql.SQLException;
import java.util.List;
import com.houzhihong.entity.Book;
import com.houzhihong.util.BaseDao;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.PinYinUtil;
import com.houzhihong.util.StringUtils;
public class BookDao extends BaseDao<Book> {
//查询
public List<Book> list(Book book, PageBean pageBean)
throws InstantiationException, IllegalAccessException, SQLException {
String name = book.getName();
long cid = book.getCid();
String sql = "select * from t_easyui_book where true ";
if (StringUtils.isNotBlank(name)) {
sql += " and name like '%" + name + "%'";
}
//根据书籍类型查询
if (cid !=0) {
sql += " and cid ="+cid;
}
return super.executeQuery(sql, Book.class, pageBean);
}
web层
1.书籍搜索详情带自定义分页标签，返回结果码search页面遍历
package com.houzhihong.web;
import java.sql.SQLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.houzhihong.dao.BookDao;
import com.houzhihong.entity.Book;
import com.houzhihong.mvc.framework.ActionSupport;
import com.houzhihong.mvc.framework.ModelDriven;
import com.houzhihong.util.DataGridResult;
import com.houzhihong.util.PageBean;
import com.houzhihong.util.ResponseUtil;
import com.houzhihong.util.Result;
public class BookAction extends ActionSupport implements ModelDriven<Book> {
private Book book = new Book();
private BookDao bookDao = new BookDao();
@Override
public Book getModel() {
// TODO Auto-generated method stub
return book;
}
//按书籍类型查询
public String search(HttpServletRequest req, HttpServletResponse resp) {
PageBean pageBean = new PageBean();
// 初始化
pageBean.setRequest(req);
try {
List<Book> list = this.bookDao.list(book, pageBean);
req.setAttribute("books", list);
req.setAttribute("pageBean", pageBean);
} catch (InstantiationException | IllegalAccessException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "search";
}
2.加入购物车的业务处理action
package com.houzhihong.web;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.houzhihong.entity.User;
import com.houzhihong.mvc.framework.ActionSupport;
import com.houzhihong.mvc.framework.ModelDriven;
import com.houzhihong.vo.ShoppingVo;
public class ShoppingAction extends ActionSupport implements ModelDriven<ShoppingVo> {
private ShoppingVo shoppingVo = new ShoppingVo();
@Override
public ShoppingVo getModel() {
// TODO Auto-generated method stub
return shoppingVo;
}
//加入购物车
public String add(HttpServletRequest req,HttpServletResponse resp) {
ServletContext ctx = req.getServletContext();
String name;
try {
//加入购物车乱码问题
name = java.net.URLDecoder.decode(req.getParameter("name"), "utf-8");
shoppingVo.setName(name);
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
/*String shopcar ="shopcars";*/
/*User curentUser = (User) req.getSession().getAttribute("currentUser");*/
List<ShoppingVo> shopcars = (List<ShoppingVo>) ctx.getAttribute("shopcars"/*curentUser.getId()*/);
if(shopcars == null || shopcars.size() == 0) {
/*shopcars.add(shoppingVo);
ctx.setAttribute("shopcars", shopcars);*/
shopcars = new ArrayList<ShoppingVo>();
}else {
}
shopcars.add(shoppingVo);
ctx.setAttribute("shopcars", shopcars);
return "shoppingCar";
}
}
3.index.js搜索点击事件左侧菜单栏
$(".list-group").append('<li class="list-group-item " οnclick="searchByType('+data[i].id+')">'+data[i].name+'</li>');
function searchByType(cid) {
//alert(cid);
var ctx = $("#ctx").val();
location.href=ctx+"/book.action?methodName=search&cid="+cid;
}
4.通用左侧菜单栏js代码块：
$(function () {
//后面渲染的元素节点
$(".list-group").on('mouseenter','.list-group-item:gt(0)',function () {
$(this).addClass('list-group-item-hover');
});
$(".list-group").on('mouseleave','.list-group-item:gt(0)',function () {
$(this).removeClass('list-group-item-hover');
});
//分类
$.ajax({
url: '${pageContext.request.contextPath}/category.action?methodName=combobox',
success: function (data) {
data = eval(data);
// debugger;
for (i in data) {
$(".list-group").append('<li οnclick="searchByType('+ data[i].id+')" class="list-group-item">' + data[i].name + '</li>');
}
}
});
})
页面
1.搜索框查询书籍详情
2.左侧菜单栏书籍详情
3.加入购物车的购物车页面
4.search.jsp书籍搜索详情,加入购物车页面，引入自定义标签tag,页面带分页
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@taglib prefix="h" uri="/houzhihong" %>
<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 href="${pageContext.request.contextPath}/static/css/fgs.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common.js"></script>
</head>
<body class="text-center">
<div class="container">
<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=findByName" 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">
<c:forEach var="b" items="${books}">
<div class="media">
<img style="width: 100px;height: 140px;" src="${pageContext.request.contextPath}${b.image}" class="align-self-center mr-3" alt="...">
<div class="media-body text-left">
<p>${b.name}</p>
<p>作者：${b.author}</p>
<p>价格：${b.price}</p>
<p>出版社：${b.publishing}</p>
<p>书籍简介：${b.description}</p>
<span>
<a type="button" class="btn btn-danger" href="${pageContext.request.contextPath}/shopping.action?methodName=add&name=${b.name}&price=${b.price}&num=1&total=${b.price}">加入购物车</a>
<a type="button" class="btn btn-danger" href="${pageContext.request.contextPath}/shopping.action?methodName=pay">去结算</a>
</span>
</div>
</div>
<hr>
</c:forEach>
<h:page pageBean="${pageBean }"></h: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 search() {
location.href="${pageContext.request.contextPath }/book.action?methodName=search&name="+$("#book_name").val();
}
</script>
</body>
</html>
5.shoppingCar.jsp购物车页面
<%@ 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/jquery-easyui-1.5.1/themes/default/easyui.css">
<link href="${pageContext.request.contextPath}/static/css/fgs.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/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common.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=findByName" 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="${shopcars}" 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>
</div>
</div>
<!-- 页面主体内容 end -->
<!-- 网站版权 start -->
<div class="row footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育，版权所有
</div>
</div>
<!-- 网站版权 end -->
</div>
<script type="text/javascript">
<%--书籍搜索功能--%>
function searchByType(cid) {
location.href = '${pageContext.request.contextPath}/book.action?methodName=findByType&cid=' + cid;
};
</body>
</html>
2370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
