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

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

• • 一、本章目标
  • 二、用到的SQL
  • 三、开始编码
  • 在BookDao方法里添加两个方法（news，hots）
  • 在BookAction调用这两个方法
  • 写完后端开始写前端
  • 具备条件
  • 写完前端后测试，把主界面有关代码注释
  • 测试后的效果图
  • 新书上架的效果出来了，热销书籍就简单了
  • 图片映射
  • 四、最终效果

一、本章目标

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

二、用到的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 blocke.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 blocke.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-5var start=level*5;var len=data.length;htmlstr+='';for(i=start;i<start+5;i++){if(i==len) break;htmlstr+='';htmlstr+='[i].image+'" />';htmlstr+='
'+data[i].name+'
';htmlstr+='￥'+data[i].price+'';htmlstr+='';}htmlstr+='';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文件，添加图片映射。

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

四、最终效果

这样图片就出来了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！