网上书城项目

前言
- 书籍分类
- - 效果演示
- 新书上架
- - 效果演示
- 热销图书
- - 效果演示
  - 注意要点
总结

前言

嘿，今天为大家分享的知识点呢，是后台编码实现前端页面上的书籍分类、新书上架、热销图书这三个主要功能~

当然，这篇博客也是接着之前的内容来的，博主在此奉上链接：

1、网上书城项目需求分析、功能划分

2、网上书城项目前端页面设计

3、网上书城项目登录、注册功能实现

书籍分类

首先，今天分享的第一个知识点当然是书籍分类啦~

实现书籍分类通常有两种方式：

1、使用c:forEach标签的方式将数据进行遍历展示
2、使用ajax局部刷新的方式将数据进行遍历展示

前者方式的不足则在于要向后台发送多次请求,等到页面的数据返回时,才能展示出所有数据~

而后者则恰恰相反，是当你点击到这个页面时,不管你存不存在这个页面,会先给你打开该页面,再去局部刷新该页面的数据~

根据当前市场上电商网站使用的趋势来看，ajax局部刷新的方式相较于c:forEach标签的方式要使用得多！

效果演示

最终使用ajax进行局部刷新的方式实现的书籍分类就是上面这个样子了~

1、先写一个dao方法查询出所有类别，并且注释掉你html写的关于书籍分类的内容

dao层：

package com.wangqiuping.dao;import java.sql.SQLException;
import java.util.List;
import com.wangqiuping.entity.Categroy;
import com.wangqiuping.util.BaseDao;
import com.wangqiuping.util.PageBean;
/*** * @author 小汪同学  2020年7月4日 下午11:01:13**/
public class CategroyDao extends BaseDao<Categroy>{public  List<Categroy>  list(Categroy categroy,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{String sql="select * from t_easyui_category";return super.executeQuery(sql,Categroy.class,pageBean);
}
}

action层：

共用一下书籍类别下拉框组件加载的这个方法

package com.wangqiuping.action;import java.sql.SQLException;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wangqiuping.dao.CategroyDao;
import com.wangqiuping.entity.Categroy;
import com.wangqiuping.framework.ActionSupport;
import com.wangqiuping.framework.ModelDriven;
import com.wangqiuping.util.ResponseUtil;
/*** * @author 小汪同学  2020年7月4日 下午11:04:06**/
public class CategroyAction extends ActionSupport implements ModelDriven<Categroy>{private Categroy    categroy=new Categroy();
private CategroyDao categroyDao=new CategroyDao();@Override
public Categroy getModel() {// TODO Auto-generated method stubreturn categroy;
}//书籍类别下拉框组件加载
public  String comboBox(HttpServletRequest req,HttpServletResponse resp) {try {List<Categroy> list = this.categroyDao.list(categroy, null);try {ResponseUtil.writeJson(resp,list);}catch (Exception e) {e.printStackTrace();}}catch (InstantiationException e) {e.printStackTrace();}catch (IllegalAccessException e) {e.printStackTrace();}catch (SQLException e) {e.printStackTrace();}return null;
}
}

需要注释掉的数据：

2、再写一个js展示出data的数据，看能否得到data中的数据，再进行下一步的操作

初步用来测试的js文件:

$(function(){var  ctx=$("#ctx").val();
// 当浏览器访问到http://localhost:8080/Easyui_Test/index.jsp
// ajax要加载书籍列表的数据$.ajax({url:ctx+'/categroy.action?methodName=comboBox',success:function(data){//使用success的回调函数data=eval('('+data+')');//得到的是一个josn对象debugger;alert(data);}});
})

就像下面这样，在js中使用debugger进行调试，看data数据是不是我注释掉的数据~

如果是，我们继续下一步的操作

获取这<li class="list-group-item">现代言情</li>串

for(i in data){$(".list-group").append('<li class="list-group-item">现代言情</li>'); }

获取到<li class="list-group-item">现代言情</li>之后，页面上得到的数据是这个样子的：

可见所有的类型都变成一样的了，说明还没有动态加载类别中的数据!

动态加载出书籍分类中的类别数据：

for(i in data){$(".list-group").append
('<li class="list-group-item">'+data[i].name+'</li>');
}

data[i].name ----- 获取data数组中书籍分类的名称

到这一步，是不是发现原有的样式不见了，那么我们给它加上：

背景样式：

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

最终的js文件：

$(function(){var  ctx=$("#ctx").val();
// 当浏览器访问到http://localhost:8080/Easyui_Test/index.jsp
// ajax要加载书籍列表的数据$.ajax({url:ctx+'/categroy.action?methodName=comboBox',success:function(data){//使用success的回调函数data=eval('('+data+')');//得到的是一个josn对象for(i in data){$(".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');});}}});
})

最终展示的效果如上图所示~

新书上架

使用到的数据库表格:

t_easyui_book表格

sql语句:

先判断是否上架再按照上架时间排序

select * from t_easyui_book where state=2 order by deployTime desc limit 12

新书上架的数据：

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 12";return executeQuery(sql,Book.class,pageBean);
}

action层：

