门户首页功能

一、新书上架

1.先写dao方法，将上架的书查询

//新书上架
  public List<Book> news(Book book,PageBean pageBean) throws Exception {
      String sql = "select * from t_easyui_book where state=2 order by deployTime desc";
      return super.executeQuery(sql, Book.class, pageBean);
  }

2.子控制器

public String news(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<Book> news = bookDao.news(null, null);
			ResponseUtil.writeJson(resp, news);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, "2");
			} catch (JsonProcessingException e1) {
				e1.printStackTrace();
			} catch (IOException e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

将查询到的集合变成json串传到前端

3.前端渲染（ajax请求）

//   上架新书
        $.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;
            }
        });

4.single_item(）方法为样式的拼接

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);
            }
        }

使用递归的方法展示

二、热销书籍

1.dao方法

  //热门书籍
  public List<Book> hot(Book book,PageBean pageBean) throws Exception {
      String sql = "select * from t_easyui_book order by sales limit 1,8";
      return super.executeQuery(sql, Book.class, pageBean);
  }

2.子控制器内

public String hot(HttpServletRequest req, HttpServletResponse resp) {
		try {
			List<Book> hot = bookDao.hot(null, null);
			ResponseUtil.writeJson(resp, hot);
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, "2");
			} catch (JsonProcessingException e1) {
				e1.printStackTrace();
			} catch (IOException e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}

与新书上架一致

3.前端渲染

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

                // debugger;
            }
        });

页面效果

没显示出来的是没放图