一 Ebuy首页展示之导航栏

本文详细介绍了Ebuy商城系统的导航栏实现过程,包括Web.xml配置、数据库交互、实体类创建以及JSP页面展示。同时,讲解了商品分类信息的展示,从大分类到小分类的实现,探讨了后台数据传递到前端显示的关键技术点,如Servlet、Sql、JDBC、JSP、JSTL和EL表达式。
摘要由CSDN通过智能技术生成
1.页面原型
1.1导航栏需求分析

logo、一级导航、二级导航以及样式

1.2流程图

[外链图片转存失败(img-H7fY2kXm-1563343911693)(img\ebuy_nav_2.png)]

1.3 数据库信息

(t_bigType)

列名数据类型(精度范围)允许空约束条件
主键列idint主键,自动增长
分类名称namevarchar(50)
备注remarksvarchar(255)

(t_tag)

主键列idint主键,自动增长
标签名称namevarchar(50)
跳转地址urlvarchar(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>

想要更多资料可以加我微信:mageit

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; //标签id
	private 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;//主键ID
	private 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;
	}

	@Override
	public 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();
	@Override
	protected 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();

	@Override
	public 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;//小商品id
	private 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 {
	@Override
	public 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="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 &copy; 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.页面样式不重要,重要的是数据怎么来的,如何显示在页面的!

想要更多资料可以加我微信:mageit

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值