门户书籍搜索&&加入购物车
程序员文章站
2022-07-02 23:03:53
一、门户书籍搜索1、BookDaopublic List 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 tru...
一、门户书籍搜索
1、BookDao
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);
}
2、BookAction
public String search(HttpServletRequest req,HttpServletResponse resp) throws Exception {
PageBean pagebean=new PageBean();
pagebean.setRequest(req);
String name = java.net.URLDecoder.decode(req.getParameter("name"), "utf-8");
book.setName(name);
try {
List<Book> list = this.bd.list(book, pagebean);
req.setAttribute("books", list);
System.out.println("list= "+list.toString());
req.setAttribute("pagebean", pagebean);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return "search";
}
3、search.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="z" uri="/ying" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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" />
<title>Insert title here</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="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>
<li class="list-group-item">现代言情</li>
<li class="list-group-item">古代言情</li>
<li class="list-group-item">幻想仙侠</li>
<li class="list-group-item">玄幻</li>
<li class="list-group-item">都市</li>
<li class="list-group-item">奇幻</li>
<li class="list-group-item">军事</li>
<li class="list-group-item">科幻</li>
<li class="list-group-item">武侠</li>
<li class="list-group-item">青春</li>
<li class="list-group-item">竞技</li>
<li class="list-group-item">历史</li>
<li class="list-group-item">游戏</li>
<li class="list-group-item">其他</li>
</ul>
</div>
<div class="col-sm-9">
<div class="media">
<img src="${b.image }" class="align-self-center mr-3" alt="...">
<c:forEach items="${books}" var="b">
<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;">加入购物车</button>
<button class="btn btn-danger" style="width: 150px;">去结算</button>
</p>
</div>
</div>
</c:forEach>
</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/common.js"></script>
<script type="text/javascript">
$(function() {
$(".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');
});
})
</script>
</body>
</html>
4、在index里面加一个点击事件和方法
<button onclick="search()" type="button" class="btn btn-primary">搜索</button>
function search(){
location.href="${pageContext.request.contextPath }/book.action?methodName=search&name=" +encodeURI(encodeURI($("#book_name").val()));
}
5、查询效果：
6、增加一个分页条
<z:page pagebean="${pagebean }"></z:page>
7、分页效果：
8、查询所有：
function searchByType(cid){
// alert(cid);
var ctx = $("#ctx").val();
location.href=ctx+"/book.action?methodName=search&cid="+cid;
}
9、查询所有效果：
二、加入购物车
1、ShoppingAction
package com.xieying.web;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xieying.entity.User;
import com.xieying.framework.ActionSupport;
import com.xieying.framework.ModelDriver;
import com.xieying.util.StringUtils;
import com.xieying.vo.ShoppingVo;
public class ShoppingAction extends ActionSupport implements ModelDriver<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 shopcar = "shopcars_";
// User curentUser = (User) req.getSession().getAttribute("curentUser"); shopcar+curentUser.getId()
// 在Application中不储存list集合，而会储存json串
List<ShoppingVo> shopcars = (List<ShoppingVo>) ctx.getAttribute("shopcars");
if(shopcars == null || shopcars.size() == 0 ) {
// 第一次添加购物车的时候，购物车中没有内容
shopcars = new ArrayList<ShoppingVo>();
// shopcars.add(shoppingVo);
// ctx.setAttribute("shopcars", shopcars);
}else {
// 第二次添加之后购物车有数据
}
shopcars.add(shoppingVo);
ctx.setAttribute("shopcars", shopcars);
return "shoppingCar";
}
}
2、shoppingCar.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="z" uri="/ying" %>
<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/fg.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="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="name" name="name" value="" />
<button type="button" class="btn btn-primary" onclick="search()">搜索</button>
</div>
</div>
<!-- 横幅搜索栏 end -->
<!-- 页面主体内容 start -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item text-white">书籍分类</li>
</ul>
</div>
<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>${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="${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 btn-orange">清空购物车</button>
<button type="button" class="btn btn-orange continue-buy">继续购买</button>
<button type="button" class="btn btn-danger car_pay">去结算</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 页面主体内容 end -->
<!-- 网站版权 start -->
<div class="row footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育，版权所有
</div>
</div>
<!-- 网站版权 end -->
</div>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }">
<script type="text/javascript">
</script>
</body>
</html>
3、search.jsp
<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>
效果：
本文地址：https://blog.csdn.net/weixin_46703930/article/details/107283951
上一篇： 以手机为中心的物联网布局必将失败