mvc&EasyUI项目用户首页功能

1书籍搜索
 

页面搜索

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

BookDao

/**
	 * 查询书籍 当前台传值再根据条件查询
	 * @param b
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<EasyuiBook> list(EasyuiBook b, PageBean pageBean) throws Exception {
		String sql = "select * from t_easyui_book where 1=1 ";
		int state = b.getState();
		String name = b.getName();
		long cid = b.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, EasyuiBook.class, pageBean);

	}

子控制器（BookAction）

/**
	 * 按照数据类别查询对应书籍
	 * 从首页index.JSP传递书籍类别到后台查询
	 * 通过类别ID查询到对应书籍集合到前台遍历
	 * @param req
	 * @param resp
	 * @return
	 * @throws Exception
	 */
	public String findByType(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean p=new PageBean();
		p.setRequest(req);
		List<EasyuiBook> list = bdao.list(b, p);
		req.setAttribute("books", list);
		req.setAttribute("pagebean", p);
		return "findbook";
	}

配置mvc.xml

<action path="/EasyuiBook" type="com.wyy.Action.EasyuibookAction">
        <forward name="findbook" path="/fg/findBook.jsp" redirect="false" />
    </action>

2 新书上架

BookDao

根据书籍状态以及上架时间进行排序 

public List<EasyuiBook> newbook(EasyuiBook b,PageBean p) throws Exception{
		String sql="SELECT * FROM t_easyui_book where state=2 ORDER BY deployTime DESC limit 0,7";
		return super.executeQuery(sql, EasyuiBook.class, p);
	}

子控制器（BookAction）

将查询出的数据输出到前端

public String newbook(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		List<EasyuiBook> newbook = bdao.newbook(b, null);
		ResponseUtil.writeJSON(resp, newbook);
		return null;
	}

 js

当页面加载完，ajax访问后台，通过后台输出结果，进行样式拼接

$.ajax({
            url: '${pageContext.request.contextPath}/EasyuiBook.action?methodName=newbook',
            dataType: "json",
            success: function (data) {
                console.log(data);
                single_item($(".c-category:eq(0)"), data, 0, "");

                // debugger;
            }
        });

 single_item方法 

使用递归算法，进行拼接每一行显示6个。

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

3热销书籍 

BookDao

	public List<EasyuiBook> salesall(EasyuiBook b,PageBean p) throws Exception{
		String sql="SELECT * FROM t_easyui_book where state=2 ORDER BY sales DESC limit 0,7";
		return super.executeQuery(sql, EasyuiBook.class, p);
	}

 子控制器（BookAction）

public String salesall(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		List<EasyuiBook> list = bdao.salesall(b, null);
		ResponseUtil.writeJSON(resp, list);
		return null;
	}

热销书籍js 

  //   热销书籍
        $.ajax({
            url: '${pageContext.request.contextPath}/EasyuiBook.action?methodName=salesall',
            dataType: "json",
            success: function (data) {
                console.log(data);
                single_item($(".c-category:eq(1)"), data, 0, "");

                // debugger;
            }
        });