像这样的多级目录是怎样做成的呢，其实也很简单，数据库只需要一个表就能把这三级目录显示在页面上！
软件环境 ：
开发工具STS ，Tomcat 8.5，mysql5.5
一、先看看UI人员设计的html页面header.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>搜索列表</title>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<span>
你好！欢迎来到通药集采平台！
</span>
<a href="login.html">
请登录
</a>
<a href="register.html">
免费注册
</a>
</div>
<div class="fr">
<ul>
<li class="">
<a href="member-order.html">
我的订单
</a>
</li>
<li class="">
<a href="member-index.html">
我的集采
<i class="caret">
</i>
</a>
<ul style="display: none;">
<li>
<a href="member-order.html">
采购中心
</a>
</li>
<li>
<a href="member-agent-new.html">
代理中心
</a>
</li>
<li>
<a href="member-att-shoping.html">
关注中心
</a>
</li>
<li>
<a href="member-setting-info.html">
设置中心
</a>
</li>
</ul>
</li>
<li class="">
<a href="">
收藏夹
</a>
</li>
<li class="">
<a href="">
我是厂家
</a>
</li>
<li class="">
<a href="">
客户服务
</a>
</li>
<li>
<a href="">
网站导航
</a>
</li>
</ul>
</div>
</div>
</div>
<!--shortcut end-->
<div class="w clearfix">
<div class="logo fl">
<img class="img" src="images/logo.png" alt="">
</div>
<div class="fr sea-box">
<div class="search fl">
<input type="text" placeholder="搜索您需要的商品" class="search-text">
<button href="searching.html" class="btn btn-warning" target="view_window">
搜索
</button>
</div>
<div class="fr shopping-cart dorpdown J-dorpdown">
<a href="caigoudan.html" target="view_window" class=" btn btn-danger">
<i class="procu-ico">
</i>
采购单(5)
</a>
<div class="dorpdown-layer">
<div class="settleup-content">
<h3 class="tit">
新添加商品
</h3>
<div class="smc">
<ul>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
</ul>
</div>
<div class="smb ar">
<div class="p-total">
共
<span>
8
</span>
件计件，总金额：
<strong>
￥605.00
</strong>
</div>
<a href="caigoudan.html" title="去购物车" class="btn btn-warning btn-s fr">
<i class="glyphicon glyphicon-shopping-cart">
</i>
去结算
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--searchbox end-->
<div class="nav clearfix">
<div class="w">
<div class="navcate fl navCon_on">
<div class="navCon-cate-title">
<a href="">
<i class="glyphicon glyphicon-th-list">
</i>
全部商品分类
<span class="caret ">
</span>
</a>
</div>
<ul class="cate-menu Js-cateMenu" style="display: none;">
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon1">
</i>
中西药品
</a>
<div class="list-item J-list-item" style="display: none;">
<div class="itemleft">
<i href="" class="glyphicon glyphicon-remove close">
</i>
<div>
<dl>
<dt>
内分泌
</dt>
<dd>
<a href="">
糖尿病
</a>
<a href="">
甲状腺疾病
</a>
</dd>
</dl>
<dl>
<dt>
肝病科
</dt>
<dd>
<a href="">
胆道疾病
</a>
<a href="">
脂肪肝
</a>
<a href="">
肝纤维化肝硬化
</a>
<a href="">
免疫调节
</a>
<a href="">
保肝护肝
</a>
<a href="">
胆结石
</a>
<a href="">
乙肝
</a>
</dd>
</dl>
<dl>
<dt>
神经系统
</dt>
<dd>
<a href="">
运动神经元病
</a>
<a href="">
精神分裂症
</a>
<a href="">
神经性疼痛
</a>
<a href="">
神经损伤
</a>
<a href="">
头痛偏头痛
</a>
<a href="">
焦虑症
</a>
<a href="">
多动症
</a>
<a href="">
抑郁症
</a>
<a href="">
老年性痴
</a>
<a href="">
帕金森
</a>
<a href="">
戒烟
</a>
<a href="">
失眠
</a>
<a href="">
癫痫
</a>
<a href="">
面瘫
</a>
<a href="">
中风
</a>
</dd>
</dl>
<dl>
<dt>
心脑血管
</dt>
<dd>
<a href="">
脑血管病
</a>
<a href="">
犀利衰竭
</a>
<a href="">
心律失常
</a>
<a href="">
心肌炎
</a>
<a href="">
动脉硬化
</a>
<a href="">
静脉曲张
</a>
<a href="">
心绞痛
</a>
<a href="">
冠心病
</a>
<a href="">
高血脂
</a>
<a href="">
高血压
</a>
</dd>
</dl>
<dl>
<dt>
五官科疾病
</dt>
<dd>
<a href="">
口腔溃疡
</a>
<a href="">
牙周疼痛
</a>
<a href="">
咽喉炎
</a>
<a href="">
耳聋耳鸣
</a>
<a href="">
青光眼
</a>
<a href="">
白内障
</a>
<a href="">
眼干眼涩
</a>
<a href="">
眼部炎症
</a>
<a href="">
鼻炎
</a>
</dd>
</dl>
<dl>
<dt>
皮肤病
</dt>
<dd>
<a href="">
过敏
</a>
<a href="">
蚊虫叮咬
</a>
<a href="">
烫伤创伤
</a>
<a href="">
艾滋病
</a>
<a href="">
黄褐斑
</a>
<a href="">
系统性红斑狼疮
</a>
<a href="">
尖锐湿疣
</a>
<a href="">
疱疹
</a>
<a href="">
脱发
</a>
<a href="">
白癜风
</a>
</dd>
</dl>
<dl>
<dt>
肿瘤科
</dt>
<dd>
<a href="">
升白升血小板
</a>
<a href="">
癌症止痛止呕
</a>
<a href="">
化疗提高营养学
</a>
<a href="">
甲状腺瘤
</a>
<a href="">
乳腺癌
</a>
<a href="">
白血病
</a>
<a href="">
淋巴癌
</a>
<a href="">
食道癌
</a>
<a href="">
胃癌
</a>
</dd>
</dl>
<dl>
<dt>
风湿骨科
</dt>
<dd>
<a href="">
器官移植
</a>
<a href="">
跌打骨伤
</a>
<a href="">
外用贴膏
</a>
<a href="">
骨质松松
</a>
<a href="">
颈椎病
</a>
<a href="">
骨质增生
</a>
<a href="">
关节炎
</a>
<a href="">
疼痛用药
</a>
<a href="">
风湿类风湿
</a>
<a href="">
痛风
</a>
</dd>
</dl>
<dl>
<dt>
消化系统疾病
</dt>
<dd>
<a href="">
营养剂
</a>
<a href="">
小儿肠胃病
</a>
<a href="">
蛔虫病
</a>
<a href="">
痔疮
</a>
<a href="">
腹泻
</a>
<a href="">
胃肠溃疡
</a>
<a href="">
消化不良
</a>
<a href="">
结肠炎
</a>
<a href="">
便秘
</a>
<a href="">
胃炎
</a>
</dd>
</dl>
<dl>
<dt>
妇科疾病
</dt>
<dd>
<a href="">
更年期
</a>
<a href="">
孕产期
</a>
<a href="">
避孕
</a>
<a href="">
乳腺癌
</a>
<a href="">
妇科炎症
</a>
</dd>
</dl>
<dl>
<dt>
呼吸道疾病
</dt>
<dd>
<a href="">
慢阻肺
</a>
<a href="">
支气管炎
</a>
<a href="">
哮喘
</a>
<a href="">
小儿感冒
</a>
<a href="">
上火
</a>
<a href="">
咳嗽
</a>
<a href="">
感冒发烧
</a>
</dd>
</dl>
<dl>
<dt>
男科疾病
</dt>
<dd>
<a href="">
泌尿系统疾病
</a>
<a href="">
肾病
</a>
<a href="">
前列腺炎
</a>
<a href="">
男性不育症
</a>
<a href="">
性功能障碍
</a>
</dd>
</dl>
<dl>
<dt>
滋补调养
</dt>
<dd>
<a href="">
免疫调节
</a>
<a href="">
补肾
</a>
<a href="">
减肥瘦身
</a>
<a href="">
安神助眠
</a>
<a href="">
增强抵抗力
</a>
<a href="">
补血补气
</a>
</dd>
</dl>
</div>
</div>
</div>
<!--list-item end-->
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon2">
</i>
营养保健
</a>
<div class="list-item">
<div class="itemleft">
<div>
<dl>
<dt>
内分泌
</dt>
<dd>
<a href="">
糖尿病
</a>
<a href="">
甲状腺疾病
</a>
</dd>
</dl>
<dl>
<dt>
肝病科
</dt>
<dd>
<a href="">
胆道疾病
</a>
<a href="">
脂肪肝
</a>
<a href="">
肝纤维化肝硬化
</a>
<a href="">
免疫调节
</a>
<a href="">
保肝护肝
</a>
<a href="">
胆结石
</a>
<a href="">
乙肝
</a>
</dd>
</dl>
<dl>
<dt>
神经系统
</dt>
<dd>
<a href="">
运动神经元病
</a>
<a href="">
精神分裂症
</a>
<a href="">
神经性疼痛
</a>
<a href="">
神经损伤
</a>
<a href="">
头痛偏头痛
</a>
<a href="">
焦虑症
</a>
<a href="">
多动症
</a>
<a href="">
抑郁症
</a>
<a href="">
老年性痴
</a>
<a href="">
帕金森
</a>
<a href="">
戒烟
</a>
<a href="">
失眠
</a>
<a href="">
癫痫
</a>
</dd>
</dl>
<dl>
<dt>
心脑血管
</dt>
<dd>
<a href="">
脑血管病
</a>
<a href="">
犀利衰竭
</a>
<a href="">
心律失常
</a>
<a href="">
心肌炎
</a>
<a href="">
动脉硬化
</a>
<a href="">
静脉曲张
</a>
<a href="">
心绞痛
</a>
<a href="">
冠心病
</a>
<a href="">
高血脂
</a>
<a href="">
高血压
</a>
</dd>
</dl>
<dl>
<dt>
五官科疾病
</dt>
<dd>
<a href="">
口腔溃疡
</a>
<a href="">
牙周疼痛
</a>
<a href="">
咽喉炎
</a>
<a href="">
耳聋耳鸣
</a>
<a href="">
青光眼
</a>
<a href="">
白内障
</a>
<a href="">
眼干眼涩
</a>
<a href="">
眼部炎症
</a>
<a href="">
鼻炎
</a>
</dd>
</dl>
<dl>
<dt>
皮肤病
</dt>
<dd>
<a href="">
过敏
</a>
<a href="">
蚊虫叮咬
</a>
<a href="">
烫伤创伤
</a>
<a href="">
艾滋病
</a>
<a href="">
黄褐斑
</a>
<a href="">
系统性红斑狼疮
</a>
<a href="">
尖锐湿疣
</a>
<a href="">
疱疹
</a>
<a href="">
脱发
</a>
<a href="">
白癜风
</a>
</dd>
</dl>
<dl>
<dt>
肿瘤科
</dt>
<dd>
<a href="">
升白升血小板
</a>
<a href="">
癌症止痛止呕
</a>
<a href="">
化疗提高营养学
</a>
<a href="">
甲状腺瘤
</a>
<a href="">
乳腺癌
</a>
<a href="">
白血病
</a>
<a href="">
淋巴癌
</a>
<a href="">
食道癌
</a>
<a href="">
胃癌
</a>
</dd>
</dl>
<dl>
<dt>
风湿骨科
</dt>
<dd>
<a href="">
器官移植
</a>
<a href="">
跌打骨伤
</a>
<a href="">
外用贴膏
</a>
<a href="">
骨质松松
</a>
<a href="">
颈椎病
</a>
<a href="">
骨质增生
</a>
<a href="">
关节炎
</a>
<a href="">
疼痛用药
</a>
<a href="">
风湿类风湿
</a>
<a href="">
痛风
</a>
</dd>
</dl>
<dl>
<dt>
消化系统疾病
</dt>
<dd>
<a href="">
营养剂
</a>
<a href="">
小儿肠胃病
</a>
<a href="">
蛔虫病
</a>
<a href="">
痔疮
</a>
<a href="">
腹泻
</a>
<a href="">
胃肠溃疡
</a>
<a href="">
消化不良
</a>
<a href="">
结肠炎
</a>
<a href="">
便秘
</a>
<a href="">
胃炎
</a>
</dd>
</dl>
<dl>
<dt>
妇科疾病
</dt>
<dd>
<a href="">
更年期
</a>
<a href="">
孕产期
</a>
<a href="">
避孕
</a>
<a href="">
乳腺癌
</a>
<a href="">
妇科炎症
</a>
</dd>
</dl>
<dl>
<dt>
呼吸道疾病
</dt>
<dd>
<a href="">
慢阻肺
</a>
<a href="">
支气管炎
</a>
<a href="">
哮喘
</a>
<a href="">
小儿感冒
</a>
<a href="">
上火
</a>
<a href="">
咳嗽
</a>
<a href="">
感冒发烧
</a>
</dd>
</dl>
<dl>
<dt>
男科疾病
</dt>
<dd>
<a href="">
泌尿系统疾病
</a>
<a href="">
肾病
</a>
<a href="">
前列腺炎
</a>
<a href="">
男性不育症
</a>
<a href="">
性功能障碍
</a>
</dd>
</dl>
<dl>
<dt>
滋补调养
</dt>
<dd>
<a href="">
免疫调节
</a>
<a href="">
补肾
</a>
<a href="">
减肥瘦身
</a>
<a href="">
安神助眠
</a>
<a href="">
增强抵抗力
</a>
<a href="">
补血补气
</a>
</dd>
</dl>
</div>
</div>
</div>
<!--list-item end-->
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon3">
</i>
维生素、钙剂
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon4">
</i>
隐形眼镜
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon5">
</i>
医疗器械、家电
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon6">
</i>
成人用品
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon7">
</i>
母婴专区
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon8">
</i>
美妆个护
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon9">
</i>
参茸花茶、休闲零食
</a>
</li>
<li class="">
<a href="">
<i class="cat-nav-icon cat-nav-icon10">
</i>
体检、口腔诊疗
</a>
</li>
</ul>
</div>
<!--navcate end-->
<ul class="nav-item">
<li>
<a href="index.html" data-hover="首页">
首页
</a>
</li>
<li>
<a href="" data-hover="中西成药">
中西成药
</a>
</li>
<li>
<a href="" data-hover="中药材/饮片">
中药材/饮片
</a>
</li>
<li>
<a href="" data-hover="医疗器械">
医疗器械
</a>
</li>
<li>
<a href="">
健康产品
</a>
</li>
<li>
<a href="">
厂家专区
</a>
</li>
<li>
<a href="">
附近药店
</a>
</li>
<li>
<a href="">
药房伙计
</a>
</li>
</ul>
<!--navItem end-->
<div class="tel"><i class="glyphicon glyphicon-earphone"></i>400-1066-519</div>
</div>
</div>
<!--mav end-->
<script>
$(function(){
$
})
</script>
</body>
</html> 二、header.html页面是这样的，只是这些都是静态的页面，我们需要把它做成动态的，丛数据库中加载文件这样才有意义，那么接下来就是数据库设计，
2.3 m_type表（商品分类表）
| 列名 |
数据类型 |
是否为空 |
说明 |
| tid |
int |
否 |
类别ID，自增编号，主键 |
| tname |
varchar |
否 |
分类名称 |
| tparent |
int |
可为空 |
父类型tid |
3.好了数据库建好后就要建立三层架构来实现了，这里主要说一下业务层TypeService，这里主要是用到了递归的思想来实现逐层遍历。最后将所有数据存入一个集合中，将这个集合在SERVLET中转发到Jsp页面上，然后使用JSTL在页面上展示出来。
public List<Tree> listTypeByTparent(int tparent) {
try {
List<Type> types=null;
if(tparent==0) {
types=typeDao.list("select * from m_type where tparent = ?",0);
}else {
types=typeDao.list("select * from m_type where tparent=?",tparent);
}
List<Tree> trees=new ArrayList<>();
for (Type type : types) {
Tree tree=new Tree();
tree.setTname(type.getTname());
tree.setTparent(type.getTparent());
tree.setTid(type.getTid());
Type child=typeDao.get("select * from m_type where tparent=?", tree.getTid());
if(child!=null) {
List<Tree> children=listTypeByTparent(tree.getTid());
tree.setChildren(children);
}
trees.add(tree);
}
return trees;
}finally {
JdbcUtil.closeConnection();
}
}Type实体类：
package com.xintouyun.medicine.entity;
import com.xintoucloud.jdbcutil.Id;
import com.xintoucloud.jdbcutil.Table;
@Table("m_type")
public class Type {
@Id
private int tid;
private String tname;
private int tparent;
public int getTid() {
return tid;
}
public void setTid(int tid) {
this.tid = tid;
}
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public int getTparent() {
return tparent;
}
public void setTparent(int tparent) {
this.tparent = tparent;
}
}
tree是包装类:
package com.xintouyun.medicine.model;
import java.util.List;
public class Tree {
private int tid;
private String tname;
private int tparent;
private List<Tree> children;
public List<Tree> getChildren() {
return children;
}
public void setChildren(List<Tree> children) {
this.children = children;
}
public int getTid() {
return tid;
}
public void setTid(int tid) {
this.tid = tid;
}
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public int getTparent() {
return tparent;
}
public void setTparent(int tparent) {
this.tparent = tparent;
}
}
4.TreeServlet调用业务层的方法listTypeByTparent得到数据集合trees，然后将数据转发到header,jsp页面
package com.xintouyun.medicine.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.xintouyun.medicine.model.Tree;
import com.xintouyun.medicine.service.TypeService;
import com.xintouyun.medicine.service.impl.TypeServiceImpl;
@WebServlet("/tree")
public class TreeServlet extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{
HttpSession session=request.getSession();
//1.获取参数
String tparent=request.getParameter("tparent");
// 2.业务响应
TypeService typeService = new TypeServiceImpl();
List<Tree> trees=typeService.listTypeByTparent(Integer.parseInt(tparent));
//3.响应
if(trees!=null) {
session.setAttribute("trees", trees);
System.out.println("trees"+trees);
request.getRequestDispatcher("header.jsp").forward(request, response);
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{
this.doGet(request, response);
}
}5.header.jsp使用JSTL将trees展示在页面相应位置就可以了
<%@ 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">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
<script type="text/javascript" src="js/zhihuijia.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>搜索列表</title>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<span>
你好！欢迎来到通药集采平台！
</span>
<a href="login.html">
请登录
</a>
<a href="register.html">
免费注册
</a>
</div>
<div class="fr">
<ul>
<li class="">
<a href="member-order.html">
我的订单
</a>
</li>
<li class="">
<a href="member-index.html">
我的集采
<i class="caret">
</i>
</a>
<ul style="display: none;">
<li>
<a href="member-order.html">
采购中心
</a>
</li>
<li>
<a href="member-agent-new.html">
代理中心
</a>
</li>
<li>
<a href="member-att-shoping.html">
关注中心
</a>
</li>
<li>
<a href="member-setting-info.html">
设置中心
</a>
</li>
</ul>
</li>
<li class="">
<a href="">
收藏夹
</a>
</li>
<li class="">
<a href="">
我是厂家
</a>
</li>
<li class="">
<a href="">
客户服务
</a>
</li>
<li>
<a href="">
网站导航
</a>
</li>
</ul>
</div>
</div>
</div>
<!--shortcut end-->
<div class="w clearfix">
<div class="logo fl">
<img class="img" src="images/logo.png" alt="">
</div>
<div class="fr sea-box">
<form method="post" action="/medicine/searchgoods">
<div class="search fl">
<input type="text" placeholder="搜索您需要的商品" class="search-text" id="keywords" name="keywords">
<button class="btn btn-warning" target="view_window">
搜索
</button>
</div>
</form>
<div class="fr shopping-cart dorpdown J-dorpdown">
<a href="caigoudan.html" target="view_window" class=" btn btn-danger">
<i class="procu-ico">
</i>
采购单(5)
</a>
<div class="dorpdown-layer">
<div class="settleup-content">
<h3 class="tit">
新添加商品
</h3>
<div class="smc">
<ul>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
<li>
<div class="od-img fl">
<img class="img" src="images/shop_img.jpg" alt="">
</div>
<div class="od-name fl">
<a href="">
修正高钙蛋白质粉450g/罐提高免
</a>
</div>
<div class="od-detail fr ar">
<span class="od-price">
<strong>
￥239.00
</strong>
</span>
<br>
<a class="detele" href="javascript:void(0)">
删除
</a>
</div>
</li>
</ul>
</div>
<div class="smb ar">
<div class="p-total">
共
<span>
8
</span>
件计件，总金额：
<strong>
￥605.00
</strong>
</div>
<a href="caigoudan.html" title="去购物车" class="btn btn-warning btn-s fr">
<i class="glyphicon glyphicon-shopping-cart">
</i>
去结算
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--searchbox end-->
<div class="nav clearfix">
<div class="w">
<div class="navcate fl navCon_on">
<div class="navCon-cate-title">
<a href="/medicine/tree?tparent=0">
<i class="glyphicon glyphicon-th-list">
</i>
全部商品分类
<span class="caret ">
</span>
</a>
</div>
<ul class="cate-menu Js-cateMenu" style="display: none;">
<c:forEach items="${trees }" var="t">
<li class="">
<a href="searchgoods?type_id=${t.tid }">
<i class="cat-nav-icon cat-nav-icon1">
</i>
${t.tname }
</a>
<div class="list-item J-list-item" style="display: none;">
<div class="itemleft">
<i href="" class="glyphicon glyphicon-remove close">
</i>
<div>
<c:forEach items="${t.children }" var="tc">
<dl>
<dt>
<a href="searchgoods?type_id=${tc.tid }" class="sa">
${tc.tname }
</a>
</dt>
<dd>
<c:forEach items="${tc.children }" var="tcl">
<a href="searchgoods?type_id=${tcl.tid }" class="sa">
${tcl.tname }
</a>
</c:forEach>
</dd>
</dl>
</c:forEach>
</div>
</div>
</div>
</c:forEach>
</ul>
</div>
<!--navcate end-->
<ul class="nav-item">
<li>
<a href="index" data-hover="首页">
首页
</a>
</li>
<li>
<a href="" data-hover="中西成药">
中西成药
</a>
</li>
<li>
<a href="" data-hover="中药材/饮片">
中药材/饮片
</a>
</li>
<li>
<a href="" data-hover="医疗器械">
医疗器械
</a>
</li>
<li>
<a href="">
健康产品
</a>
</li>
<li>
<a href="">
厂家专区
</a>
</li>
<li>
<a href="">
附近药店
</a>
</li>
</ul>
<!--navItem end-->
<div class="tel"><i class="glyphicon glyphicon-earphone"></i>400-1066-519</div>
</div>
</div>
<!--mav end-->
<script>
$(function(){
$
})
</script>
</body>
</html> 6.最终效果：这些都是从数据库加载出来的哦
