Mybatis与微服务注册

目录

一，Springboot整合MybatisPlus

创建商品微服务子模块

二，SpringBoot整合Freeamarker

三、SpringBoot整合微服务

&gateway&nginx

整合微服务之商品服务zmall-product

创建并配置网关gateway服务

安装配置SwitchHosts

安装配置Windows版nginx

---

一，Springboot整合MybatisPlus

我们接着上期来讲，上期的项目需基于maven创建子模块zmall-generator，用于结合mybatis-plus生成代码。

 在公共模块zmall-common中注释掉mybatis的依赖引入，改换成mybatis-plus依赖引入

<!-- mybatis plus依赖 -->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.0</version>
</dependency>

在zmall-generator中引入mybatis-plus-generator依赖。该模块专用于mybatis-plus的代码生成，所以单独在此引入该依赖即可。

<!-- mybatis-plus-generator依赖 -->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.4.0</version>
</dependency>

1. 在src/main/resources下创建templates目录，并导入mybatis-generator生成代码模板页

2. 在src/main/java下创建包com.zking.zmall，并导入generator下的CodeGenerator类用于代码生成

3. 修改CodeGenerator类基本生成参数，并生成代码

//数据库连接参数
public static String driver = "com.mysql.jdbc.Driver";
public static String url = "jdbc:mysql://localhost:3306/zmall?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true";
public static String username="root";
public static String 密码="1234";
//父级别包名称
public static String parentPackage = "com.zking.zmall";
//项目名设置（如果是SpringCloud项目则需要设置，其他为""即可）
public static String projectName="/zmall-generator";
//代码生成的目标路径
public static String generateTo = "/src/main/java";
//mapper.xml的生成路径
public static String mapperXmlPath = "/src/main/resources/mapper";
//控制器的公共基类，用于抽象控制器的公共方法，null值表示没有父类
public static String baseControllerClassName ;
//业务层的公共基类，用于抽象公共方法
public static String baseServiceClassName ;
//作者名
public static String author = "zking";
//模块名称，用于组成包名
public static String modelName = "model";

注意：

• 修改数据库连接URL中的数据库名、数据库账号和密码；

• 修改父级别包名称

• 修改项目名，如果是SpringCloud项目则修改，不是则默认“”

在此之前先将需简要的表生成出来

zmall_product_category,zmall_product

创建商品微服务子模块

1.基于Spring Initializr方式创建商品服务模块zmall-product

 2.在主模块pom.xml中加入商品服务子模块zmall-product

<modules><module>zmall-common</module><module>zmall-user</module><module>zmall-generator</module><module>zmall-product</module>
</modules>

3.配置商品服务子模块zmall-product的application.yml配置文件

server:port: 8020
spring:application:name: zmall-productdatasource:#type连接池类型 DBCP,C3P0,Hikari,Druid,默认为Hikaritype: com.zaxxer.hikari.HikariDataSourcedriver-class-name: com.mysql.jdbc.Driverurl: jdbc:mysql://localhost:3306/zmall?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=trueusername: root密码: 1234freemarker:suffix: .htmltemplate-loader-path: classpath:/templates/
#mybatis-plus配置
mybatis-plus:#所对应的 XML 文件位置mapper-locations: classpath*:/mapper/*Mapper.xml#别名包扫描路径type-aliases-package: com.zking.zmall.modelconfiguration:#驼峰命名规则map-underscore-to-camel-case: true
#日志配置
logging:level:com.zking.zmall.mapper: debug

4.在商品服务子模块中启动类上添加注解

@MapperScan({"com.zking.zmall.mapper"})

@SpringBootApplication
@MapperScan({"com.zking.zmall.mapper"})
public class ZmallProductApplication {public static void main(String[] args) {SpringApplication.run(ZmallProductApplication.class, args);}
}

将公共子模块中生成的service层代码复制到商品服务子模块zmall-product中，并删除掉非商品相关的service接口及实现类

 6.创建junit实现接口测试

zmall-common模块

<!--        用于test目录下的测试--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId></dependency>

测试类运行代码 

@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest
public class ProductServiceImplTest {@Autowiredprivate IProductService productService;@Beforepublic void setUp() throws Exception {}@Afterpublic void tearDown() throws Exception {}@Testpublic void queryProduct() {List<Product> list = productService.list();list.forEach(System.out::println);}
}

二，SpringBoot整合Freeamarker

1.在公共模块zmall-common中引入freemarker依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

2.在商品子模块zmall-product中添加首页和商品详情页面及公共资源（js/css/images）

• 将资料目录中的《易买网网页素材.rar》解压后，将其中Index.html、Product.html和js/css/images等等添加到项目的templates和static目录下，最好请将Index.html、Product.html页面首字母改成小写

• 导入资料目录中的common目录到项目的templates目录下

• 将页面中的头部申明<!DOCTYPE html ....>修改成<!DOCTYPE html>（支持H5风格）

• 在页面中通过<#include>指令引入common目录中的head.html

3.创建ProductController定义请求方法

