书籍分类

代码
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~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: 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);}

效果图：

网上书城（商品展示）相关推荐

YC-B09(原创)基于springboot,vue网上书城
绪论课题的开发背景随着计算机和网络的快速发展,并且越来越普及,互联网日益成为人们收集信息常用渠道,电子商务开始流行,一种全新的理念不断形成并且快速发展,像国内电商巨头淘宝.京东.苏宁易购.唯品会 ...
网上书城java负责_网上书城项目总结(servlet_jsp+javaBean)
网上书城项目总结 1 项目大纲设计: 需求分析系统设计详细设计权限设计 2 技术选型: Servlet+jsp+javaBean Listener+Filter+jstl+fileupload+ ...
大项目之网上书城（八）——数据库大改添加图书
目录大项目之网上书城(八)--数据库大改&添加图书主要改动 1.数据库新增表代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改代码 4.addBook. ...
HTML期末作业-网上书城网上书店
HTML期末作业-网上书城网上书店,HTML+css+JavaScript,7个页面! 部分源码 <!DOCTYPE HTML> <html> <head> < ...
大项目之网上书城（十二）——完成啦
目录大项目之网上书城(十二)--完成啦主要改动新增代码 1.addCategory.jsp 效果图 2.bookManager.jsp 效果图 3.userManager.jsp 效果图 4.e ...
java web网上书城_javaweb网上书城项目
[实例简介] javaweb网上书城项目,采用ssh框架,mysql数据库. [实例截图] [核心代码] bookstore └── ssh_book ├── WebContent │ ├── M ...
基于ssm整合的网上书城
基于ssm整合的网上书城采用当前最流行的框架Spring-SpringMVC-MyBatis设计,分为前后台,前台用户可以购买书籍,后台管理员可以对书籍进行分类,增删改查注意:本系统不支持jdk1 ...
JAVA高级应用课程设计(网上书城系统——会员登陆模块的设计与实现)
课程设计报告课程名称: JAVA高级应用课程设计设计题目:网上书城系统--会员登陆模块的设计与实现目录一.开发背景. 1 (一)背景概述. 1 (二)发展前景 ...
SSM+网上书城系统毕业设计-附源码180919
目录摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...

网上书城（商品展示）

网上书城（商品展示）

书籍分类

书籍展示

网上书城（商品展示）相关推荐

最新文章

热门文章