网上书城动态书籍分类，新书上架，热销图书

前言

本章给大家分享的是网上书城项目的动态加载书籍分类，以及用递归的方式加载新书上架和热销书籍。

效果图展示

书籍分类动态加载效果图

数据库数据

新书上架和热销书籍效果图

数据库数据

实现步骤及源代码

书籍分类动态加载
1.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);
  }

2.action

public class CategoryAction extends ActionSupport implements ModelDriven<Category> {
    
    
    private Category category = new Category();
    private CategoryDao categoryDao = new CategoryDao();
   public String list(HttpServletRequest request, HttpServletResponse response){
    
    
        try {
    
    
            List<Category> list = categoryDao.list(category, null);
            ResponseUtil.writeJson(response,list);
        } catch (Exception e) {
    
    
            e.printStackTrace();
        }
        return null;
    }
@Override
    public Category getModel() {
    
    
        return category;
    }
}

3.js代码

$(function() {
    
    
 var ctx =$("#ctx").val();
 //当浏览器访问index.jsp.ajax要加载数据的时候
 $.ajax({
    
    
  url:ctx+'/category.action?methodName=list',
  success:function(data){
    
    
   data = eval('('+data+')');
   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');
    });
   }
  }
 });

4.jsp页面代码

<div class="col-sm-3 l-content">
    <ul class="list-group c-category">
     <li class="list-group-item text-white">书籍分类</li>
    </ul>
   </div>

新书上架，热销书籍

1.dao方法

/**
 * 门户新书上架的数据
 * @param book
 * @param pageBean
 * @return
 * @throws Exception
 */
 public List<Book> news(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);
 }
 /**
  * 门户的热销数据
  * @param book
  * @param pageBean
  * @return
  * @throws Exception
  */
 public List<Book> host(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);
 }

2.action

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

 public String host(HttpServletRequest req,HttpServletResponse resp) {
    
    
     try {
    
    
   List<Book> news = this.bookDao.host(null, null);
   ResponseUtil.writeJson(resp,Result.ok(news));
  } catch (Exception e) {
    
    
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return null;
 }

3.js代码

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

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

function appendBookDiv($node,data,level,htmlstr){
    
    
// 第一行：0~5
 var start = level * 6;
 // data的数据12条
 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" style="width: 90px;">';
  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);
 }
}

4.jsp页面代码

<!-- 新书 -->
    <div class="news container">
     <div class="tip row">
      <img
       src="${pageContext.request.contextPath }/static/imgs/title_bj.png">
      <h5 class="text-white">新书上架</h5>
     </div> 
    </div>

<div class="hots container">
     <div class="tip row">
      <img
       src="${pageContext.request.contextPath }/static/imgs/title_bj.png">
      <h5 class="text-white">热销图书</h5>
     </div>
    </div>