网上书城_前端动态加载类别and书籍显示

动态加载类别
- 代码
- 效果
新书上架
- 代码
- 效果
热销图书
- 代码
- 效果
问题解决

动态加载类别

网页的类别菜单如果是静态的话，如果后期有改动就比较麻烦，而且不好操作，所有我们这里用的是动态加载类别菜单，
而动态加载类别后台实现也有两种方式

使用c:forEach标签
使用ajax
相比较之下，if,else代码比较多，而且加载网页的时候可能会出现卡顿延迟；而ajax它会先显示网页，数据可以后续跟上，局部加载刷新，比如京东，淘宝网页。

代码

jsp页面

<div class="col-sm-3 l-content"><ul class="list-group c-category "><li class="list-group-item" style="color: white;">书籍分类</li></ul>
</div>

js文件

$(function(){var ctx=$("#ctx").val();
//加载左侧书籍类别$.ajax({url:ctx+'/category.action?methodName=list',success:function(data){data=eval('('+data+')');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');});}}});});

mvc配置

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/category" type="com.wangjuanxia.web.CategoryAction"></action>
</config>

action

package com.wangjuanxia.web;
public class CategoryAction extends ActionSupport implements ModelDriver<Category>{private Category category=new Category();private CategoryDao cd=new CategoryDao();@Overridepublic Category getModel() {// TODO Auto-generated method stubreturn category;}public String list(HttpServletRequest req,HttpServletResponse resp) {try {List<Category> list = this.cd.list(category, null);ResponseUtil.writeJson(resp, list);} catch (InstantiationException e) {e.printStackTrace();} catch (IllegalAccessException e) {e.printStackTrace();} catch (SQLException e) {e.printStackTrace();} catch (ParseException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}return null;}
}

dao

package com.wangjuanxia.dao;public class CategoryDao extends BaseDao<Category>{public List<Category> list(Category c,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException, ParseException{String sql="select * from t_easyui_category where true";return super.executeQuery(sql, Category.class, pageBean);}
}

效果

新书上架

新书上架是直接按照上架时间排序前10个数据，分两排显示

代码

jsp页面

<!-- 新书上架 --><div class="news container"><div class="tip row"><img src="${pageContext.request.contextPath }/static/images/title_bj.png" /><h5 style="color: white;">新书上架</h5></div></div>

js文件

$(function(){var ctx=$("#ctx").val();//加载新书上架部分   (递归)$.ajax({url:ctx+'/book.action?methodName=news',success:function(data){data=eval('('+data+')');//1、给那个div追加html内容，2、具体的数据（或来源），3、标识当前是第几行内容，4、最终追加的htmlappendBookDiv($(".news"),data.data,0,"");}});
})

通用拼接方法，下面的热销图书也是调用的这个方法

function appendBookDiv($node,data,level,htmlstr){//第一行的数据应该是0-4var start=level*5;var len=data.length;htmlstr+='<div class="row book">'; for(i=start;i<start+5;i++){if(i==len){break;}htmlstr+='<div class="col-sm-2">';htmlstr+='<img src="/easyui_book/static/'+data[i].image+'" />';htmlstr+='<p>'+data[i].name+'</p>';htmlstr+='<b style="color: red;">￥'+data[i].price+'</b>';htmlstr+='</div>';}htmlstr+='</div>';level++;if(start+5>=len){$node.append(htmlstr);}else{appendBookDiv($node,data,level,htmlstr);}
}

mvc配置文件

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/book" type="com.wangjuanxia.web.BookAction"></action>
</config>

action

//新书上架public String news(HttpServletRequest req,HttpServletResponse resp) {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();} catch (ParseException e) {e.printStackTrace();} catch (Throwable e) {e.printStackTrace();}return null;}

dao

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

效果

热销图书

热销图书按照销售数量排序前10个数据，分两排显示

代码

jsp页面

<!-- 热销 --><div class="hots container"><div class="tip row"><img src="${pageContext.request.contextPath }/static/images/title_bj.png" /><h5 style="color: white;">热销图书</h5></div></div>

js文件

$(function(){var ctx=$("#ctx").val();//加载热销图书部分   (递归)$.ajax({url:ctx+'/book.action?methodName=hots',success:function(data){data=eval('('+data+')');//1、给那个div追加html内容，2、具体的数据（或来源），3、标识当前是第几行内容，4、最终追加的htmlappendBookDiv($(".hots"),data.data,0,"");}});
})

mvc配置文件

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/book" type="com.wangjuanxia.web.BookAction"></action>
</config>

action

//热销书籍public String hots(HttpServletRequest req,HttpServletResponse resp) {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();} catch (ParseException e) {e.printStackTrace();} catch (Throwable e) {e.printStackTrace();}return null;}

dao

//前端热销书籍
public  List<Book> hots(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException, ParseException{String sql="select * from t_easyui_book where state=2 order by sales desc limit 10 ";return executeQuery(sql,Book.class,pageBean);
}

效果

问题解决

问题1

解决1
在ajax的函数入口调用appendBookDiv时，将具体的数据（或来源）的data后加个.data就可以了

问题2
出现莫名的字符

解决2
在ajax的函数入口调用appendBookDiv时，将最终追加的html直接放一个空字符串就可以了
如：

网上书城_前端动态加载类别and书籍显示相关推荐

html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
arcengine 加载地图不显示_layUi的html页面动态加载的元素不显示
值有,就是这个动态元素在ui上闪了一下就消失了求大佬帮助!!!html(layui)如下: <form class="layui-form layui-form-pane" ...
Coolite动态加载CheckboxGroup,无法在后台中获取
Coolite在后台动态加载CheckboxGroup,页面显示都正常,但是在后台去获取选中的checkbox时,使用下方法: /// <summary> ...
HTML卡片式布局源码,html5自适应卡片式设计动态加载整站源码_
html5自适应卡片式设计动态加载整站源码该模板是非常容易存活的,这样的程序很容易吸引访客点击,提升ip流量和pv是非常有利的,随意挂点联盟广告都能养活程序. 本套整站源码采使用现在非常流行的全屏自 ...
htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...
动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据
主题场景切换场景间数据传递方式小游戏全局背景音效特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...
python爬取动态网页图片_python爬虫之爬取动态加载的图片_百度
运行坏境 python3.x 选择目标--百度当我们在使用右键查看网页源码时,出来的却是一大堆JavaScript代码,并没有图片的链接等信息因为它是一个动态页面嘛.它的网页原始数据其实是没有这个 ...
java类加载器架构设计_类加载器（DexClassLoader）与插件化（动态加载）
类加载器与插件化解析 2.1 类装载器 DexClassLoader 首先,我们需要了解关于java代码本地import的一些知识: import中所引用的类有两个特点: 1.必须存在于本地,当程序运 ...
go语言不支持动态加载_动态语言支持
go语言不支持动态加载本文是我们名为" 高级Java "的学院课程的一部分. 本课程旨在帮助您最有效地使用Java. 它讨论了高级主题,包括对象创建,并发,序列化,反射等. 它 ...
spi 动态加载、卸载_理解 ServiceLoader类与SPI机制
对于Java中的Service类和SPI机制的透彻理解,也算是对Java类加载模型的掌握的不错的一个反映. 了解一个不太熟悉的类,那么从使用案例出发,读懂源代码以及代码内部执行逻辑是一个不错的学习方式 ...

网上书城_前端动态加载类别and书籍显示

网上书城_前端动态加载类别and书籍显示

动态加载类别

代码

效果

新书上架

代码

效果

热销图书

代码

效果

问题解决

网上书城_前端动态加载类别and书籍显示相关推荐

最新文章

热门文章