easyui项目——网上书城&&新书上架以及热门书籍展示

课堂目标：

1，搜索

2，新书上架

3，热门书籍

一、书籍搜索

BookDao的搜索方法

public List<Book> list(Book book, PageBean pageBean) throws Exception {
        String sql="select * from t_easyui_book where 1=1";
        String name = book.getName();
        int state = book.getState();
        long cid=book.getCid();
        if(StringUtils.isNotBlank(name)) {
            sql += "and name like '%"+name+"%'";
        }
        if(state !=0) {
            sql +=" and state =" +state;
        }
        if(cid !=0) {
            sql +=" and cid =" +cid;
        }
        return super.executeQuery(sql, Book.class, pageBean);
    }

 Bookaction子控制器

    public String findByType(HttpServletRequest req, HttpServletResponse resp) {
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
             List<Book> list=bookDao.list(book, pageBean);
            req.setAttribute("books", list);
            req.setAttribute("pagebean", pageBean);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "findBook";
    }

 配置xml文件

<action path="/book" type="com.zking.web.BookAction">
    <forward name="findBook" path="/fg/findBook.jsp" redirect="false"></forward>
    </action>

 前台访问请求

<!-- 横幅搜索栏 start -->
    <div class="row banner">
        <div class="img1"></div>
        <div class="col-md-12">
            <form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByType" method="post">
                <%--<input type="hidden" name="methodName" value="findByType">--%>
                <input type="text" name="name" value="" id="input" class="search">
                <input type="submit" class="btn btn-primary" value="查询">
            </form>
        </div>
    </div>
    <!-- 横幅搜索栏 end -->

效果图：

 二、新书上架

bookDao

//Sql语句根据时间降序排序取前八个
//  新书上架:处于上架状态的书籍
  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 8";
      return super.executeQuery(sql, Book.class, pageBean);
  }

bookAtion

//  新书上架
  public void news(HttpServletRequest req, HttpServletResponse resp) {
      try {
          List<Book> list = bookDao.news(null, null);
          ResponseUtil.writeJson(resp, list);
      } catch (Exception e) {
          e.printStackTrace();
          try {
              ResponseUtil.writeJson(resp, 0);
          } catch (Exception e1) {
              e1.printStackTrace();
          }
      }
  }

前端js代码

1、前端返回的是JSON数组；

2、页面上要显示bootstrap的样式；

3、当我们的新书上架有八本时，但我们一行只需要六本，所以当JSON数组0~5时产生一个新的row，6~11时产生第二列，依次类推；

4、最终拼接成一个完整的HTML串，追加到相应的后面；（采用递归）

递归：

1、自己调自己；

2、一定有递归的结束条件；

递归拼接样式（index.jsp）

function single_item($node, data, level, htmlstr) {
            // debugger;
            var start = level * 6;
            htmlstr += '<div class="row">';

            for (var i = 0; i < 6; i++) {
                if (data.length == start) {
                    break;
                }
                htmlstr += '<div class="col-md-2">'
                htmlstr += '<figure class="figure">';
                htmlstr += '<img src="' + data[start].image + '" class="figure-img img-fluid rounded" alt="...">';
                htmlstr += '<figcaption class="figure-caption">';
                htmlstr += '<p>' + data[start].name + '</p>';
                htmlstr += '<i class="text-danger">' + data[start].price + '</i>';
                htmlstr += '</figcaption>';
                htmlstr += '</figure>';
                htmlstr += '</div>';
                start++;
            }
            htmlstr += '</div>';

            level++;
            if (start < data.length) {
                single_item($node, data, level, htmlstr);
            } else {
                $node.after(htmlstr);
            }
        }

访问后台事件

$(function () {
        //   上架新书
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=news',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(0)"), data, 0, "");
                // debugger;
            }
        });

})

效果展示

三、热门书籍

方法BookDao

//根据销量查询

public List<Book> hots(Book book, PageBean pageBean) throws Exception {
        String sql="select * from t_easyui_book where state=2 order by sales desc";
        return super.executeQuery(sql, Book.class, pageBean);
    }

子控制器BookAction

public void hots(HttpServletRequest req, HttpServletResponse resp) {
        try {
            List<Book> list = bookDao.hots(null, null);
            ResponseUtil.writeJson(resp, list);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                e1.printStackTrace();
            }
        }
    }

访问后台

 $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=hots',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(1)"), data, 0, "");

                // debugger;
            }
        });
 

展示结果