@Controller
public class ProductController {@Autowiredprivate IProductService productService;@RequestMapping("/index.html")public String index(Model model){//按照商品的销量降序排序获取销量排名Top5的商品List<Product> products = productService.list(new QueryWrapper<Product>().orderByDesc("hot").last("limit 5"));model.addAttribute("hots",products);return "index";}@RequestMapping("/product.html")public String detail(Model model,Integer pid){//根据商品ID查询商品详情信息Product product = productService.getById(pid);model.addAttribute("product",product);return "product";}
}

4.在index.html中绑定热门数据和product.html中绑定商品详情数据

目录结构如图

index.html（主页面）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><#include 'common/head.html'><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link type="text/css" rel="stylesheet" href="css/style.css" /><!--[if IE 6]><script src="js/iepng.js" type="text/javascript"></script><script type="text/javascript">EvPNG.fix('div, ul, img, li, input, a');</script><![endif]--><script type="text/javascript" src="js/jquery-1.11.1.min_044d0927.js"></script><script type="text/javascript" src="js/jquery.bxslider_e88acd1b.js"></script><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript" src="js/select.js"></script><script type="text/javascript" src="js/lrscroll.js"></script><script type="text/javascript" src="js/iban.js"></script><script type="text/javascript" src="js/fban.js"></script><script type="text/javascript" src="js/f_ban.js"></script><script type="text/javascript" src="js/mban.js"></script><script type="text/javascript" src="js/bban.js"></script><script type="text/javascript" src="js/hban.js"></script><script type="text/javascript" src="js/tban.js"></script><script type="text/javascript" src="js/lrscroll_1.js"></script><title>尤洪</title>
</head>
<body>
<!--Begin Header Begin-->
<div class="soubg"><div class="sou"><!--Begin 所在收货地区 Begin--><span class="s_city_b"><span class="fl">送货至：</span><span class="s_city"><span>四川</span><div class="s_city_bg"><div class="s_city_t"></div><div class="s_city_c"><h2>请选择所在的收货地区</h2><table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0" cellpadding="0"><tr><th>A</th><td class="c_h"><span>安徽</span><span>澳门</span></td></tr><tr><th>B</th><td class="c_h"><span>北京</span></td></tr><tr><th>C</th><td class="c_h"><span>重庆</span></td></tr><tr><th>F</th><td class="c_h"><span>福建</span></td></tr><tr><th>G</th><td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td></tr><tr><th>H</th><td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td></tr><tr><th>J</th><td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td></tr><tr><th>L</th><td class="c_h"><span>辽宁</span></td></tr><tr><th>N</th><td class="c_h"><span>内蒙古</span><span>宁夏</span></td></tr><tr><th>Q</th><td class="c_h"><span>青海</span></td></tr><tr><th>S</th><td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td></tr><tr><th>T</th><td class="c_h"><span>台湾</span><span>天津</span></td></tr><tr><th>X</th><td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td></tr><tr><th>Y</th><td class="c_h"><span>云南</span></td></tr><tr><th>Z</th><td class="c_h"><span>浙江</span></td></tr></table></div></div></span></span><!--End 所在收货地区 End--><span class="fr"><span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#">我的订单</a>&nbsp;|</span><span class="ss"><div class="ss_list"><a href="#">收藏夹</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">我的收藏夹</a></li><li><a href="#">我的收藏夹</a></li></ul></div></div>     </div><div class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div>    </div><div class="ss_list"><a href="#">网站导航</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li></ul></div></div>    </div></span><span class="fl">|&nbsp;关注我们：</span><span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span><span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle" /></a></span></span></div>
</div>
<div class="top"><div class="logo"><a href="Index.html"><img src="images/logo.png" /></a></div><div class="search"><form><input type="text" value="" class="s_ipt" /><input type="submit" value="搜索" class="s_btn" /></form><span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></span></div><div class="i_car"><div class="car_t">购物车 [ <span>3</span> ]</div><div class="car_bg"><!--Begin 购物车未登录 Begin--><div class="un_login">还未登录！<a href="Login.html" style="color:#ff4e00;">马上登录</a> 查看购物车！</div><!--End 购物车未登录 End--><!--Begin 购物车已登录 Begin--><ul class="cars"><li><div class="img"><a href="#"><img src="images/car1.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li><li><div class="img"><a href="#"><img src="images/car2.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li><li><div class="img"><a href="#"><img src="images/car2.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li></ul><div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>1058</span></div><div class="price_a"><a href="#">去购物车结算</a></div><!--End 购物车已登录 End--></div></div>
</div>
<!--End Header End-->
<!--Begin Menu Begin-->
<div class="menu_bg"><div class="menu"><!--Begin 商品分类详情 Begin--><div class="nav"><div class="nav_t">全部商品分类</div><div class="leftNav"><ul><li><div class="fj"><span class="n_img"><span></span><img src="images/nav1.png" /></span><span class="fl">进口食品、生鲜</span></div><div class="zj"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav2.png" /></span><span class="fl">食品、饮料、酒</span></div><div class="zj" style="top:-40px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力2</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav3.png" /></span><span class="fl">母婴、玩具、童装</span></div><div class="zj" style="top:-80px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力3</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav4.png" /></span><span class="fl">家居、家庭清洁、纸品</span></div><div class="zj" style="top:-120px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力4</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav5.png" /></span><span class="fl">美妆、个人护理、洗护</span></div><div class="zj" style="top:-160px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力5</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav6.png" /></span><span class="fl">女装、内衣、中老年</span></div><div class="zj" style="top:-200px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力6</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav7.png" /></span><span class="fl">鞋靴、箱包、腕表配饰</span></div><div class="zj" style="top:-240px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力7</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav8.png" /></span><span class="fl">男装、运动</span></div><div class="zj" style="top:-280px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力8</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav9.png" /></span><span class="fl">手机、小家电、电脑</span></div><div class="zj" style="top:-320px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力9</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav10.png" /></span><span class="fl">礼品、充值</span></div><div class="zj" style="top:-360px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力10</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li></ul></div></div><!--End 商品分类详情 End--><ul class="menu_r"><li><a href="Index.html">首页</a></li><li><a href="Food.html">美食</a></li><li><a href="Fresh.html">生鲜</a></li><li><a href="HomeDecoration.html">家居</a></li><li><a href="SuitDress.html">女装</a></li><li><a href="MakeUp.html">美妆</a></li><li><a href="Digital.html">数码</a></li><li><a href="GroupBuying.html">团购</a></li></ul><div class="m_ad">中秋送好礼！</div></div>
</div>
<!--End Menu End-->
<div class="i_bg bg_color"><div class="i_ban_bg"><!--Begin Banner Begin--><div class="banner"><div class="top_slide_wrap"><ul class="slide_box bxslider"><li><img src="images/ban1.jpg" width="740" height="401" /></li><li><img src="images/ban1.jpg" width="740" height="401" /></li><li><img src="images/ban1.jpg" width="740" height="401" /></li></ul><div class="op_btns clearfix"><a href="#" class="op_btn op_prev"><span></span></a><a href="#" class="op_btn op_next"><span></span></a></div></div></div><script type="text/javascript">//var jq = jQuery.noConflict();(function(){$(".bxslider").bxSlider({auto:true,prevSelector:jq(".top_slide_wrap .op_prev")[0],nextSelector:jq(".top_slide_wrap .op_next")[0]});})();</script><!--End Banner End--><div class="inews"><div class="news_t"><span class="fr"><a href="#">更多 ></a></span>新闻资讯</div><ul><li><span>[ 特惠 ]</span><a href="#">掬一轮明月 表无尽惦念</a></li><li><span>[ 公告 ]</span><a href="#">好奇金装成长裤新品上市</a></li><li><span>[ 特惠 ]</span><a href="#">大牌闪购 · 抢！</a></li><li><span>[ 公告 ]</span><a href="#">发福利 买车就抢千元油卡</a></li><li><span>[ 公告 ]</span><a href="#">家电低至五折</a></li></ul><div class="charge_t">话费充值<div class="ch_t_icon"></div></div><form><table border="0" style="width:205px; margin-top:10px;" cellspacing="0" cellpadding="0"><tr height="35"><td width="33">号码</td><td><input type="text" value="" class="c_ipt" /></td></tr><tr height="35"><td>面值</td><td><select class="jj" name="city"><option value="0" selected="selected">100元</option><option value="1">50元</option><option value="2">30元</option><option value="3">20元</option><option value="4">10元</option></select><span style="color:#ff4e00; font-size:14px;">￥99.5</span></td></tr><tr height="35"><td colspan="2"><input type="submit" value="立即充值" class="c_btn" /></td></tr></table></form></div></div><!--Begin 热门商品 Begin--><div class="content mar_10"><div class="h_l_img"><div class="img"><img src="images/l_img.jpg" width="188" height="188" /></div><div class="pri_bg"><span class="price fl">￥53.00</span><span class="fr">16R</span></div></div><div class="hot_pro"><div id="featureContainer"><div id="feature"><div id="block"><div id="botton-scroll"><ul class="featureUL"><#--判断hots是否为空--><#if hots??><#--循环遍历热销商品--><#list hots as it><li class="featureBox"><div class="box"><div class="h_icon"><img src="images/hot.png" width="50" height="50" /></div><div class="imgbg"><a href="${ctx}/product.html?pid=${(it.id)!}"><img src="${(it.fileName)!}" width="160" height="136" /></a></div><div class="name"><a href="${ctx}/product.html?pid=${(it.id)!}"><#-- <h2>德国进口</h2>-->${(it.name)!}</a></div><div class="price"><font>￥<span>${(it.price)!}</span></font> &nbsp; 26R</div></div></li></#list></#if></ul></div></div><a class="h_prev" href="javascript:void();">Previous</a><a class="h_next" href="javascript:void();">Next</a></div></div></div></div><!--Begin 限时特卖 Begin--><div class="i_t mar_10"><span class="fl">限时秒杀</span><span class="i_mores fr"><a href="#">更多</a></span></div><div class="content"><div class="i_sell"><div id="imgPlay"><ul class="imgs" id="actor"><li><a href="#"><img src="images/tm_r.jpg" width="211" height="357" /></a></li><li><a href="#"><img src="images/tm_r.jpg" width="211" height="357" /></a></li><li><a href="#"><img src="images/tm_r.jpg" width="211" height="357" /></a></li></ul><div class="previ">上一张</div><div class="nexti">下一张</div></div></div><div class="sell_right"><div class="sell_1"><div class="sb_img"><a href="#"><img src="images/food_r.jpg" width="242" height="356" /></a></div><div class="s_price">￥<span>89</span></div><div class="s_name"><h2><a href="#">长城干红</a></h2>倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒</div></div><div class="sell_2"><div class="sb_img"><a href="#"><img src="images/tm_b1.jpg" width="242" height="356" /></a></div><div class="s_price">￥<span>289</span></div><div class="s_name"><h2><a href="#">东北大米</a></h2>倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒</div></div><div class="sell_3"><div class="sb_img"><a href="#"><img src="images/fre_r.jpg" width="242" height="356" /></a></div><div class="s_price">￥<span>289</span></div><div class="s_name"><h2><a href="#">美心月饼</a></h2>倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒</div></div><div class="sell_4"><div class="sb_img"><a href="#"><img src="images/tm_b2.jpg" width="242" height="356" /></a></div><div class="s_price">￥<span>289</span></div><div class="s_name"><h2><a href="#">美妆</a></h2>倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒</div></div></div></div><!--End 限时特卖 End--><div class="content mar_20"><img src="images/mban_1.jpg" width="1200" height="110" /></div><!--Begin 进口 生鲜 Begin--><div class="i_t mar_10"><span class="floor_num">1F</span><span class="fl">进口 <b>·</b> 生鲜</span><span class="i_mores fr"><a href="#">进口咖啡</a>&nbsp; &nbsp; &nbsp; <a href="#">进口酒</a>&nbsp; &nbsp; &nbsp; <a href="#">进口母婴</a>&nbsp; &nbsp; &nbsp; <a href="#">新鲜蔬菜</a>&nbsp; &nbsp; &nbsp; <a href="#">新鲜水果</a></span></div><div class="content"><div class="fresh_left"><div class="fre_ban"><div id="imgPlay1"><ul class="imgs" id="actor1"><li><a href="#"><img src="images/fre_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/fre_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/fre_r.jpg" width="211" height="286" /></a></li></ul><div class="prevf">上一张</div><div class="nextf">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><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></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">新鲜美味  进口美食</a></div><div class="price"><font>￥<span>198.00</span></font> &nbsp; 26R</div><div class="img"><a href="#"><img src="images/fre_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/fre_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/fre_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 进口 生鲜 End--><!--Begin 食品饮料 Begin--><div class="i_t mar_10"><span class="floor_num">2F</span><span class="fl">食品饮料</span><span class="i_mores fr"><a href="#">咖啡</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">休闲零食</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">饼干糕点</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">冲饮谷物</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">营养保健</a></span></div><div class="content"><div class="food_left"><div class="food_ban"><div id="imgPlay2"><ul class="imgs" id="actor2"><li><a href="#"><img src="images/food_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/food_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/food_r.jpg" width="211" height="286" /></a></li></ul><div class="prev_f">上一张</div><div class="next_f">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">饼干糕点</a><a href="#">休闲零食</a><a href="#">饮料果汁</a><a href="#">牛奶乳品</a><a href="#">冲饮谷物</a><a href="#">营养保健</a><a href="#">冲饮谷物</a><a href="#">营养保健</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">莫斯利安酸奶</a></div><div class="price"><font>￥<span>96.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/food_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/food_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/food_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 食品饮料 End--><!--Begin 个人美妆 Begin--><div class="i_t mar_10"><span class="floor_num">3F</span><span class="fl">个人美妆</span><span class="i_mores fr"><a href="#">洗发护发</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">面膜</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">洗面奶</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">香水</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">沐浴露</a></span></div><div class="content"><div class="make_left"><div class="make_ban"><div id="imgPlay3"><ul class="imgs" id="actor3"><li><a href="#"><img src="images/make_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/make_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/make_r.jpg" width="211" height="286" /></a></li></ul><div class="prev_m">上一张</div><div class="next_m">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><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></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 16R</div><div class="img"><a href="#"><img src="images/make_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/make_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/make_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 个人美妆 End--><div class="content mar_20"><img src="images/mban_1.jpg" width="1200" height="110" /></div><!--Begin 母婴玩具 Begin--><div class="i_t mar_10"><span class="floor_num">4F</span><span class="fl">母婴玩具</span><span class="i_mores fr"><a href="#">营养品</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">孕妈背带裤</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">儿童玩具</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">婴儿床</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">喂奶器</a></span></div><div class="content"><div class="baby_left"><div class="baby_ban"><div id="imgPlay4"><ul class="imgs" id="actor4"><li><a href="#"><img src="images/baby_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/baby_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/baby_r.jpg" width="211" height="286" /></a></li></ul><div class="prev_b">上一张</div><div class="next_b">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><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></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">儿童玩具  变形金刚</a></div><div class="price"><font>￥<span>260.00</span></font> &nbsp; 20R</div><div class="img"><a href="#"><img src="images/baby_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/baby_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/baby_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 母婴玩具 End--><!--Begin 家居生活 Begin--><div class="i_t mar_10"><span class="floor_num">5F</span><span class="fl">家居生活</span><span class="i_mores fr"><a href="#">床上用品</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">家纺布艺</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">餐具</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">沙发</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">汽车用品</a></span></div><div class="content"><div class="home_left"><div class="home_ban"><div id="imgPlay5"><ul class="imgs" id="actor5"><li><a href="#"><img src="images/home_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/home_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/home_r.jpg" width="211" height="286" /></a></li></ul><div class="prev_h">上一张</div><div class="next_h">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><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></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">品质蓝色沙发</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 50R</div><div class="img"><a href="#"><img src="images/home_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/home_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/home_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 家居生活 End--><!--Begin 数码家电 Begin--><div class="i_t mar_10"><span class="floor_num">6F</span><span class="fl">数码家电</span><span class="i_mores fr"><a href="#">手机</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">苹果</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">华为手机</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">洗衣机</a>&nbsp; &nbsp; | &nbsp; &nbsp;<a href="#">数码配件</a></span></div><div class="content"><div class="tel_left"><div class="tel_ban"><div id="imgPlay6"><ul class="imgs" id="actor6"><li><a href="#"><img src="images/tel_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/tel_r.jpg" width="211" height="286" /></a></li><li><a href="#"><img src="images/tel_r.jpg" width="211" height="286" /></a></li></ul><div class="prev_t">上一张</div><div class="next_t">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><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></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_1.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_2.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_3.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_4.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_5.jpg" width="185" height="155" /></a></div></li><li><div class="name"><a href="#">乐视高清电视</a></div><div class="price"><font>￥<span>2160.00</span></font> &nbsp; 25R</div><div class="img"><a href="#"><img src="images/tel_6.jpg" width="185" height="155" /></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="images/tel_b1.jpg" width="260" height="220" /></a></li><li><a href="#"><img src="images/tel_b2.jpg" width="260" height="220" /></a></li></ul></div></div><!--End 数码家电 End--><!--Begin 猜你喜欢 Begin--><div class="i_t mar_10"><span class="fl">猜你喜欢</span></div><div class="like"><div id="featureContainer1"><div id="feature1"><div id="block1"><div id="botton-scroll1"><ul class="featureUL"><li class="featureBox"><div class="box"><div class="imgbg"><a href="#"><img src="images/hot1.jpg" width="160" height="136" /></a></div><div class="name"><a href="#"><h2>德国进口</h2>德亚全脂纯牛奶200ml*48盒</a></div><div class="price"><font>￥<span>189</span></font> &nbsp; 26R</div></div></li><li class="featureBox"><div class="box"><div class="imgbg"><a href="#"><img src="images/hot2.jpg" width="160" height="136" /></a></div><div class="name"><a href="#"><h2>iphone 6S</h2>Apple/苹果 iPhone 6s Plus公开版</a></div><div class="price"><font>￥<span>5288</span></font> &nbsp; 25R</div></div></li><li class="featureBox"><div class="box"><div class="imgbg"><a href="#"><img src="images/hot3.jpg" width="160" height="136" /></a></div><div class="name"><a href="#"><h2>倩碧特惠组合套装</h2>倩碧补水组合套装8折促销</a></div><div class="price"><font>￥<span>368</span></font> &nbsp; 18R</div></div></li><li class="featureBox"><div class="box"><div class="imgbg"><a href="#"><img src="images/hot4.jpg" width="160" height="136" /></a></div><div class="name"><a href="#"><h2>品利特级橄榄油</h2>750ml*4瓶装组合 西班牙原装进口</a></div><div class="price"><font>￥<span>280</span></font> &nbsp; 30R</div></div></li><li class="featureBox"><div class="box"><div class="imgbg"><a href="#"><img src="images/hot4.jpg" width="160" height="136" /></a></div><div class="name"><a href="#"><h2>品利特级橄榄油</h2>750ml*4瓶装组合 西班牙原装进口</a></div><div class="price"><font>￥<span>280</span></font> &nbsp; 30R</div></div></li></ul></div></div><a class="l_prev" href="javascript:void();">Previous</a><a class="l_next" href="javascript:void();">Next</a></div></div></div><!--End 猜你喜欢 End--><!--Begin Footer Begin --><div class="b_btm_bg b_btm_c"><div class="b_btm"><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b1.png" width="62" height="62" /></td><td><h2>正品保障</h2>正品行货  放心购买</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b2.png" width="62" height="62" /></td><td><h2>满38包邮</h2>满38包邮 免运费</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b3.png" width="62" height="62" /></td><td><h2>天天低价</h2>天天低价 畅选无忧</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b4.png" width="62" height="62" /></td><td><h2>准时送达</h2>收货时间由你做主</td></tr></table></div></div><div class="b_nav"><dl><dt><a href="#">新手上路</a></dt><dd><a href="#">售后流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">订购方式</a></dd><dd><a href="#">隐私声明</a></dd><dd><a href="#">推荐分享说明</a></dd></dl><dl><dt><a href="#">配送与支付</a></dt><dd><a href="#">货到付款区域</a></dd><dd><a href="#">配送支付查询</a></dd><dd><a href="#">支付方式说明</a></dd></dl><dl><dt><a href="#">会员中心</a></dt><dd><a href="#">资金管理</a></dd><dd><a href="#">我的收藏</a></dd><dd><a href="#">我的订单</a></dd></dl><dl><dt><a href="#">服务保证</a></dt><dd><a href="#">退换货原则</a></dd><dd><a href="#">售后服务保证</a></dd><dd><a href="#">产品质量保证</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">网站故障报告</a></dd><dd><a href="#">购物咨询</a></dd><dd><a href="#">投诉与建议</a></dd></dl><div class="b_tel_bg"><a href="#" class="b_sh1">新浪微博</a><a href="#" class="b_sh2">腾讯微博</a><p>服务热线：<br /><span>400-123-4567</span></p></div><div class="b_er"><div class="b_er_c"><img src="images/er.gif" width="118" height="118" /></div><img src="images/ss.png" /></div></div><div class="btmbg"><div class="btm">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com   Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br /><img src="images/b_1.gif" width="98" height="33" /><img src="images/b_2.gif" width="98" height="33" /><img src="images/b_3.gif" width="98" height="33" /><img src="images/b_4.gif" width="98" height="33" /><img src="images/b_5.gif" width="98" height="33" /><img src="images/b_6.gif" width="98" height="33" /></div></div><!--End Footer End -->
</div></body><!--[if IE 6]>
<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
</html><div class="top"><div class="logo"><a href="${ctx}/Home?action=index"><img src="${ctx}/statics/images/logo.png"></a></div><div class="search"><form><input txype="text" value="" class="s_ipt"><input type="submit" value="搜索" class="s_btn"></form><span class="fl"><a href="javascript:void(0)">咖啡</a><a href="javascript:void(0)">iphone 6S</a><a href="javascript:void(0)">新鲜美食</a><a href="javascript:void(0)">蛋糕</a><a href="javascript:void(0)">日用品</a><a href="javascript:void(0)">连衣裙</a></span></div><div class="i_car"><div class="car_t">购物车 [ <span>3</span> ]</div><div class="car_bg"><!--Begin 购物车未登录 Begin--><#--            <c:if test="${sessionScope.loginUser==null}">--><#--                <div class="un_login">还未登录！<a href="${ctx}/Login?action=toLogin" style="color:#ff4e00;">马上登录</a> 查看购物车！</div>--><#--            </c:if>--><!--End 购物车未登录 End--><!--Begin 购物车已登录 Begin--><ul class="cars"><#--                <c:if test="${sessionScope.cart2==null || sessionScope.cart2.items.size()<1}"> 您尚未购买任何物品，是否进入<a href="${ctx}/Home?action=index">商品页</a>进行购买！</c:if>--><#--                <c:if test="${sessionScope.cart2.items.size()>=1}">--><li><div class="img"><a href="javascript:void(0)"><img src="${ctx}/statics/images/car1.jpg" width="58" height="58"></a></div><div class="name"><a href="javascript:void(0)">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</a></div><div class="price"><font color="#ff4e00">￥399</font>X1</div></li><#--                </c:if>--></ul><div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>1058</span></div><div class="price_a"><a href="javascript:void(0)">去购物车结算</a></div><!--End 购物车已登录 End--></div></div>
</div>

商品界面（product.html） 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><#include 'common/head.html'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link type="text/css" rel="stylesheet" href="css/style.css" /><!--[if IE 6]><script src="js/iepng.js" type="text/javascript"></script><script type="text/javascript">EvPNG.fix('div, ul, img, li, input, a'); </script><![endif]--><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/menu.js"></script>    <script type="text/javascript" src="js/lrscroll_1.js"></script>   <script type="text/javascript" src="js/n_nav.js"></script><link rel="stylesheet" type="text/css" href="css/ShopShow.css" /><link rel="stylesheet" type="text/css" href="css/MagicZoom.css" /><script type="text/javascript" src="js/MagicZoom.js"></script><script type="text/javascript" src="js/num.js">var jq = jQuery.noConflict();</script><script type="text/javascript" src="js/p_tab.js"></script><script type="text/javascript" src="js/shade.js"></script><title>尤洪</title>
</head>
<body>  
<!--Begin Header Begin-->
<div class="soubg"><div class="sou"><!--Begin 所在收货地区 Begin--><span class="s_city_b"><span class="fl">送货至：</span><span class="s_city"><span>四川</span><div class="s_city_bg"><div class="s_city_t"></div><div class="s_city_c"><h2>请选择所在的收货地区</h2><table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0" cellpadding="0"><tr><th>A</th><td class="c_h"><span>安徽</span><span>澳门</span></td></tr><tr><th>B</th><td class="c_h"><span>北京</span></td></tr><tr><th>C</th><td class="c_h"><span>重庆</span></td></tr><tr><th>F</th><td class="c_h"><span>福建</span></td></tr><tr><th>G</th><td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td></tr><tr><th>H</th><td class="c_h"><span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span></td></tr><tr><th>J</th><td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td></tr><tr><th>L</th><td class="c_h"><span>辽宁</span></td></tr><tr><th>N</th><td class="c_h"><span>内蒙古</span><span>宁夏</span></td></tr><tr><th>Q</th><td class="c_h"><span>青海</span></td></tr><tr><th>S</th><td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span class="c_check">四川</span><span>陕西</span></td></tr><tr><th>T</th><td class="c_h"><span>台湾</span><span>天津</span></td></tr><tr><th>X</th><td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td></tr><tr><th>Y</th><td class="c_h"><span>云南</span></td></tr><tr><th>Z</th><td class="c_h"><span>浙江</span></td></tr></table></div></div></span></span><!--End 所在收货地区 End--><span class="fr"><span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#">我的订单</a>&nbsp;|</span><span class="ss"><div class="ss_list"><a href="#">收藏夹</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">我的收藏夹</a></li><li><a href="#">我的收藏夹</a></li></ul></div></div>     </div><div class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div>    </div><div class="ss_list"><a href="#">网站导航</a><div class="ss_list_bg"><div class="s_city_t"></div><div class="ss_list_c"><ul><li><a href="#">网站导航</a></li><li><a href="#">网站导航</a></li></ul></div></div>    </div></span><span class="fl">|&nbsp;关注我们：</span><span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span><span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="images/s_tel.png" align="absmiddle" /></a></span></span></div>
</div>
<div class="top"><div class="logo"><a href="Index.html"><img src="images/logo.png" /></a></div><div class="search"><form><input type="text" value="" class="s_ipt" /><input type="submit" value="搜索" class="s_btn" /></form>                      <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></span></div><div class="i_car"><div class="car_t">购物车 [ <span>3</span> ]</div><div class="car_bg"><!--Begin 购物车未登录 Begin--><div class="un_login">还未登录！<a href="Login.html" style="color:#ff4e00;">马上登录</a> 查看购物车！</div><!--End 购物车未登录 End--><!--Begin 购物车已登录 Begin--><ul class="cars"><li><div class="img"><a href="#"><img src="images/car1.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">法颂浪漫梦境50ML 香水女士持久清新淡香 送2ML小样3只</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li><li><div class="img"><a href="#"><img src="images/car2.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li><li><div class="img"><a href="#"><img src="images/car2.jpg" width="58" height="58" /></a></div><div class="name"><a href="#">香奈儿（Chanel）邂逅活力淡香水50ml</a></div><div class="price"><font color="#ff4e00">￥399</font> X1</div></li></ul><div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>1058</span></div><div class="price_a"><a href="#">去购物车结算</a></div><!--End 购物车已登录 End--></div></div>
</div>
<!--End Header End--> 
<!--Begin Menu Begin-->
<div class="menu_bg"><div class="menu"><!--Begin 商品分类详情 Begin-->    <div class="nav"><div class="nav_t">全部商品分类</div><div class="leftNav none"><ul>      <li><div class="fj"><span class="n_img"><span></span><img src="images/nav1.png" /></span><span class="fl">进口食品、生鲜</span></div><div class="zj"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav2.png" /></span><span class="fl">食品、饮料、酒</span></div><div class="zj" style="top:-40px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力2</h2><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>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav3.png" /></span><span class="fl">母婴、玩具、童装</span></div><div class="zj" style="top:-80px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力3</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav4.png" /></span><span class="fl">家居、家庭清洁、纸品</span></div><div class="zj" style="top:-120px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力4</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav5.png" /></span><span class="fl">美妆、个人护理、洗护</span></div><div class="zj" style="top:-160px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力5</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav6.png" /></span><span class="fl">女装、内衣、中老年</span></div><div class="zj" style="top:-200px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力6</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav7.png" /></span><span class="fl">鞋靴、箱包、腕表配饰</span></div><div class="zj" style="top:-240px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力7</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav8.png" /></span><span class="fl">男装、运动</span></div><div class="zj" style="top:-280px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力8</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="images/nav9.png" /></span><span class="fl">手机、小家电、电脑</span></div><div class="zj" style="top:-320px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力9</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li>                    <li><div class="fj"><span class="n_img"><span></span><img src="images/nav10.png" /></span><span class="fl">礼品、充值</span></div><div class="zj" style="top:-360px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力10</h2><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>|</div></div><div class="zj_r"><a href="#"><img src="images/n_img1.jpg" width="236" height="200" /></a><a href="#"><img src="images/n_img2.jpg" width="236" height="200" /></a></div></div></li>                    	</ul>            </div></div>  <!--End 商品分类详情 End-->                                                     <ul class="menu_r"><li><a href="Index.html">首页</a></li><li><a href="Food.html">美食</a></li><li><a href="Fresh.html">生鲜</a></li><li><a href="HomeDecoration.html">家居</a></li><li><a href="SuitDress.html">女装</a></li><li><a href="MakeUp.html">美妆</a></li><li><a href="Digital.html">数码</a></li><li><a href="GroupBuying.html">团购</a></li></ul><div class="m_ad">中秋送好礼！</div></div>
</div>
<!--End Menu End--> 
<div class="i_bg"><div class="postion"><span class="fl">全部 > 美妆个护 > 香水 > 迪奥 > 迪奥真我香水</span></div><div class="content"><div id="tsShopContainer"><div id="tsImgS"><a href="${(product.fileName)!}" title="Images" class="MagicZoom" id="MagicZoom"><img src="${(product.fileName)!}" width="390" height="390" /></a></div><div id="tsPicContainer"><div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div><div id="tsImgSCon"><ul><li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg"><img src="images/ps1.jpg" tsImgS="images/ps1.jpg" width="79" height="79" /></li><li onclick="showPic(1)" rel="MagicZoom"><img src="images/ps2.jpg" tsImgS="images/ps2.jpg" width="79" height="79" /></li><li onclick="showPic(2)" rel="MagicZoom"><img src="images/ps3.jpg" tsImgS="images/ps3.jpg" width="79" height="79" /></li><li onclick="showPic(3)" rel="MagicZoom"><img src="images/ps4.jpg" tsImgS="images/ps4.jpg" width="79" height="79" /></li><li onclick="showPic(4)" rel="MagicZoom"><img src="images/ps1.jpg" tsImgS="images/ps1.jpg" width="79" height="79" /></li><li onclick="showPic(5)" rel="MagicZoom"><img src="images/ps2.jpg" tsImgS="images/ps2.jpg" width="79" height="79" /></li><li onclick="showPic(6)" rel="MagicZoom"><img src="images/ps3.jpg" tsImgS="images/ps3.jpg" width="79" height="79" /></li><li onclick="showPic(7)" rel="MagicZoom"><img src="images/ps4.jpg" tsImgS="images/ps4.jpg" width="79" height="79" /></li></ul></div><div id="tsImgSArrR" onclick="tsScrollArrRight()"></div></div><img class="MagicZoomLoading" width="16" height="16" src="images/loading.gif" alt="Loading..." /></div><div class="pro_des"><div class="des_name"><p>${(product.name)!}</p>“开业巨惠，北京专柜直供”，不光低价，“真”才靠谱！</div><div class="des_price">本店价格：<b>￥${(product.price)}</b><br />消费积分：<span>28R</span></div><div class="des_choice"><span class="fl">型号选择：</span><ul><li class="checked">30ml<div class="ch_img"></div></li><li>50ml<div class="ch_img"></div></li><li>100ml<div class="ch_img"></div></li></ul></div><div class="des_choice"><span class="fl">颜色选择：</span><ul><li>红色<div class="ch_img"></div></li><li class="checked">白色<div class="ch_img"></div></li><li>黑色<div class="ch_img"></div></li></ul></div><div class="des_share"><div class="d_sh">分享<div class="d_sh_bg"><a href="#"><img src="images/sh_1.gif" /></a><a href="#"><img src="images/sh_2.gif" /></a><a href="#"><img src="images/sh_3.gif" /></a><a href="#"><img src="images/sh_4.gif" /></a><a href="#"><img src="images/sh_5.gif" /></a></div></div><div class="d_care"><a onclick="ShowDiv('MyDiv','fade')">关注商品</a></div></div><div class="des_join"><div class="j_nums"><input type="text" value="1" name="" class="n_ipt" /><input type="button" value="" onclick="addUpdate(jq(this));" class="n_btn_1" /><input type="button" value="" onclick="jianUpdate(jq(this));" class="n_btn_2" /></div><span class="fl"><a onclick="ShowDiv_1('MyDiv1','fade1')"><img src="images/j_car.png" /></a></span></div></div><div class="s_brand"><div class="s_brand_img"><img src="images/sbrand.jpg" width="188" height="132" /></div><div class="s_brand_c"><a href="#">进入品牌专区</a></div></div></div><!--Begin 弹出层-收藏成功 Begin--><div id="fade" class="black_overlay"></div><div id="MyDiv" class="white_content">             <div class="white_d"><div class="notice_t"><span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv('MyDiv','fade')"><img src="images/close.gif" /></span></div><div class="notice_c"><table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0"><tr valign="top"><td width="40"><img src="images/suc.png" /></td><td><span style="color:#3e3e3e; font-size:18px; font-weight:bold;">您已成功收藏该商品</span><br /><a href="#">查看我的关注 >></a></td></tr><tr height="50" valign="bottom"><td>&nbsp;</td><td><a href="#" class="b_sure">确定</a></td></tr></table></div></div></div>    <!--End 弹出层-收藏成功 End--><!--Begin 弹出层-加入购物车 Begin--><div id="fade1" class="black_overlay"></div><div id="MyDiv1" class="white_content">             <div class="white_d"><div class="notice_t"><span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv_1('MyDiv1','fade1')"><img src="images/close.gif" /></span></div><div class="notice_c"><table border="0" align="center" style="margin-top:;" cellspacing="0" cellpadding="0"><tr valign="top"><td width="40"><img src="images/suc.png" /></td><td><a href="http://cart.zmall.com/addCart?pid=${(product.id)!}&num=3" class="b_sure">去购物车结算</a><a href="#" class="b_buy">继续购物</a></td></tr><tr height="50" valign="bottom"><td>&nbsp;</td><td><a href="#" class="b_sure">去购物车结算</a><a href="#" class="b_buy">继续购物</a></td></tr></table></div></div></div>    <!--End 弹出层-加入购物车 End--><!--Begin Footer Begin --><div class="b_btm_bg bg_color"><div class="b_btm"><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b1.png" width="62" height="62" /></td><td><h2>正品保障</h2>正品行货  放心购买</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b2.png" width="62" height="62" /></td><td><h2>满38包邮</h2>满38包邮 免运费</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b3.png" width="62" height="62" /></td><td><h2>天天低价</h2>天天低价 畅选无忧</td></tr></table><table border="0" style="width:210px; height:62px; float:left; margin-left:75px; margin-top:30px;" cellspacing="0" cellpadding="0"><tr><td width="72"><img src="images/b4.png" width="62" height="62" /></td><td><h2>准时送达</h2>收货时间由你做主</td></tr></table></div></div><div class="b_nav"><dl>                                                                                            <dt><a href="#">新手上路</a></dt><dd><a href="#">售后流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">订购方式</a></dd><dd><a href="#">隐私声明</a></dd><dd><a href="#">推荐分享说明</a></dd></dl><dl><dt><a href="#">配送与支付</a></dt><dd><a href="#">货到付款区域</a></dd><dd><a href="#">配送支付查询</a></dd><dd><a href="#">支付方式说明</a></dd></dl><dl><dt><a href="#">会员中心</a></dt><dd><a href="#">资金管理</a></dd><dd><a href="#">我的收藏</a></dd><dd><a href="#">我的订单</a></dd></dl><dl><dt><a href="#">服务保证</a></dt><dd><a href="#">退换货原则</a></dd><dd><a href="#">售后服务保证</a></dd><dd><a href="#">产品质量保证</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">网站故障报告</a></dd><dd><a href="#">购物咨询</a></dd><dd><a href="#">投诉与建议</a></dd></dl><div class="b_tel_bg"><a href="#" class="b_sh1">新浪微博</a>            <a href="#" class="b_sh2">腾讯微博</a><p>服务热线：<br /><span>400-123-4567</span></p></div><div class="b_er"><div class="b_er_c"><img src="images/er.gif" width="118" height="118" /></div><img src="images/ss.png" /></div></div>    <div class="btmbg"><div class="btm">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com   Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 , Technical Support: Dgg Group <br /><img src="images/b_1.gif" width="98" height="33" /><img src="images/b_2.gif" width="98" height="33" /><img src="images/b_3.gif" width="98" height="33" /><img src="images/b_4.gif" width="98" height="33" /><img src="images/b_5.gif" width="98" height="33" /><img src="images/b_6.gif" width="98" height="33" /></div>    	</div><!--End Footer End -->    
</div></body><script src="js/ShopShow.js"></script><!--[if IE 6]>
<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
</html>

效果图

 

 

三、SpringBoot整合微服务

&gateway&nginx

