网上书城（功能模块四）

目标

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();}@Overridepublic 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();@Overridepublic Book getModel() {// TODO Auto-generated method stubreturn 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 blocke.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 stubreturn 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 blocke.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">&times;</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>

网上书城（功能模块四）相关推荐

网上书城图书模块及首页分页
1.模型分析 2.实现分析点击页码,传递参数,跳转到Servlet程序,处理分页操作,web层接收参数,调用Service层方法,获取Page对象,保存到request域中,请求转发并回显信息. S ...
SSM+网上书城系统毕业设计-附源码180919
目录摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...
计算机毕业设计java课程设计程序设计SSM框架网上书城全套含微信支付
<SSM网上书城项目前后台全套>该项目采用技术Springmvc.Spring.Mybatis.tomcat服务器.mysql数据库开发工具eclipse,项目含有源码.配套开发软件.软 ...
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言需实现的目标(效果图) 书籍分类展示新书上架展示热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
网上书城（功能模块三）
目录目标表结构(设计) 步骤 entity类 dao层 web层页面目标 1.使用自定义mvc编写模式+js(ajax) 2.通过编码实现页面与数据库进行数据绑定 3.书籍分类类别动态加载,新 ...
JAVA高级应用课程设计(网上书城系统——会员登陆模块的设计与实现)
课程设计报告课程名称: JAVA高级应用课程设计设计题目:网上书城系统--会员登陆模块的设计与实现目录一.开发背景. 1 (一)背景概述. 1 (二)发展前景 ...
[系统安全] 四十五.APT系列(10)Metasploit后渗透技术信息收集、权限提权和功能模块详解
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
中小企业网上手机订货下单软件|移讯云订货通订单管理系统后台功能模块
中小企业网上手机订货下单软件|移讯云订货通管理系统后台功能模块一:后台首页后台首页属于仪表盘企业数据统计: 显示内容有 1:今日订单. 2:今日订单金额. 3:本月订单数量. 4:本月订单金额 5 ...
# 大项目之网上书城（四）——主页（下中）
目录大项目之网上书城(四)--主页(下中) 主要改动 1.主页持续施工中代码效果图 2.index.js 代码热度 3.Book,User表表结构 4.XinShuMingServlet 代 ...