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>
想要更多资料可以加我微信: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 © 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