网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）_网上书店前端页面模板

前言

关于网上书城的这个项目，博主前面的博客写的都是管理员（老板）的后台功能及前端框架，今天我们来写前台门户（游客）的功能：书籍分类列表和新书上架、热销书籍展示功能，今天的功能与前面三个项目进度都有着一定的关系，所以博主在此也提供前面的项目进度（贯通联系也比较大），能让更多的程序员对此项目有一定的了解

需实现的目标（效果图）

书籍分类展示

新书上架展示

热销书籍展示

1.书籍分类展示（实现动态加载数据）

书籍分类展示的后台代码就是查询书籍分类表，前台则利用ajax无刷新方法加载数据出来

1.1 加载数据的方法（两种）

相当于有企业来说，例如京东淘宝这样的大型网站，一般都会采用ajax无刷新的方法去动态加载数据，而foreach遍历也不是说不用，少用，因为它发送多次请求，会非常占用内存，所以博主这里采用的是ajax无刷新的方法

1.2 书籍分类的后台代码（CategoryDao：书籍分类）

package com.xiaoqing.dao;

import java.sql.SQLException;
import java.util.List;

import com.xiaoqing.entity.Category;
import com.xiaoqing.util.BaseDao;
import com.xiaoqing.util.PageBean;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.3 CategoryAction调用dao方法

public class CategoryAction extends ActionSupport implements ModelDriver<Category>{

	private Category category =new Category();
	private CategoryDao categoryDao =new CategoryDao();
	@Override
	public Category getModel() {
		// TODO Auto-generated method stub
		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;
	}
	
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1.4 ajax加载书籍分类列表（当浏览器访问mainPag.jsp时）：easyUI_mainPag(CateGory).js文件

//书籍分类展示
$(function(){
	var ctx=$("#ctx").val();
//	当浏览器访问http://localhost:8080/xiaoqing_mvc_easyUIBook/mainPag.jsp时，ajax要加载书籍列表
	$.ajax({
		url:ctx+"/category.action?methodName=combobox",
		success:function(data){
			data=eval('('+data+')');
			for(i in data){
//				 <li class="list-group-item">青春</li>
				$(".list-group").append("<li class='list-group-item'>"+data[i].name+"</li>");
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass("bg-opacity");
				}, function() {
					$(this).removeClass("bg-opacity");
				});
			}
		}
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.新书上架展示的代码实现

2.1 BookDao（sql语句）：

//	新书上架
	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);
	}
1
2
3
4
5

2.2 BookAction（调用方法）：

//	新书上架
	public String news(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Book> news = this.bd.news(null, null);
			ResponseUtil.writeJson(resp, Result.ok(news));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.3 easyUI_mainPag(CateGory).js（注意方法放的位置）

//书籍分类展示
$(function(){
	var ctx=$("#ctx").val();
	
//	新书上架
	$.ajax({
		url:ctx+"/book.action?methodName=news",
		success:function(data){
			data=eval('('+data+')');
			appendBookDiv($(".news"),data.data,0,"");
		}
	})
	
//新书上架和热销书籍展示通用函数方法
/**
 * 
 * @param $node  ：给哪个div追加html内容（jQuery对象）
 * @param data ：最佳内容的数据来源（数组）
 * @param level ：标识当前是第几行内容
 * @param htmlstr ：最终追加的HTML
 * @returns
 */
function  appendBookDiv($node,data,level,htmlstr){
	var ctx=$("#ctx").val();
//	第一行 ：0~5
	var start=level*6;
//	data数组的长度大小
	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">';
		htmlstr+='<img src="'+ctx+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);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.热销书籍展示的代码实现

3.1 BookDao（sql语句）：

//	热销书籍
	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 11;";
		return super.executeQuery(sql, Book.class, pageBean);
	}
1
2
3
4
5

3.2 BookAction（调用方法）：

//	热销书籍
	public String hots(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<Book> hots = this.bd.hots(null, null);
			ResponseUtil.writeJson(resp, Result.ok(hots));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.3easyUI_mainPag(CateGory).js（注意方法放的位置）：书籍分类列表及新书上架展示都结合在一起了，上述是分开

//书籍分类展示
$(function(){
	var ctx=$("#ctx").val();
//	当浏览器访问http://localhost:8080/xiaoqing_mvc_easyUIBook/mainPag.jsp时，ajax要加载书籍列表
	$.ajax({
		url:ctx+"/category.action?methodName=combobox",
		success:function(data){
			data=eval('('+data+')');
			for(i in data){
//				 <li class="list-group-item">青春</li>
				$(".list-group").append("<li class='list-group-item'>"+data[i].name+"</li>");
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass("bg-opacity");
				}, function() {
					$(this).removeClass("bg-opacity");
				});
			}
		}
		
	})
	
//	新书上架
	$.ajax({
		url:ctx+"/book.action?methodName=news",
		success:function(data){
			data=eval('('+data+')');
			appendBookDiv($(".news"),data.data,0,"");
		}
	})
	
//	热销书籍
	$.ajax({
		url:ctx+"/book.action?methodName=hots",
		success:function(data){
			data=eval('('+data+')');
			appendBookDiv($(".hots"),data.data,0,"");
		}
	})
})


/**
 * 
 * @param $node  ：给哪个div追加html内容（jQuery对象）
 * @param data ：最佳内容的数据来源
 * @param level ：标识当前是第几行内容
 * @param htmlstr ：最终追加的HTML
 * @returns
 */
function  appendBookDiv($node,data,level,htmlstr){
	var ctx=$("#ctx").val();
//	第一行 ：0~5
	var start=level*6;
//	data数组的长度大小
	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">';
		htmlstr+='<img src="'+ctx+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);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

4.mainPag.jsp前端页面（这三个功能都共用同一页面）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fg.css" />
<!--导入js  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyUI_mainPag(CateGory).js"></script>  
<title>首页</title>
</head>
<!--隐藏域：项目名  -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }"> 
<body class="body">
		<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-3">
					您好，欢迎来到飞凡网上书店 ！
				</div>
				<div class="col-sm-3 col-sm-offset-6">
					<a href="login.jsp">登陆</a> | <a href="register.jsp">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!--搜索栏  -->
			<div class="row ">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!--主内容区  -->
			<div class="row content l-content">
				<div class="col-sm-3">
					<ul class="list-group c-category">
						<!-- 白色字体未出现 -->
						<li class="list-group-item text-white bg-color1" style="color: white;">书籍分类</li>
					</ul>
				</div>
				<div class="col-sm-9 r-content">
					<!-- 广告图片 -->
					<div class="guanggao">
						<img src="images/banner.png" class="img-thumbnail" alt="...">
					</div>
					<!-- 新书 -->
					<div class="news container">
						<div class="tip row">
							<img src="images/title_bj.png">
							<h5 class="text-white" style="color: white;">新书上架</h5>
						</div>
					</div>
					<!-- 热销 -->
					<div class="hots container">
						<div class="tip row">
							<img src="images/title_bj.png">
							<h5 class="text-white" style="color: white;">热销图书</h5>
						</div>
					</div>
				</div>
			</div>
			<hr color="#DFDFDF">
			<!--底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright ©2020 卓京教育，版权所有
				</div>
			</div>
		</div>
		<script src="css/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="css/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

5.总结

今日的功能，博主可能写的不够详细，如有不太懂的地方欢迎留言，谢谢，今日的重点知识在新书上架和热销书籍展示一行显示多少条数据，什么时候该换行，利用递归调用完成，自己调自己，今天博主的分享就到这里了，敬请期待网上书城这个项目的后续功能！！