一 Ebuy首页展示之导航栏
2024-06-15 21:35:35
1.页面原型
1.1导航栏需求分析
logo、一级导航、二级导航以及样式
1.2流程图
[外链图片转存失败(img-H7fY2kXm-1563343911693)(img\ebuy_nav_2.png)]
1.3 数据库信息
(t_bigType)
| 列名 | 数据类型（精度范围） | 允许空 | 约束条件 | |
|---|---|---|---|---|
| 主键列 | id | int | 否 | 主键，自动增长 |
| 分类名称 | name | varchar(50) | 是 | |
| 备注 | remarks | varchar(255) | 是 |
(t_tag)
| 主键列 | id | int | 否 | 主键，自动增长 |
|---|---|---|---|---|
| 标签名称 | name | varchar(50) | 是 | |
| 跳转地址 | url | varchar(100) | 是 |
二 实现导航栏
2.1 Web.xml配置
<servlet><servlet-name>index</servlet-name><servlet-class>com.xxx.controller.InitController</servlet-class></servlet><servlet-mapping><servlet-name>index</servlet-name><url-pattern>/index</url-pattern></servlet-mapping>
2.2 引入相关类库
将类库引入WEB-INF–>lib
commons-beanutils-1.8.0.jar
commons-collections-3.1.jar
commons-dbutils-1.7.jar
commons-lang-2.4.jar
commons-logging-1.1.3.jar
ezmorph-1.0.6.jar
json-lib-2.2.3-jdk15.jar
jstl.jar
standard.jar
mysql-connector-java-5.1.26-bin.jar
servlet-api.jar同时shift全选–> build path
如图：
[外链图片转存失败(img-nn4vqyrg-1563343911694)(img\ebuy_class.png)]
2.3 创建实体类(entity)
package com.xxx.vo;
/*** 热门标签 */
public class Tag {private int id; //标签idprivate String name;//标签名称private String url;//标签地址public Tag() {}public Tag(int id, String name, String url) {this.id = id;this.name = name;this.url = url;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}
}
package com.xxx.vo;import java.util.ArrayList;
import java.util.List;
/*** *产品大分类**/
public class ProductBigType {private Integer id;//主键IDprivate String name;//商品名称private String remarks;//标签private List<ProductSmallType> smallTypeList = new ArrayList<ProductSmallType>();//小类别集合public ProductBigType() {// TODO Auto-generated constructor stub}public ProductBigType(Integer id, String name, String remarks, List<ProductSmallType> smallTypeList) {this.id = id;this.name = name;this.remarks = remarks;this.smallTypeList = smallTypeList;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getRemarks() {return remarks;}public void setRemarks(String remarks) {this.remarks = remarks;}public List<ProductSmallType> getSmallTypeList() {return smallTypeList;}public void setSmallTypeList(List<ProductSmallType> smallTypeList) {this.smallTypeList = smallTypeList;}@Overridepublic String toString() {return "ProductBigType [id=" + id + ", name=" + name + ", remarks=" + remarks + "]";}
}2.4 创建DBUtil(数据库交互类)
package com.xxx.util;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;public class DBUtil {static {try {Class.forName("com.mysql.jdbc.Driver");//反射机制加载驱动} catch (ClassNotFoundException e) {System.out.println("mysql初始化失败，请重新尝试！");e.printStackTrace();}}// 获取连接public static Connection getConn() {Connection conn = null;try {conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/hd_ebuy?useUnicode=true&characterEncoding=utf8", "root", "1234");} catch (SQLException e) {System.out.println("连接错误，看看是否开启");e.printStackTrace();}return conn;}// 关闭连接public static void closeAll(Connection conn, PreparedStatement pstmt, ResultSet rs) {closeResult(rs);closeState(pstmt);closeConn(conn);}private static void closeConn(Connection conn) {if (null != conn) {try {conn.close();} catch (SQLException e) {System.out.println("close error" +conn);e.printStackTrace();}}}private static void closeState(PreparedStatement pstmt) {if (null != pstmt) {try {pstmt.close();} catch (SQLException e) {System.out.println("close error" +pstmt);e.printStackTrace();}}}private static void closeResult(ResultSet rs) {if (null != rs) {try {rs.close();} catch (SQLException e) {System.out.println("close error" +rs);e.printStackTrace();}}}public static void main(String[] args) {try {DBUtil.getConn();System.out.println("数据库连接成功!");} catch (Exception e) {System.out.println("数据库连接失败!");e.printStackTrace();}}
}2.5 创建初始化控制层(业务层)
package com.xxx.controller;import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.xxx.service.ProductBigTypeService;
import com.xxx.service.TagService;
import com.xxx.service.impl.ProductBigTypeServiceImpl;
import com.xxx.service.impl.TagServiceImpl;
import com.xxx.vo.ProductBigType;
import com.xxx.vo.Tag;/*** 请求初始化拦截*/
public class InitController extends HttpServlet {private static final long serialVersionUID = 1L;// 多态--通过接口，以及接口的实例化来降低耦合度、让程序更加容易拓展！private ProductBigTypeService bigTypeService = new ProductBigTypeServiceImpl();// 热门标签 private TagService tagService = new TagServiceImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 查询类别信息存放到作用域中List<ProductBigType> bigTypeList = bigTypeService.findAllBigType();System.out.println(bigTypeList + "bigTypeList");// 查询热门标签导航栏 List<Tag> tagList = tagService.findAll();// 将查询结果放到域对象里面 req.setAttribute("tagList", tagList);req.setAttribute("bigTypeList", bigTypeList);req.getRequestDispatcher("/index.jsp").forward(req, resp);}
}
2.6 相关接口方法
package com.xxx.service;import java.util.List;import com.xxx.vo.ProductBigType;public interface ProductBigTypeService {//查询所有大类别信息List<ProductBigType> findAllBigType();}package com.xxx.service;import java.util.List;import com.xxx.vo.Tag;public interface TagService {//查询所有标签 List<Tag> findAll();
}2.7 针对接口的方法具体写出实现类(与数据库交互)
package com.xxx.service.impl;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import com.xxx.service.TagService;
import com.xxx.util.DBUtil;
import com.xxx.vo.Tag;public class TagServiceImpl implements TagService {@Override//查询所有标签的实现类public List<Tag> findAll() {List<Tag> list = new ArrayList<>();// 声明链接Connection conn = null;PreparedStatement pstmt = null;ResultSet rs = null;try {conn = DBUtil.getConn();String sql = "SELECT * FROM T_TAG";pstmt = conn.prepareStatement(sql);rs = pstmt.executeQuery();while (rs.next()) {Tag tag = new Tag();tag.setId(rs.getInt("id"));tag.setName(rs.getString("name"));tag.setUrl(rs.getString("url"));list.add(tag);}return list;} catch (SQLException e) {e.printStackTrace();} finally {DBUtil.closeAll(conn, pstmt, rs);}return null;}}package com.xxx.service.impl;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import com.xxx.service.ProductBigTypeService;
import com.xxx.service.ProductSmallTypeService;
import com.xxx.util.DBUtil;
import com.xxx.vo.ProductBigType;
import com.xxx.vo.ProductSmallType;/*** 接口实现层*/
public class ProductBigTypeServiceImpl implements ProductBigTypeService {private ProductSmallTypeService smallService = new ProductSmallTypeServiceImpl();@Overridepublic List<ProductBigType> findAllBigType() {// 创建实体类List<ProductBigType> list = new ArrayList<ProductBigType>();// 声明链接Connection conn = null;PreparedStatement pstmt = null;ResultSet rs = null;try {// 创建连接conn = DBUtil.getConn();String sql = "SELECT * FROM T_BIGTYPE";pstmt = conn.prepareStatement(sql);rs = pstmt.executeQuery();// 封装结果集合while (rs.next()) {ProductBigType pbt = new ProductBigType();pbt.setId(rs.getInt("id"));pbt.setName(rs.getString("name"));pbt.setRemarks(rs.getString("remarks"));List<ProductSmallType> pst = smallService.findByBigTypeId(rs.getInt("id"));pbt.setSmallTypeList(pst);list.add(pbt);}return list;} catch (SQLException e) {System.out.println("List<ProductBigType> ERROR");e.printStackTrace();} finally {DBUtil.closeAll(conn, pstmt, rs);}return null;}}package com.xxx.vo;
/*** 商品小类别*/
public class ProductSmallType {private Integer id;//小商品idprivate String name;//小分类商品名称private String remarks;//备注private int bigTypeId;//大类型的id(一对多中的多方，大分类是一，小分类是多，所以多方维护)public ProductSmallType() {// TODO Auto-generated constructor stub}public ProductSmallType(Integer id, String name, String remarks, int bigTypeId) {this.id = id;this.name = name;this.remarks = remarks;this.bigTypeId = bigTypeId;}public int getBigTypeId() {return bigTypeId;}public void setBigTypeId(int bigTypeId) {this.bigTypeId = bigTypeId;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getRemarks() {return remarks;}public void setRemarks(String remarks) {this.remarks = remarks;}}package com.xxx.service;
//创建小分类接口
import java.util.List;import com.xxx.vo.ProductSmallType;public interface ProductSmallTypeService {//通过ID查询小分类商品List<ProductSmallType> findByBigTypeId(int bigTypeId);}
package com.xxx.service.impl;import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;import com.xxx.service.ProductSmallTypeService;
import com.xxx.util.DBUtil;
import com.xxx.vo.ProductSmallType;public class ProductSmallTypeServiceImpl implements ProductSmallTypeService {@Overridepublic List<ProductSmallType> findByBigTypeId(int bigTypeId) {List<ProductSmallType> list = new ArrayList<ProductSmallType>();// 声明链接Connection conn = null;PreparedStatement pstmt = null;ResultSet rs = null;try {conn = DBUtil.getConn();String sql = "SELECT * FROM T_SMALLTYPE WHERE BIGTYPEID=?";pstmt = conn.prepareStatement(sql);pstmt.setInt(1, bigTypeId);rs = pstmt.executeQuery();// 封装结果集合while (rs.next()) {ProductSmallType p = new ProductSmallType();p.setId(rs.getInt("id"));p.setName(rs.getString("name"));p.setRemarks(rs.getString("remarks"));p.setBigTypeId(rs.getInt("bigTypeId"));list.add(p);}return list;} catch (SQLException e) {System.out.println("List<ProductSmallType> ERROR");e.printStackTrace();}finally {DBUtil.closeAll(conn, pstmt, rs);}return null;}}
2.8 JSP接收数据，页面显示数据(index.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type = "text/css" href="css/style.css">
</head>
<body><div id="header" class="wrap"><!-- 导航栏信息 --><jsp:include page="common/top.jsp" /> </div><div id="footer"><!-- 版权信息位置预留 --><jsp:include page="common/footer.jsp" /></div>
</body>
</html>
2.9 引入相关支持文件
[外链图片转存失败(img-WIsRGDpu-1563345478137)(img\ebuy_commen&css&images.png)]
2.1.0 整合页面内容(common/top.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<body><div id="logo"><img src="data:images/logo.gif" /></div><div class="help"></div><div class="navbar"><ul class="clearfix"><li class="current"><a href="index">首页</a></li><c:forEach items="${bigTypeList}" var="bType"><li><a href="productServlet?oper=productType&id=${bType.id}">${bType.name}</a></li></c:forEach></ul></div><div id="childNav"><div class="wrap"><ul class="clearfix"><c:forEach var="tag" items="${tagList}" varStatus="status"><c:choose><c:when test="${status.index==0 }"><li class="first"><a href="${tag.url}" target="_blank">${tag.name }</a></li></c:when><c:otherwise><li><a href="${tag.url}" target="_blank">${tag.name}</a></li></c:otherwise></c:choose></c:forEach></ul></div></div>
</body>
</html>
2.1.1下角标版权设置(footer)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
Copyright © 2019 XXX公司 All Rights Reserved.</body>
</html>
2.1.2浏览器访问项目
http://localhost:8080/你的项目名称/index页面效果如图
[外链图片转存失败(img-LnRymvz8-1563345478138)(img\ebuy_nav_effect.png)]
三 商品分类实现
3.1 展示商品分类信息
3.2 展示每个大分类中的小分类信息
3.3 每个大分类中都包含对应的小分类信息
3.4 页面原型
[外链图片转存失败(img-hsRS4m6X-1563345478138)(img\ebuy_bigtype&samlltype.png)]
3.5 商品分类信息具体实现
在以上导航的代码基础上我们可以更好的操作业务
3.5.1 创建小分类实体类 已存在
3.5.2 创建小分类商品的接口方法 已存在
3.5.3 创建小分类商品的接口实现 已存在
3.5.3 页面显示大小分类(index.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" type = "text/css" href="css/style.css">
</head>
<body><div id="header" class="wrap"><!-- 导航栏信息 --><jsp:include page="common/top.jsp" /> </div><div id="main" class="wrap"><div class="lefter"><!-- 商品分类信息 +1 --> <jsp:include page="common/left.jsp" /></div></div><div id="footer"><!-- 版权信息位置预留 --><jsp:include page="common/footer.jsp" /></div>
</body>
</html>
这些小商品内容暂时还不能点击，因为我们只是给了href没有具体的完成查询功能呢！
3.5.4 创建left.jsp并遍历商品分类数据
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><div class="box"><h2>商品分类</h2><dl> <c:forEach items="${bigTypeList}" var="bigType"><dt>${bigType.name }</dt><c:forEach items="${bigType.smallTypeList}" var="smallType"><dd><a href="productServlet?oper=smallType&id=${smallType.id}">${smallType.name }</a></dd> </c:forEach></c:forEach></dl></div>
</body>
</html>
3.5.5页面效果
http://localhost:8080/你的项目名称/index
[外链图片转存失败(img-iAUvlnWG-1563345478139)(img\ebuy_nav&category.png)]
四 总结
1.核心技术点Servlet、Sql、JDBC、JSP、JSTL、EL表达式。
2.知道后台是如何像前台发送数据的，前台是如何接受数据的。
3.页面样式不重要，重要的是数据怎么来的，如何显示在页面的！
一 Ebuy首页展示之导航栏相关推荐
- 京东首页之nav导航栏、banner广告部分、footer备案号
项目回顾:上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分: 里面主要知识:利用列表作划分鲜明的文字部分,相对定位和绝对定位去实现弹框效果. 今天我们这篇博文主要是简单介绍京 ...
- 【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录 前言 App.H5效果 小程序效果 一.兼容APP.H5的方式 二.兼容小程序 三.实现同时兼容 前言 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...
- 用原生JS实现爱奇艺首页导航栏
最近接到领导的任务,要给外面的学生上几节前端课,备课的时候准备了一些小项目,在此记录一下. 以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: 1 <html> ...
- swift 隐藏状态栏_swift 同时修改状态栏和导航栏出现的问题及解决的方法
在网上看了很多资料,都是独自设置导航栏或者状态栏,但是在我们的项目里面有这样一个问题: 我们的首页需要隐藏导航栏并且状态栏的颜色是白色, 而push出来的界面需要显示导航栏并且状态栏颜色设置成黑色,这 ...
- 通栏导航栏的制作，综合使用CSS属性，代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
- 前端-01-编写简单的导航栏
导航栏 基础的HTML语法我就不讲了,这些在W3C.菜鸟教程.壹佰教程等都能找到,下边我就分享一个前端导航栏是怎么写出来的: 1.工具 俗话说,工欲善其事,必先利其器,分享一个写前端的利器,Hbuil ...
- iOS设置导航栏和状态栏
文章目录 iOS 15 之后导航栏背景色的设置 1.状态栏设置 1.1.没有导航栏 1.2.有导航栏 2.导航栏背景和字体颜色 2.1.十六进制颜色转RGB 2.2.生成纯色图片 3.导航栏的另外一种 ...
- android-仿美丽说有滑动效果的导航栏
如果大家想要简单点的,也可以参考:http://blog.csdn.net/jdsjlzx/article/details/51560133 效果图: 本文转自:http://blog.csdn.ne ...
- uniapp实战项目 （仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
最新文章
- 利用AOP实现对方法执行时间的统计
- Tmux终端复用工具小解
- ＜马哲＞劳动价值论的理论及实践意义
- springcloud的config
- 看OpenCV如何在python中实现图像检测！
- [XSY3383]多线程（笛卡尔树，DP）
- 2020中国硬科技创新白皮书
- 【面向对象】面向对象程序设计测试题9-对象之间的继承关系测试题
- 框架学习之Spring 第四节 Spring集成JDBC组件开发
- xp桌面上显示计算机名,巧妙还原WinXP快速启动栏的“显示桌面”图标
- IDOC的处理函数IDOC_INPUT_ORDERS的增强点的分析
- 怎么理解JS Promise
- Android 分享到Instagram
- 【Linux】Linux内核数据结构：IDR（redix树）
- 关于BeanUtils.populate
- js和css动态画出一只安卓机器人，附代码
- 【docker】docker重新加载nginx配置
- Python实践:使用Turtle模块绘制炫彩螺旋线
- ElasticSearch使用学习
- c语言函数变量的作用域与生存期