项目之新书上架、热销书籍

一、本章目标

用代码实现动态新书上架、热销书籍

二、用到的SQL

已上架的书籍取前10条数据（根据最新上架时间最新10条）

#新书上架
select * from t_easyui_book where state=2 order by deploytime desc limit 10

已上架的书籍取前10条数据（根据热销最高10条）

#热销书籍
select * from t_easyui_book where state=2 order by sales desc limit 10

三、开始编码

在BookDao方法里添加两个方法（news，hots）

//	门户新书上架的书籍
	public List<Book> news(Book book,PageBean pageBean) throws Throwable{
		String sql = "select * from t_easyui_book where state=2 order by deploytime desc limit 10";
		return super.executeQuery(sql, pageBean, Book.class);
	}
//	门户的热销书籍
	public List<Book> hots(Book book,PageBean pageBean) throws Throwable{
		String sql = "select * from t_easyui_book where state=2 order by sales desc limit 10";
		return super.executeQuery(sql, pageBean, Book.class);
	}

在BookAction调用这两个方法

public String news(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Book> news = this.bookDao.news(null, null);
			//将数据写出去
			ResponseUtil.writeJson(resp, Result.ok(news));
		} catch (Throwable e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
		
	}
	public String hots(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Book> hots = this.bookDao.hots(null, null);
			//将数据写出去
			ResponseUtil.writeJson(resp, Result.ok(hots));
		} catch (Throwable e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;

写完后端开始写前端

在index.js里添加事件
加载新书(递归)

$.ajax({
		url:ctx+'/book.action?methodName=news',
		success:function(data){
			data=eval('('+data+')');
//			给news container所属的div添加row或者列	
			appendBookDiv($(".news"),data.data,0,"");
		}
	});

具备条件

• 1.给哪个div追加html内容（jQuery对象）
• 2.追加内容的数据来源
• 3.标识当前是第几行内容
• 4.最终追加的html

node：jquery对象
data：数据
level：第几行内容
htmlstr：htmlstr串

function appendBookDiv($node,data,level,htmlstr){
//	第一行0-5
	var start=level*5;
	
	var len=data.length;
	htmlstr+='<div class="row book">';

	for(i=start;i<start+5;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 style="color: red;">￥'+data[i].price+'</b>';
		htmlstr+='</div>';
	}
	htmlstr+='</div>';
	level++;
	if(start+6>=len){
		$node.append(htmlstr);
	}else{
		appendBookDiv($node,data,level,htmlstr);
	}
}

写完前端后测试，把主界面有关代码注释

<!-- <div class="row book">
							<div class="col-sm-2">
								<img src="img/2.png" />
								<p>第一商会</p>
								<b style="color: red;">￥20</b>
							</div>
							<div class="col-sm-2">
								<img src="img/2.png" />
								<p>第一商会</p>
								<b style="color: red;">￥20</b>
							</div>
							<div class="col-sm-2">
								<img src="img/2.png" />
								<p>第一商会</p>
								<b style="color: red;">￥20</b>
							</div>
							<div class="col-sm-2">
								<img src="img/2.png" />
								<p>第一商会</p>
								<b style="color: red;">￥20</b>
							</div>
							<div class="col-sm-2">
								<img src="img/2.png" />
								<p>第一商会</p>
								<b style="color: red;">￥20</b>
							</div>
							
						</div> -->

测试后的效果图

新书上架的效果出来了，热销书籍就简单了

复制粘贴下新书的事件将news改成hots就OK了

//	热销(递归)
	$.ajax({
		url:ctx+'/book.action?methodName=hots',
		success:function(data){
			data=eval('('+data+')');
//			给news container所属的div添加row或者列	
			appendBookDiv($(".hots"),data.data,0,"");
		}
	});

图片映射

这时候效果出来了，图片没出来，因为没有做图片映射所导致的问题。
需要在服务器中找到server.xml文件，添加图片映射。

将图片放在硬盘里的某个文件里（取决于自己），填写文件的路径。

扫描二维码关注公众号，回复： 11618614 查看本文章

四、最终效果

这样图片就出来了。