 请求链路要求：客户端发送请求先经过nginx，再用nginx转至内部访问网关gateway，最后由网关服务的路由规则转发到微服务的内部服务。

整合微服务之商品服务zmall-product

在公共模块zmall-common中导入微服务相关依赖

<!--nacos客户端-->
<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency><!--fegin组件-->
<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency><!--nacos配置中心-->
<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>

配置商品服务模块zmall-product的application.yml文件

spring:application:name: zmall-productcloud:nacos:discovery:server-addr: localhost:8848

修改启动类，向nacos进行注册（这里一定要记得启动nacos）

@EnableDiscoveryClient
@SpringBootApplication
@MapperScan({"com.zking.zmall.mapper"})
public class ZmallProductApplication {public static void main(String[] args) {SpringApplication.run(ZmallProductApplication.class, args);}
}

创建并配置网关gateway服务

1. 基于Spring initializr方式创建网关模块zmall-gateway

2. 配置pom.xml添加nacos和gateway的依赖

<modelVersion>4.0.0</modelVersion>
<parent><groupId>com.zking.zmall</groupId><artifactId>zmall</artifactId><version>1.0-SNAPSHOT</version></parent>
<artifactId>zmall-gateway</artifactId>
<dependencies><!--gateway 注意 此模式不能引入starter-web --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><!--nacos客户端--><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>	</dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId></dependency>
</dependencies>

3.修改启动类，向nacos进行注册

@EnableDiscoveryClient
@SpringBootApplication
public class ZmallGatewayApplication {public static void main(String[] args) {SpringApplication.run(ZmallGatewayApplication.class, args);}
}

4.配置application.yml设置gateway路由转发规则

server:port: 8000
spring:application:name: zmall-gatewaycloud:nacos:discovery:server-addr: localhost:8848gateway:routes:- id: product_routeuri: lb://zmall-product # lb指的是从nacos中按照名称获取微服务,并遵循负载均衡策略predicates:- Path=/product-serv/**filters:- StripPrefix=1

将易买网网页素材中的公共静态资源js/css/images复制到gateway网关服务中

这里请注意了，之前在商品服务模块zmall-product中已经配置了易买网的静态资源，为什么还要在gateway网关服务中再配置一次呢？这是因为当请求经过gateway网关服务后会进行断言条件匹配和条件路径截取等操作，从而导致gateway网关路由转发后静态资源失效404的问题，所以特此在gateway网关服务中也配置一次易买网网页素材中的公共静态资源js/css/images，确保能正常访问。

解决方案：（此处将在第三次课解决，使用nginx动静分离方式实现） 配置静态资源访问服务器，将各个微服务模块中的静态访问资源迁移到静态资源访问服务器中，然后通过http方式访问即可。

安装配置SwitchHosts

1. 直接双击exe文件即可安装SwitchHosts

2. 进入C:\Windows\System32\drivers\etc目录，设置hosts文件访问权限并取消只读模式

3. 打开SwitchHosts设置一级域名

 

1. 最后运行nginx根目录下的nginx.exe启动nginx

如果出现IIS7，那么cmd窗口中执行下列指令

 

net stop w3svc

安装配置Windows版nginx

1. 解压nginx-1.18.0.zip至任意目录

2. 进入conf目录，并修改nginx.conf配置文件

server
{listen 80;server_name zmall.com;proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location / {proxy_pass http://127.0.0.1:8000/;}
}

1. 最后运行nginx根目录下的nginx.exe启动nginx

如果出现IIS7，那么cmd窗口中执行下列指令net stop w3svc

请求链路测试

单独访问商品服务：http://localhost:8020/index.html

通过gateway访问：http://localhost:8000/product-serv/index.html

通过nginx访问：http://zmall.com/product-serv/index.html