网上书城首页设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46705150/article/details/107256844

书籍分类和数据加载

在这里插入图片描述

index界面

<%@ 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>
<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 c-category">
                <div class="col-md-12 text-left">
                    <img src="${pageContext.request.contextPath}/static/img/title_bj.png">
                    <h3>热销图书</h3>
                </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.rows, 0, "");

                // debugger;
            }
        });

        //   热销书籍
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=hot',
            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.rows, 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>

dao


public class CategoryDao extends BaseDao<Category>{
	
	public List<Category> list(Category category,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql  ="select * from t_easyui_category";
		return super.executeQuery(sql, Category.class, pageBean);
	}

}

web

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

}

效果

在这里插入图片描述

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=hots',
		success:function(data){
			data = eval('('+data+')');
//			给news container所属的div添加row或者列
			appendBookDiv($(".hots"),data.data,0,"");
		}
	});

})

/*
 * 1、给哪个div追加html类容（jquery对象）
 * 2、最佳内容的数据来源
 * 3、标识当前是第几行内容
 * 4、最终追加的html
 */
function appendBookDiv($node,data,level,htmlstr){
	var ctx = $("#ctx").val();
//	第一行：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);
	}
}

dao

//	门户新书上架的书籍
	public List<Book> news(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_book where state =2 order by deploytime desc limit 10";
		return super.executeQuery(sql, Book.class, pageBean);
	}

//	门户热销书籍
	public List<Book> hots(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_book where state =2 order by sales desc limit 12";
		return super.executeQuery(sql, Book.class, pageBean);
	}
	
	public List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String name = book.getName();
		String sql = "select * from t_easyui_book where true ";
		if(StringUtils.isNotBlank(name)) {
			sql += " and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, Book.class, pageBean);
	}

Action

//    最新书籍
    public String news(HttpServletRequest request, HttpServletResponse response) {
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        try {
            List<Book> list = this.bookDao.newsBook(book, pageBean);
            ResponseUtil.writeJson(response, EasyuiResult.ok(pageBean.getTotal(), list));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    //    最热书籍
    public String hot(HttpServletRequest request, HttpServletResponse response) {
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        try {
            List<Book> list = this.bookDao.hotBook(book, pageBean);
            ResponseUtil.writeJson(response, EasyuiResult.ok(pageBean.getTotal(), list));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    //    加载书籍列表
    public String list(HttpServletRequest request, HttpServletResponse response) {
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        try {
            List<Book> list = this.bookDao.list(book, pageBean);
            ResponseUtil.writeJson(response, EasyuiResult.ok(pageBean.getTotal(), list));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }