技术教程 门户书籍搜索&&加入购物车 正文

门户书籍搜索&&加入购物车

2022-08-06,,,

一、门户书籍搜索

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

《门户书籍搜索&&加入购物车.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!