前言

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

项目功能
网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）.
网上书城项目的注册、登录功能及按照权限登录功能（项目进度二）.
网上书城项目的后台功能未上架查询、上架及下架书籍（项目进度三）.
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）.

需实现的目标（效果图）

书籍分类展示

新书上架展示

热销书籍展示

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.3 CategoryAction调用dao方法

public class CategoryAction extends ActionSupport implements ModelDriver<Category>{private Category category =new Category();private CategoryDao categoryDao =new CategoryDao();@Overridepublic Category getModel() {// TODO Auto-generated method stubreturn 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.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");});}}})

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

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

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~5var 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);}
}

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

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

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~5var 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);}
}

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="data:images/banner.png" class="img-thumbnail" alt="..."></div><!-- 新书 --><div class="news container"><div class="tip row"><img src="data:images/title_bj.png"><h5 class="text-white" style="color: white;">新书上架</h5></div></div><!-- 热销 --><div class="hots container"><div class="tip row"><img src="data: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>

5.总结

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

网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）相关推荐

1. 网上书城之门户首页及新书上架，热销书籍

   网上书城之门户首页及新书上架,热销书籍 目录 网上书城之门户首页及新书上架,热销书籍 实现功能 门户首页功能 新书上架,热销书籍 总结 实现功能 继上几篇博客的代码 我打算把各种功能的代码一一清楚的写 ...

2. 网上书城项目之后台实现书籍分类、新书上架、热销图书

   网上书城项目 前言 书籍分类 效果演示 新书上架 效果演示 热销图书 效果演示 注意要点 总结 前言 嘿,今天为大家分享的知识点呢,是后台编码实现前端页面上的书籍分类.新书上架.热销图书这三个主要功能 ...

3. 网上书城首页之书籍分类列表

   网上书城首页之书籍分类列表 本章目标.实现首页书籍分类列表 一.开始编写代码 1.主界面index.jsp 2.单独写一个事件,和后台事件分开 index.js代码 3.然后在界面后面引用js 现在的 ...

4. 网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)

   网上书城项目总结 1 项目大纲设计: 需求分析 系统设计 详细设计 权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...

5. 网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）

   转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 网上书城项目的需求分析. ...

6. JavaWeb网上书城项目总结（初步1.0）

   JavaWeb网上书城项目总结 目录 项目背景与目标 成员组成 模块划分 数据库设计 功能分析+源码 经验总结 (逐步放上博客,先总结) 成员组成 组长:林俊豪(本人) 组员:温尧皓.麦乙迪.邓梓鹏. ...

7. 网上书城项目描述（本人原创可以借鉴经验，但请勿抄袭）

   网上书城项目描述 一.项目概述&架构 1.项目概述 最近参与了一个网上书城的项目开发,它是一个B2C模式的电商网站,我们在开发过程中采用了前后端分离的开发模式,前端采用了vue框架,后端采用了 ...

8. 叮当网上书城项目简介

   叮当网上书城项目 一.项目功能 1.前台功能 图书基本展示,包括推荐图书展示和类图书类型展示. 推荐图书包括条幅推荐,热销推荐和新品推荐. 按照图书类型展示商品. 图书详细信息展示. 图书加入购物车. ...

9. java-net-php-python-springboot网上书城项目计算机毕业设计程序

   java-net-php-python-springboot网上书城项目计算机毕业设计程序 java-net-php-python-springboot网上书城项目计算机毕业设计程序 本源码技术栈: ...

最新文章

1. Linux 备份及恢复 Linux 文件权限
2. 如何实现标准TCODE的屏幕增强
3. RFID图书管理系统程序源代码(转)
4. Java技术：为什么不推荐使用BeanUtils属性转换工具
5. python基础知识-8-三元和一行代码（推导式）
6. 微服务升级_SpringCloud Alibaba工作笔记0028---Nacos之Nacos集群配置下
7. 【广告技术】使用图神经网络进行信息聚合与推理，解决多证据事实验证问题
8. 【笔试/面试】—— 二叉树的深度和宽度
9. 博客目录 Blog directory
10. 基本概念学习--TaskList（任务列表）
11. html vba 单元格 格式,VBA设置单元格格式之——边框
12. B2B2C多用户商城系统源码 Java商城源码
13. 联想i微型计算机怎么拆,联想t410i如何拆机？联想t410i拆机方法【图文】
14. 软体机器人与类脑智能机器人
15. 先天八卦与后天八卦原理及区别
16. CSV文件分割工具开发-python版
17. html5在线编辑器效果和源码
18. Flowable流程设计器的使用
19. CTGU实验6_2-创建借书存储过程
20. EIGamal encryption VS Pairing encryption

热门文章

1. 计算机组成翟学明,东北大学秦皇岛分校组成原理课程设计.doc
2. 985中山大学珠海校区新成立人工智能学院和软件工程学院！
3. 【MySQL】修改配置后，重启MySQL报错[ERROR] The server quit without updating PID file
4. 浦东朋友夏天的时间线
5. 个人博客、开源文档的建站神仙组合 Vercel + Docusaurus
6. 梅耶尔欲从5方面带雅虎走向胜利！
7. 孙正义的12条成功之道
8. 计算机应用基础教程段永平,段永平
9. 0010基于单片机交通灯控制系统设计
10. 2021周记17：五一带妹妹坐了一次高铁