书籍分类
代码
index
<%@ 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 href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />
<title>登录后的主界面</title>
</head>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }">
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好，欢迎来到飞凡网上书城 ！
</div>
<div class="col-sm-4 offset-sm-4">
<a href="#">登陆</a> | <a href="#">注册</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">
<div class="col-sm-3 l-content">
<ul class="list-group c-category">
<li class="list-group-item style="color: white;">书籍分类</li>
<li class="list-group-item">青春</li>
<li class="list-group-item">动作</li>
<li class="list-group-item">爱情</li>
<li class="list-group-item">惊悚</li>
<li class="list-group-item">青春</li>
<li class="list-group-item">动作</li>
<li class="list-group-item">爱情</li>
<li class="list-group-item">惊悚</li>
<li class="list-group-item">青春</li>
<li class="list-group-item">动作</li>
<li class="list-group-item">爱情</li>
<li class="list-group-item">惊悚</li>
</ul>
</div>
<div class="col-sm-9 r-content">
<!-- 广告 -->
<div class="guanggao">
<img src="${pageContext.request.contextPath }/static/imgs/banner.png" class="img-thumbnail" alt="...">
</div>
<!-- 新书 -->
<div class="news container">
<div class="tip row">
<img src="${pageContext.request.contextPath }/static/imgs/title_bj.png">
<h5 class="text-white">新书上架</h5>
</div>
<div class="row book">
<div class="col-sm-2" style="width: 90px;">
<img src="static/imgs/1.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/2.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/3.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/4.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/5.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/6.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
</div>
</div>
<!-- 热销 -->
<div class="hots container">
<div class="tip row">
<img src="${pageContext.request.contextPath }/static/imgs/title_bj.png">
<h5 class="text-white">热销图书</h5>
</div>
<div class="row book">
<div class="col-sm-2" style="width: 90px;">
<img src="static/imgs/7.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/8.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/9.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
<div class="col-sm-2">
<img src="static/imgs/8.png" >
<p>爱的种子</p>
<b>￥100</b>
</div>
</div>
</div>
</div>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright ©2020 卓京教育，版权所有
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/static/js/index.js"></script>
<script type="text/javascript">
$(function() {
})
</script>
</body>
</html>
js代码
// 当浏览器访问http://localhost:8080/T243_easyui/index.jsp，ajax要加载书籍列表的数据
$.ajax({
url:ctx+'/category.action?methodName=combobox',
success:function(data){
data = eval('('+data+')');
// <li class="list-group-item">青春</li>
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');
});
}
}
});
效果图
书籍展示
dao方法
// 门户新书上架的书籍
public List<Book> news(Book book,PageBean pageBean) throws Exception{
String sql = "select * from t_easyui_book where state =2 order by deploytime desc limit 10";
return super.executeQuery(sql, pageBean,Book.class);
}
// 门户热销书籍
public List<Book> hots(Book book,PageBean pageBean) throws Exception{
String sql = "select * from t_easyui_book where state =2 order by sales desc limit 12";
return super.executeQuery(sql, pageBean,Book.class);
}
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,"");
}
});
})
界面数据显示拼接
function appendBookDiv($node,data,level,htmlstr){
// 第一行：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);
}
效果图：
3328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
