网上书城的门户首页功能

2024-05-02 11:58
文章标签 功能 网上 首页 书城 门户

本文主要是介绍网上书城的门户首页功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

门户首页功能

  • 前言
  • 门户首页功能所需的的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);}
}

这篇关于网上书城的门户首页功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/954187。

相关文章

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL有什么优点？ 开源和免费 PostgreSQL是一个开源的数据库管理系统，可以免费使用和修改。这降低了企业的成本，并为开发者提供了一个活跃的社区和丰富的资源。 高度兼容 PostgreSQL支持多种操作系统（如Linux、Windows、macOS等）和编程语言（如C、C++、Java、Python、Ruby等），并提供了多种接口（如JDBC、ODBC、ADO.NET等
阅读更多...
寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

目录 概述 1 认识TCRT5000 1.1 模块介绍 1.2 电气特性 2 系统应用 2.1 系统架构 2.2 STM32Cube创建工程 3 功能实现 3.1 代码实现 3.2 源代码文件 4 功能测试 4.1 检测黑线状态 4.2 未检测黑线状态 概述 本文主要介绍TCRT5000模块的使用原理，包括该模块的硬件实现方式，电路实现原理，还使用STM32类
阅读更多...
nginx介绍及常用功能

nginx介绍及常用功能

什么是nginx nginx跟Apache一样，是一个web服务器（网站服务器），通过HTTP协议提供各种网络服务。 Apache：重量级的，不支持高并发的服务器。在Apache上运行数以万计的并发访问，会导致服务器消耗大量内存。操作系统对其进行进程或线程间的切换也消耗了大量的CPU资源，导致HTTP请求的平均响应速度降低。这些都决定了Apache不可能成为高性能WEB服务器  nginx：
阅读更多...
详解Tomcat 7的七大新特性和新增功能(1)

详解Tomcat 7的七大新特性和新增功能(1)

http://developer.51cto.com/art/201009/228537.htm http://tomcat.apache.org/tomcat-7.0-doc/index.html  Apache发布首个Tomcat 7版本已经发布了有一段时间了，Tomcat 7引入了许多新功能，并对现有功能进行了增强。很多文章列出了Tomcat 7的新功能，但大多数并没有详细解释它们
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2