//新书上架public String news(HttpServletRequest req,HttpServletResponse resp) throws Exception {try {List<Book> news = this.bookDao.news(null,null);ResponseUtil.writeJson(resp,Result.ok(news));}catch (InstantiationException e) {e.printStackTrace();}catch (IllegalAccessException e) {e.printStackTrace();}catch (SQLException e) {e.printStackTrace();}return  null;}

新书上架（使用到了递归）

 $.ajax({url:ctx+'/book.action?methodName=news',success:function(data){//使用success的回调函数data=eval('('+data+')');//得到的是一个josn对象debugger;alert(data);}});

新书的data数据展示：

递归：自己调用自己

如果要将新书上架的数据进行换行的话，要加上这些：

<div class="row book">书籍的各种信息以及内容</div>

给news container所属的div添加row或者列，也就是追加书籍：

appendBookDiv($(".news"),data.data,0,"");

最终的js文件：

$(function(){var  ctx=$("#ctx").val();//加载上架新书$.ajax({url:ctx+'/book.action?methodName=news',success:function(data){//使用success的回调函数data=eval('('+data+')');//得到的是一个josn对象
//     给news container所属的div添加row或者列 appendBookDiv($(".news"),data.data,0,"");    }});
}

新书上架和热销书籍通用的js文件：

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

效果演示

热销图书

sql语句：

先判断是否上架再按照销量排序

select * from t_easyui_book where state=2order by sales desc limit 12

热销图书展示的数据:

action层：

//热销图书
public String hots(HttpServletRequest req,HttpServletResponse resp) throws Exception {try {List<Book> hots = this.bookDao.hots(null,null);ResponseUtil.writeJson(resp,Result.ok(hots));}catch (InstantiationException e) {e.printStackTrace();}catch (IllegalAccessException e) {e.printStackTrace();}catch (SQLException e) {e.printStackTrace();}return  null;}

js文件：

$(function(){var  ctx=$("#ctx").val();
//  热销图书（递归）$.ajax({url:ctx+'/book.action?methodName=hots',success:function(data){data = eval('('+data+')');
//          给news container所属的div添加row或者列appendBookDiv($(".hots"),data.data,0,"");}});
})

效果演示

注意要点

因为t_easyui_book中使用的图片是绝对路径，所以刚开始可能会出现这种情况：

解决方案：

使用图片映射，也就是在Tomcat中的Servers服务器下找到server.xml文件，并且在host标签下加上这一行代码就欧克

<Context path="/uploadImages" docBase="F:/Y1/uploadImages/"/>

其中docBase是电脑磁盘具体路径，path是页面中的路径

改完server.xml文件后记得重新启动Tomcat服务器~

改完这些之后就可以出现以上的图片效果啦~

总结

网上书城项目的书籍分类、新书上架、热销图书就分享到这啦，实体类比较简单，就不粘贴出来了，欢迎评论留言交流噢，拜拜~

网上书城项目之后台实现书籍分类、新书上架、热销图书相关推荐

网上书城之动态实现前端界面书籍分类新书上架热销书籍
前言之前实现了后台的登录注册,这一次讲述一下后台获取数据源实现前台的部分功能. 通常这种效果我们有两种方式来实现: 1.前端界面使用foreach标签实现: 2.前端界面使用ajax获取数据我这次 ...
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言需实现的目标(效果图) 书籍分类展示新书上架展示热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)
网上书城项目总结 1 项目大纲设计: 需求分析系统设计详细设计权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...
网上书城项目的需求分析、数据库表设计及前端界面的编写（项目进度一）
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自不怕报错就怕不报错的小猿猿的博客网上书城项目的需求分析. ...
java-net-php-python-springboot网上书城项目计算机毕业设计程序
java-net-php-python-springboot网上书城项目计算机毕业设计程序 java-net-php-python-springboot网上书城项目计算机毕业设计程序本源码技术栈: ...
JavaWeb网上书城项目总结（初步1.0）
JavaWeb网上书城项目总结目录项目背景与目标成员组成模块划分数据库设计功能分析+源码经验总结 (逐步放上博客,先总结) 成员组成组长:林俊豪(本人) 组员:温尧皓.麦乙迪.邓梓鹏. ...
网上书城项目描述（本人原创可以借鉴经验，但请勿抄袭）
网上书城项目描述一.项目概述&架构 1.项目概述最近参与了一个网上书城的项目开发,它是一个B2C模式的电商网站,我们在开发过程中采用了前后端分离的开发模式,前端采用了vue框架,后端采用了 ...
叮当网上书城项目简介
叮当网上书城项目一.项目功能 1.前台功能图书基本展示,包括推荐图书展示和类图书类型展示. 推荐图书包括条幅推荐,热销推荐和新品推荐. 按照图书类型展示商品. 图书详细信息展示. 图书加入购物车. ...
【Java - 项目开发】网上书城项目
网上书城项目创作日期:2021-12-23 第一阶段登录注册的验证(表单验证) 技术方法: 使用 jQuery 技术对登录中的用户名.密码进行非空验证使用 jQuery 技术和正则表达式对注册中 ...

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

网上书城项目

前言

书籍分类

效果演示

新书上架

效果演示

热销图书

效果演示

注意要点

总结

网上书城项目之后台实现书籍分类、新书上架、热销图书相关推荐

最新文章

热门文章