15_实现浏览器记录

浏览记录

• 步骤分析
• 代码实现

---

1）步骤分析

使用技术：cookie

1. 进入一个商品详情页面的时候需要记录当前的商品id :
   < a href="${path}/product/particulars?pid=?">…</ a>
2. 需要在particulars方法中处理cookie
   • cookie名称：ids value：2-1-3
   • 获取指定的cookie：CookieUtils.getCookieName()
     通过request.getCookies()先获取cookie数组，然后遍历cookie，通过cookie的名称判断
     if(“ids”.equals(cookie.getName())){return cookie;}
   • 判断cookie是否为空
     ①若不为空：获取value值，继续判断value值中有无该商品的id（将字符串切割成list）
     * 若有：先移除，然后将商品id放入list的最前面
     * 若没有：继续判断list的长度是否>=3。若>=3，移除最后一个，将当前商品的id放入list的最前面；若<=3，将当前商品的id放入到list的最前面
     最后将list变为字符串
     ②若为空：将当前商品的id放入ids中即可

3.在product_list.jsp中需要将cookie里面的商品展示出来

• 需要在jsp中获取指定的cookie
• 判断cookie是否为空
  • 若不为空：获取value ，例如：3-1-2
  • 切割字符串获取每一个商品的id
  • 通过id去数据库中查找商品的信息

---

2）代码实现

① 在查询详情时把商品加入到cookie中

private void particulars(HttpServletRequest request, HttpServletResponse response) throws Exception{
	
	...
	//4、获取name为ids的cookie
	Cookie cookie=CookUtils.getCookieByName("ids", request.getCookies());
	
	//4.1 判断cookie是否为空
	if(cookie!=null) {
		//cookie不为空
		//1 先获取value值（value值形式为2-1-3），把value值切割为list
		String [] arrIds=cookie.getValue().split("-");
		List<String> idList=new ArrayList<>();//Arrays.asList(cookie.getValue().split("-"));
		//把数组中的元素依次放到集合中
		for(String id:arrIds) {
			idList.add(id);
		}
		//2、判断集合中是否已经包含当前商品
		if(idList.contains(pid)) {
			//如果包含，则移除该id
			idList.remove(pid);
			//再把该商品id放到list的第一位
			idList.add(0, pid);
		}else if(idList.size()>3) {//再继续判断list的长度是否大于3
			//大于3 则移除最后一个
			idList.remove(idList.size()-1);
			//再把该商品id放到list的第一位
			idList.add(0, pid);
		}else {
			//没有该id也不大于3,则直接放到第一个位置
			idList.add(0, pid);
		}
		//把idList改为字符串放入到cookie中
		String ids=idList.get(0);
		//遍历集合
		for(int i=1;i<idList.size();i++) {
			ids+="-"+idList.get(i);
		}
		cookie.setValue(ids);
	}else {
		//cookie为空，则直接将商品id放入到ids的cookie中
		cookie=new Cookie("ids", pid);
	}
	//cookie保存3天
	cookie.setMaxAge(3*24*60*60);
	//把cookie加入到response中
	response.addCookie(cookie);
	
	//请求转发
	request.getRequestDispatcher("/jsp/product_info.jsp").forward(request, response);
}

② 在product_list.jsp中上使用Ajax查询cookie中记录并展示

<ul id="historyId" style="list-style: none;">
</ul>
	
<!-- 游览记录展示 -->
<script type="text/javascript">
	$(function(){
		var ids='${cookie.ids}';
		//判断是否有浏览记录 是否有name为ids的cookie
		if(ids){
			//alert('${cookie.ids.value}');
			//发送Ajax请求
			$.ajax({
				type:"GET"
				,url:"${path}/product/findById?ids=${cookie.ids.value}"
				,dataType:"json"
				,success:function(data){
					//data为后台穿过来的list的json格式数据
					//alert(data);
					//1、获取ul 给ul一个id为menuId
					var $ul=$("#historyId");
					//2、遍历数组
					$(data).each(function(){
						$ul.append($("<li style='width: 150px;height: 216;float: left;margin: 0 8px 0 0;padding: 0 18px 15px;text-align: center;'>"
						+"<a href='${path}/product/particulars?pid="+this.pid+"'><img src='${path}/"+this.pimage+"' width='130px' height='130px' /></a></li>"));
					});
				}
			}
			);
		}
	});
</script>

③ 在ProductServlet中处理ajax请求findById

/**
 * 根据id查询单个商品--返回json数据
 * @param request
 * @param response
 */
private void findById(HttpServletRequest request, HttpServletResponse response) throws Exception{
	System.out.println(request.getParameter("ids"));
	//得到ids
	String [] ids=request.getParameter("ids").split("-");
	
	//创建一个集合用于存放查找到的商品
	List<Product> list=new ArrayList<Product>();
	System.out.println(Arrays.toString(ids));
	//遍历所有的id，把查找到的商品加入到集合中
	for(String id:ids) {
		list.add(productService.getById(id));
	}
	System.out.println(list);
	
	//处理联级对象，把对象中的category和pdate属性在转换为json是忽略
	JsonConfig config=JsonUtil.configJson(new String[]{"category","pdate"});
	
	//将集合转成json格式返回到页面
	JSONArray jsonArray = JSONArray.fromObject(list,config);
	//String json=JsonUtil.list2json(list);
	System.out.println(jsonArray.toString());
	//写回去
	response.setContentType("text/html;charset=utf-8");
	response.getWriter().println(jsonArray.toString());
}

④ 测试