门户首页功能(新书上架)

最新推荐文章于 2024-07-19 17:34:15 发布

捞起月亮的渔夫！！！

最新推荐文章于 2024-07-19 17:34:15 发布

阅读量150

点赞数

文章标签： easyui sql

本文链接：https://blog.csdn.net/m0_54546762/article/details/120605850

版权

一.新书上架

1.Dao方法（根据时间降序）

public List<Book> news(Book book, PageBean pageBean) throws Exception {
		// TODO Auto-generated method stub
		String sql="select * from t_easyui_book where state=2 order by deployTime desc limit 0,8";
		
		return super.executeQuery(sql, Book.class, pageBean);
	}

2.子控制器

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

3.①.前端返回的是jsonArr数组
②.页面要显示html样式


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

③.当json数组0-5产生一个新的row 6-11产生第二列row
④.最终拼成一个完整的html串
所以使用了递归(自己调自己,一定有递归的结束条件)

        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> hots(Book book, PageBean pageBean) throws Exception {
		// TODO Auto-generated method stub
		String sql="select * from t_easyui_book where state=2 order by sales desc ";
		
		return super.executeQuery(sql, Book.class, pageBean);
	}

2.子控制器

	public String hots(HttpServletRequest req, HttpServletResponse resp) {
			try {
				
				List<Book> lists = bookDao.hots(book, null);
				
				ResponseUtil.writeJson(resp, lists);
			} catch (Exception e) {
				e.printStackTrace();
			}
			return "findBook";
		}

3.前端渲染

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

4.index.jsp整体代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>网上书城首页</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div class="container">
    <div class="row head">
        <div class="col-md-12">
            <i>
                您好，欢迎来到飞凡网上书店！
            </i>
            <b>
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
                <a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
            </b>
        </div>
    </div>
    <!-- 横幅搜索栏 start -->
    <div class="row banner">
        <div class="img1"></div>
        <div class="col-md-12">
            <form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post">
                <%--<input type="hidden" name="methodName" value="findByName">--%>
                <input type="text" name="name" value="" id="input" class="search">
                <input type="submit" class="btn btn-primary" value="查询">
            </form>
        </div>
    </div>
    <!-- 横幅搜索栏 end -->
    <!-- 页面主体内容 start -->
    <div class="row content">
        <div class="col-md-3 float-left c-left">
            <ul class="list-group">
                <li class="list-group-item">书籍分类</li>
                <%--<li class="list-group-item">999999999999999999999999999999999999</li>--%>
            </ul>
        </div>
        <div class="col-md-9 float-right c-right">
            <div class="row">
                <div class="col-md-12">
                    <img class="img-fluid" src="${pageContext.request.contextPath}/static/img/banner.png">
                </div>
            </div>
            <div class="row c-category">
                <div class="col-md-12 text-left">
                    <img src="${pageContext.request.contextPath}/static/img/title_bj.png">
                    <h3>新书上架</h3>
                </div>
            </div>

            <%--<div class="row">--%>
            <%--<div class="col-md-2">--%>
            <%--<figure class="figure">--%>
            <%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
            <%--<figcaption class="figure-caption">--%>
            <%--<p>小说名字</p>--%>
            <%--<i class="text-danger">价格</i>--%>
            <%--</figcaption>--%>
            <%--</figure>--%>
            <%--</div>--%>
            <%--</div>--%>

            <div class="row c-category">
                <div class="col-md-12 text-left">
                    <img src="${pageContext.request.contextPath}/static/img/title_bj.png">
                    <h3>热销图书</h3>
                </div>
            </div>

            <%--<div class="row">--%>
                <%--<div class="col-md-2">--%>
                    <%--<figure class="figure">--%>
                        <%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
                        <%--<figcaption class="figure-caption">--%>
                            <%--<p>小说名字</p>--%>
                            <%--<i class="text-danger">价格</i>--%>
                        <%--</figcaption>--%>
                    <%--</figure>--%>
                <%--</div>--%>
            <%--</div>--%>

        </div>
    </div>
    <!-- 页面主体内容 end -->
    <!-- 网站版权 start -->
    <div class="row text-center footer">
        <div class="col-md-12">
            Copyright ©2014 飞凡教育，版权所有
        </div>
    </div>
    <!-- 网站版权 end -->
</div>

<script type="text/javascript">
    function searchByType(cid){
        location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
    };

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

        //   热销书籍
        $.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;
            }
        });

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


</script>
</body>
</html>

5.运行结果

捞起月亮的渔夫！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
门户首页功能(新书上架)

一.新书上架1.Dao方法（根据时间降序）public List<Book> news(Book book, PageBean pageBean) throws Exception { // TODO Auto-generated method stub String sql="select * from t_easyui_book where state=2 order by deployTime desc limit 0,8"; return super.exec
复制链接

扫一扫