网上书城项目（四）

目录

• 主页文本框搜索功能
• 左侧分类栏搜素功能
• 加入购物车（用户独立）

主页文本框搜索功能

首先在主页定义文本框，然后给搜索按钮添加点击事件

<input type="image" name="imageField" onclick="search()" id="searchImg"
							src="${pageContext.request.contextPath }/static/images/btn_search.png" />

  <script type="text/javascript">
   function search(){
	   var name=$("#input").val();
	   location.href="${pageContext.request.contextPath }/book.action?opt=search&name="+encodeURI(encodeURI(name));
   }
   </script>

点击后跳转至后台进行搜索：
web层：

public String search(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		PageBean pageBean =new PageBean();
		pageBean.setRequest(req);
		String  name ="";
		if(book.getName()!=null) {
			name =java.net.URLDecoder.decode(book.getName(),"utf-8");
		}
		book.setName(name);
		List<Book> list = this.bookDao.list(book, pageBean);
		req.setAttribute("bookList", list);
		req.setAttribute("pageBean", pageBean);
		return "search";
	}

然后根据return值和xml的配置跳转至搜索页显示：

<c:forEach items="${bookList }" var="b">
					<dl class="findbook">
						<dt class="left">
							<img src="${b.image }" />
						</dt>
						<dd class="right">
							<h4>${b.name }</h4>
							<strong>作者：</strong><p>${b.author }</p>
							<strong>价格：</strong><p>${b.price }</p>
							<strong>出版社：</strong><p>${b.publishing }</p>
							<strong>书籍简介：</strong><p>${b.description }</p>
							<p class="mt10">
								<a  href="#" onclick="mya(this)"><img
									src="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a
									href="#"><img
									src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a>
							</p>
						</dd>
						<div class="fixed"></div>
					</dl>
				</c:forEach>

效果图：
搜索框搜索会出现乱码问题，因为用的是loaction.href跳转，所以需要在前台加上这一行代码：

location.href="${pageContext.request.contextPath }/book.action?opt=search&name="+encodeURI(encodeURI(name));

后台加上转码：

URLDecoder.decode(book.getName(),"utf-8");

左侧分类栏搜素功能

书籍分类栏搜索功能实现：
在js的ajax代码中（具体见上篇博文），加上跳转：

//加载左侧书籍列表
	$.ajax({
		url:ctx+'/book.action?opt=combox',
		success:function(data){
			data =eval('('+data+')');
			for(i in data){
				$(".classify").append('<li><a href="'+ctx+'/book.action?opt=search&cid='+data[i].id+'">'+data[i].name+'</a></li>');
				$(".classify").append('<div class="fixed"></div>');
			}
		}
	});

就可以实现根据分类id搜索，效果图：

加入购物车（用户独立）

加入购物车是在搜索页进行点击事件后，加入到appliation中存储数据，首先就是对购物车所需字段进行对象化：

package com.xiaoyang.vo;


import java.util.Objects;
/**
 * 
 * @author xiaoyang
 *         2020年7月11日
 */
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) {
		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() {
	}
    
    
}

给加入购物车添加点击事件并传值：

<c:forEach items="${bookList }" var="b">
					<dl class="findbook">
						<dt class="left">
							<img src="${b.image }" />
						</dt>
						<dd class="right">
							<h4>${b.name }</h4>
							<strong>作者：</strong><p>${b.author }</p>
							<strong>价格：</strong><p>${b.price }</p>
							<strong>出版社：</strong><p>${b.publishing }</p>
							<strong>书籍简介：</strong><p>${b.description }</p>
							<p class="mt10">
								<a  href="#" onclick="mya(this)"><img
									src="${pageContext.request.contextPath }/static/images/btn_shopping.png" /></a><a
									href="#"><img
									src="${pageContext.request.contextPath }/static/images/btn_accounts.png" /></a>
							</p>
						</dd>
						<div class="fixed"></div>
					</dl>
				</c:forEach>

<script type="text/javascript">
	  function mya(node){
		 var $div=$(node).parent().parent();
		 var name = $div.find("h4").eq(0).html();
		 var price = $div.find("p").eq(1).html();
		 var pub = $div.find("p").eq(2).html();
	     location.href="${pageContext.request.contextPath }/shopping.action?opt=add&name="+encodeURI(encodeURI(name))+"&price="+encodeURI(encodeURI(price))+"&num=1"+"&total="+encodeURI(encodeURI(price));
	 } 
	</script>

web层：

package com.xiaoyang.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.xiaoyang.entity.User;
import com.xiaoyang.framework.Action;
import com.xiaoyang.framework.ModelDriver;
import com.xiaoyang.vo.ShoppingVo;

public class ShoppingAction extends Action 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) throws UnsupportedEncodingException {
		ServletContext ctx = req.getServletContext();
		//给每个用户增加一个编号
		String shopVo="shopcars_";
		User user =(User) req.getSession().getAttribute("user");
		String shopname=shopVo+user.getId();
		String name="";
		name =java.net.URLDecoder.decode(shoppingVo.getName(),"utf-8");
		shoppingVo.setName(name);
		//第一次添加时，购物车为空，第二次后添加有商品
		List<ShoppingVo> shopcars = (List<ShoppingVo>)ctx.getAttribute(shopname);
		/*if(shopcars==null||shopcars.size()== 0) {
			shopcars.add(shoppingVo);
			ctx.setAttribute("shopcars", shopcars);
		}else {
			
		}*/
		if(shopcars==null||shopcars.size()==0) {
			shopcars=new ArrayList<ShoppingVo>();
			shopcars.add(shoppingVo);
		}else {
			shopcars.add(shoppingVo);
		}
		ctx.setAttribute(shopname, shopcars);
		req.setAttribute("shoppingVo", shopcars);
		return "shop";
	}
}

这里给每个登录用户添加了一个识别id（用户id）,可根据其id进行显示对应购物车商品内容，效果图：

普通用户：
管理员：

本文地址：https://blog.csdn.net/qq_45510899/article/details/107285752