网上书城（搜索页、加入购物车）
程序员文章站
2022-03-13 17:51:20
文章目录搜索商品关键字及分类查询加入购物车搜索商品关键字及分类查询jsp界面:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="l" uri="/jiangji...
搜索商品
关键字及分类查询
jsp界面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="l" uri="/jiangjiayan" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索页</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />
</head>
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好，欢迎来到网上书城！
</div>
<div class="col-sm-4 col-sm-offset-4">
<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
</div>
</div>
<!-- 搜索栏 -->
<div class="row">
<div class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="book_name" name="name" value="" />
<button type="button" class="btn btn-primary">搜索</button>
</div>
</div>
<!-- 主内容区 -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item" style="color: white;">书籍分类</li>
</ul>
</div>
<div class="media">
<c:forEach items="${books }" var="b" >
<img src="${b.image }" style="width: 100px;height: 110px" class="align-self-center mr-3" alt="...">
<div class="media-body">
<p>${b.name }</p>
<p>作者：${b.author }</p>
<p>价格：￥${b.price }</p>
<p>出版社：${b.publishing }</p>
<p>简介：${b.description }</p>
<p>
<!-- <button class="btn btn-danger" style="width: 150px;" onclick="addShopCar(this);">加入购物车</button> -->
<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>
<button class="btn btn-danger" style="width: 150px;">去结算</button>
</p>
</div>
</div>
</c:forEach>
<l:page pageBean="${pageBean }"></l:page>
</div>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright 2020 教育，版权所有
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/static/js/index.js"></script>
<script type="text/javascript">
$(function() {
})
function addShopCar(node){
/* location.href="${pageContext.request.contextPath }/book.action?methodName=search&name="+$("#book_name").val();
*/
var $div=$(node).parent().parent();
var name= $div.find("p").eq(0).html()
var price= $div.find("p").eq(1).html()
}
</script>
</body>
</html>
dao方法：
public List<Book> list(Book book, PageBean pageBean) throws Exception {
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, pageBean, Book.class);
}
js增加点击事件，跳转页面传递参数：
$(function () {
var ctx = $("#ctx").val();
$.ajax({
url:ctx+'/category.action?methodName=combobox',
success:function(data){
data=eval('('+data+')')
for(i in data){
$(".list-group").append('<li class="list-group-item" onclick="searchByType('+data[i].id+')" >'+data[i].name+'</li>');
}
$(".c-category li").eq(0).addClass('bg-color1');
$(".c-category li:gt(0)").addClass('bg-color2');
$(".c-category li:gt(0)").hover(function() {
$(this).addClass('bg-opacity');
}, function() {
$(this).removeClass('bg-opacity');
});
}
});
})
function searchByType(cid){
var ctx = $("#ctx").val();
location.href=ctx+"/book.action?methodName=search&cid="+cid;
}
web：
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 (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "search";
}
加入购物车
jsp界面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="l" uri="/jiangjiayan" %>
<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=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="${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>
</body>
</html>
实体类：
package com.jiangjiayan.vo;
import java.util.Objects;
public class ShoppingVo {
// 购物车列表订单项所需数据
private String name;
private float price;
private int num;
private float total;
// 提交订单所需数据
private String consignee;
private String phone;
private String postalcode;
private String address;
private int sendType;
// 页面的所有传参字符串
private String pageStr;
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
ShoppingVo that = (ShoppingVo) o;
return Float.compare(that.price, price) == 0 &&
num == that.num &&
Float.compare(that.total, total) == 0 &&
Objects.equals(name, that.name);
}
@Override
public int hashCode() {
return Objects.hash(name, price, num, 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 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 String getPageStr() {
return pageStr;
}
public void setPageStr(String pageStr) {
this.pageStr = pageStr;
}
@Override
public String toString() {
return "ShopGoodsVo [name=" + name + ", price=" + price + ", num=" + num + ", total=" + total + ", consignee="
+ consignee + ", phone=" + phone + ", postalcode=" + postalcode + ", address=" + address + ", sendType="
+ sendType + ", pageStr=" + pageStr + "]";
}
public ShoppingVo(String name, float price, int num, float total, String consignee, String phone,
String postalcode, String address, int sendType, String pageStr) {
super();
this.name = name;
this.price = price;
this.num = num;
this.total = total;
this.consignee = consignee;
this.phone = phone;
this.postalcode = postalcode;
this.address = address;
this.sendType = sendType;
this.pageStr = pageStr;
}
public ShoppingVo() {
super();
}
}
web：
public String add(HttpServletRequest request, HttpServletResponse response) {
ServletContext ctx = request.getServletContext();
List<ShoppingVo> shopGoodsVos = (List<ShoppingVo>)ctx.getAttribute("shopGoodsVos") ;
if (shopGoodsVos==null||shopGoodsVos.size()==0) {
// 购物车没有数据处理逻辑
shopGoodsVos = new ArrayList<>();
} else {
// 购物车有数据处理逻辑
}
shopGoodsVos.add(shoppingVo);
ctx.setAttribute("shopGoodsVos",shopGoodsVos);
return "shoppingCar";
}
@Override
public ShoppingVo getModel() {
return shoppingVo;
}
本文地址：https://blog.csdn.net/m0_46220187/article/details/107289380
上一篇： C#中Skip和Take的用法
下一篇： OpenGL的渲染架构解析和数据传递