主页面加载书籍分类及图书绑定

书籍分类动态加载

如图从数据库获取数据加载：

数据库单独有一张表，只需要查询展示就可以了：

js文件

$.ajax({
		url:ct+'/category.action?methodName=combobox',
		success:function(data){
			data=eval('('+data+')');
			//<li class="list-group-item">玄幻</li>	
			
			for(i in data){
				$(".list-group").append('<li class="list-group-item">'+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');
				});	
			}	
		}
	})

dao方法

public List<Category> list(Category category,PageBean pageBean) throws Exception{
		String sql="select * from t_easyui_category where true";
		return super.executeQuery(sql, pageBean, Category.class);
	}
	

Action处理：

public String combobox(HttpServletRequest req,HttpServletResponse resp) {
	
	try {
		List<Category> list = this.cd.list(null, null);
		ResponseUtil.writeJson(resp, list);
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return null;

	
}

书籍展示

js方法：

	//加载新书上架
	$.ajax({
		url:ct+'/book.action?methodName=news',
		success:function(data){
//			debugger;
			data=eval('('+data+')');
			console.log(data);
	//给news 所属div添加row或列
			
			appendBookDiv($(".news"),data.date,0,"");
			
			
			
		}
		
	})
	
	
	
	
	
//热销书籍	
		$.ajax({
		url:ct+'/book.action?methodName=hots',
		success:function(data){
//			debugger;
			data=eval('('+data+')');
			console.log(data);
	//给news 所属div添加row或列
			
			appendBookDiv($(".hots"),data.date,0,"");
			
			
			
		}
		
	})
	
	
	
	
	
	
	
	
	
	
	
	
})
	/**
	 * 1.给哪个div追加html类容
	 * 2.最佳内容的数据来源
	 * 3.标识当前是第几行类容
	 * 4.最终追加的html
	 */
	
	function appendBookDiv($node,data,level,htmlstr){
	//第一行
		/*
		<img src="${pageContext.request.contextPath}/static/img/3.png" />
		<b style="color: red;">￥12</b>
	</div>*/
		var start=level * 6;
		
		var len= data.length;
		
		htmlstr += '<div class="row book">';
		
		for(i=start;i<start+6;i++){
			if(i==len) break;
			htmlstr += '<div class="col-sm-2" >';
			htmlstr += '<img src="'+data[i].image+'" >';
			htmlstr += '<p>'+data[i].name+'</p>';
			htmlstr += '<b>￥'+data[i].price+'</b>';
			htmlstr += '</div>';
		} 
		
		
		
		htmlstr += '<div>';
		level++;
		if(start+6>=len){
			$node.append(htmlstr);
		}else{
			appendBookDiv($node,data,level,htmlstr);
		}
	
		
		
		
		
		
	}

dao方法

	//门户新书上架
	public List<Book> newsbook(Book book,PageBean pageBean) throws Exception{
		String sql="select * from t_easyui_book where state=2 order by deployTime desc LIMIT 12";
		return super.executeQuery(sql,pageBean, Book.class );
	}
	
	
	
	//门户热销书籍
	public List<Book> hotsbook(Book book,PageBean pageBean) throws Exception{
		String sql="select * from t_easyui_book where state=2 order by sales desc LIMIT 12";
		return super.executeQuery(sql,pageBean, Book.class );
	}

Action处理

public String news(HttpServletRequest req,HttpServletResponse resp) {

	try {
		List<Book> newsbook = this.bookdao.newsbook(null, null);
		ResponseUtil.writeJson(resp, Result.ok(newsbook));
		
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}

	
	return null;
}



//门户热销书籍
public String hots(HttpServletRequest req,HttpServletResponse resp) {
	 try {
		List<Book> hots = this.bookdao.hotsbook(null, null);
		ResponseUtil.writeJson(resp, Result.ok(hots));
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	return null;
}

图片映射上传

最后为了加载图片使用了图片的映射，在tomcat中的server.xml文件中加入

deocBase是图片存放在本地的路径，path是我数据库中图片名的前缀如：