网上书城的门户首页功能
门户首页功能
- 前言
- 门户首页功能所需的的dao,web及辅助类
- dao
- web
- 辅助类
- 首页界面
- 代码
- css样式
- js代码对应的界面
前言
门户首页功能是客户可以在这页面进行查看书籍
门户首页功能所需的的dao,web及辅助类
dao
bookDao 中新增两个门户新书上架,门户热销书籍的方法
// 门户新书上架的书籍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);}
web
bookAction 中新增newss,hotss两个方法
public String newss(HttpServletRequest request, HttpServletResponse response) {try {List<Book> newsBook = this.bookDao.news(null, null);ResponseUtil.writeJson(response,Result.ok(newsBook));} catch (Exception e) {e.printStackTrace();}return null;}public String hotss(HttpServletRequest request, HttpServletResponse response) {try {List<Book> hots = this.bookDao.hots(null, null);ResponseUtil.writeJson(response,Result.ok(hots));} catch (Exception e) {e.printStackTrace();}return null;}
辅助类
Result 响应结果集
package com.tang.util;
/*** (响应结果集)* @author Administrator** @param <T>*/
public class Result<T> {private int code;private String msg;private T data;public static Result SUCCESS = new Result<>(200,"操作成功");public static <T> Result ok(T data) {return new Result(data);}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public T getData() {return data;}public void setData(T data) {this.data = data;}private Result(int code, String msg) {super();this.code = code;this.msg = msg;}private Result() {super();}private Result(T data) {super();this.data = data;}}
首页界面
代码
index,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 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 text-white">书籍分类</li></ul></div><div class="col-sm-9 r-content"><!-- 广告 --><div class="guanggao"><img src="${pageContext.request.contextPath }/static/img/banner.png" class="img-thumbnail" alt="..."></div><!-- 新书 --><div class="news container"><div class="tip row"><img src="${pageContext.request.contextPath }/static/img/title_bj.png"><h5 class="text-white">新书上架</h5></div></div><!-- 热销 --><div class="hots container"><div class="tip row"><img src="${pageContext.request.contextPath }/static/img/title_bj.png"><h5 class="text-white">热销图书</h5></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></body>
</html>
css样式
fg.css
*{margin: 0;padding: 0;
}/* 搜索栏 start */
.search-parent{position: relative;height: 100px;/* text-align: center; */
}
.search{position: absolute;background-color: #D6CCBB;width: 1100px;height: 90px;
}
.search-parent input{position: absolute;top: 30px;left: 400px;z-index: 2;
}
.search-parent button{position: absolute;top: 27px;left: 570px;z-index: 2;
}
/* 搜索栏 end *//* 主内容区 start */
.bg-color1{background-color: #710503 ;
}
.bg-color2{background-color: #F7E4E4 ;
}
.bg-opacity{opacity: 0.3;
}
.c-category li{cursor: pointer;
}.guanggao>img{width: 690px;
}
.l-content{padding-right: 0;
}
.r-content{padding: 0;
}.tip{position: relative;height: 40px;/* width: 680px; *//* background-color: #F7F6F6; */
}
.tip>img{position: absolute;
}
.tip>h5{position: absolute;left: 8px;
}
.book img{width: 80px;height: 110px;
}
.book p{margin-bottom: 0;
}.shop-table button:nth-of-type(2){margin: 0 50px;
}
/* .shop-table-btn{margin: 0 50px;
} */
/* 主内容区 end */
js代码对应的界面
$(function(){// 当浏览器访问http://localhost:8080/T243_easyui/index.jsp,ajax要加载书籍列表的数据$.ajax({url:ctx+'/category.action?methodName=list',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');});}}});})
$(function(){var ctx = $("#ctx").val(); // 加载新书(递归)$.ajax({ url:ctx+'/book.action?methodName=newss',success:function(data){data = eval('('+data+')');
// 给news container所属的div添加row或者列appendBookDiv($(".news"),data.data,0,"");}});// 热销书籍(递归)$.ajax({url:ctx+'/book.action?methodName=hotss',success:function(data){data = eval('('+data+')');
// 给news container所属的div添加row或者列appendBookDiv($(".hots"),data.data,0,"");}});})/** 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: 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);}
}
完整的index.js
$(function(){var ctx = $("#ctx").val(); // 当浏览器访问http://localhost:8080/T243_easyui/index.jsp,ajax要加载书籍列表的数据$.ajax({url:ctx+'/category.action?methodName=list',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');});}}});// 加载新书(递归)$.ajax({ url:ctx+'/book.action?methodName=newss',success:function(data){data = eval('('+data+')');
// 给news container所属的div添加row或者列appendBookDiv($(".news"),data.data,0,"");}});// 热销书籍(递归)$.ajax({url:ctx+'/book.action?methodName=hotss',success:function(data){data = eval('('+data+')');
// 给news container所属的div添加row或者列appendBookDiv($(".hots"),data.data,0,"");}});})/** 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: 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);}
}
网上书城的门户首页功能相关推荐
- 网上书城之门户首页及新书上架,热销书籍
网上书城之门户首页及新书上架,热销书籍 目录 网上书城之门户首页及新书上架,热销书籍 实现功能 门户首页功能 新书上架,热销书籍 总结 实现功能 继上几篇博客的代码 我打算把各种功能的代码一一清楚的写 ...
- 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四)
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
- SSM+网上书城系统 毕业设计-附源码180919
目 录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...
- 网上书城项目之后台实现书籍分类、新书上架、热销图书
网上书城项目 前言 书籍分类 效果演示 新书上架 效果演示 热销图书 效果演示 注意要点 总结 前言 嘿,今天为大家分享的知识点呢,是后台编码实现前端页面上的书籍分类.新书上架.热销图书这三个主要功能 ...
- SSM+Layui网上书城系统 移动端Web开发
移动Web 与 原生应用的优劣势 一.移动 Web 的优势 跨平台: 网页应用运行在浏览器上,不会直接和系统打交道 开发成本低: Because 没有平台问题,开发者不需要掌握多种开发语言和框架 更容 ...
- 网上书城(功能模块四)
目录 目标 entity 表结构(设计) 步骤 dao层 web层 页面 目标 1.使用自定义mvc编写模式+js通用左侧菜单栏+jsp页面c标签遍历 2.通过编码实现页面与数据库进行数据绑定 3.书 ...
- 网上书城的登录注册及书籍管理功能
登录注册及书籍管理功能 登录注册 实体类 dao包 web包 书籍管理 实体类 dao包 web包 mvc.xml的配置 界面代码及效果 界面代码 样式 界面效果 登录注册 登录注册所需要用的的实体类 ...
- 网上书城(功能模块三)
目录 目标 表结构(设计) 步骤 entity类 dao层 web层 页面 目标 1.使用自定义mvc编写模式+js(ajax) 2.通过编码实现页面与数据库进行数据绑定 3.书籍分类类别动态加载,新 ...
- BootStrap网上书城首页布局
目录 1,什么是 Bootstrap? 2,导入js库 3,代码演示 1,什么是 Bootstrap? Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目 ...
最新文章
- Windows Server 2016 部署Hyper-V
- python打开谷歌浏览器 关键字_高效使用Chrome浏览器
- OpenCASCADE可视化:应用交互服务之交互对象
- Centos7 yum安装Python3.6环境,超简单
- 鸿蒙OS手机版正式发布,鸿蒙OS前三批升级名单曝光,华为荣耀手机均可升级,幸福来得太突然...
- php 查询数据是否大于,怎么实现从数据查询数据的时候判断如果数据大于N条分次查询 递归吗?...
- 7zip File: How to Uncompress 7z files on Ubuntu, Debian, Fedora
- Go -- log4go日志
- SSM 整合开发初见面
- html设置多列布局间隙,css设置多列等高布局的方法示例
- python数据结构4-栈和队列
- printf格式控制符的完整格式(转载)
- Linux下Socket通信(TCP实现)
- Niushop开源微信商城+小程序商城源码
- IM多点登录与消息漫游架构随想
- LANP+KEEPALIVED集群(一)
- 截止频率计算公式wc_计算截止频率Wc的快速方法
- 给定经纬度计算距离_根据经纬度计算两点间距离JAVA版
- 2023年,重新扬帆起航!
- SE5实现MiDas模型的运行
热门文章
- 外贸知识:为什么你的邮件营销转化率那么低?
- 用结构体指针指向(-)或结构体变量加点(.)后不出现结构体成员
- 语义与文化的一点论述
- 新版标准日本语初级_第八课
- 浙大远程教育计算机小抄,电大计算机网考小抄【呕心沥血整理、电大考试必过】.doc...
- Ta-Lib源码解析(一):交叉指标(Overlap Studies) #(附Python重构代码)
- 通过路由器实现端口映射的疑难杂症
- 使用Doxygen生成中文文档
- Windows | win 11 怎么安装 ie 浏览器
- SSM框架学习----Mybatis(2)