1 商品详情
1.1 搭建域名环境
1.域名映射的代码如下:
192.168.56.10 item.gulimall.com
如图所示：
2.网关配置的代码如下:
server:
port: 90
spring:
application:
name: gulimall-gateway
cloud:
nacos:
discovery:
server-addr: 192.168.56.10:8848
namespace: e281be23-c845-48d3-98b5-92beaa5ca4ba
group: dev
gateway:
routes:
- id: product_route
uri: lb://gulimall-product
predicates:
- Path=/api/product/**, /hello
filters:
- RewritePath=/api/(?<segment>.*), /$\{segment}
- id: ware_route
uri: lb://gulimall-ware
predicates:
- Path=/api/ware/**
filters:
- RewritePath=/api/(?<segment>.*), /$\{segment}
- id: member_route
uri: lb://gulimall-member
predicates:
- Path=/api/member/**
filters:
- RewritePath=/api/(?<segment>.*), /$\{segment}
- id: search_route
uri: lb://gulimall-search
predicates:
- Path=/api/search/**
filters:
- RewritePath=/api/(?<segment>.*), /$\{segment}
- id: third_party_route
uri: lb://gulimall-third-party
predicates:
- Path=/api/thirdparty/**
filters:
- RewritePath=/api/thirdparty/(?<segment>.*), /$\{segment}
- id: admin_route
uri: lb://gulimall-admin
predicates:
- Path=/api/**
filters:
- RewritePath=/api/(?<segment>.*), /gulimall-admin/$\{segment}
- id: gulimall_host_route
uri: lb://gulimall-product
predicates:
- Host=gulimall.com,item.gulimall.com
- id: gulimall_search_host_route
uri: lb://gulimall-search
predicates:
- Host=search.gulimall.com
配置为如图所示:
3.Nginx静态资源，如图所示：
4.模板页面item.html放入到gulimall-product商品服务的templates目录下，静态资源路径加前置 /static/item/，如图所示：
1.2 商品详情VO模型抽取
1.编写SkuItemVO的代码如下:
package com.txw.gulimall.product.vo;
import com.txw.gulimall.product.entity.SkuImagesEntity;
import com.txw.gulimall.product.entity.SkuInfoEntity;
import com.txw.gulimall.product.entity.SpuInfoDescEntity;
import lombok.Data;
import java.util.List;
/**
* sku详情页 {@link SkuItemVO}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@Data
public class SkuItemVO {
/**
* sku基本信息
*/
private SkuInfoEntity skuInfo;
/**
* 是否有货
*/
private Boolean hasStock;
/**
* sku图片信息
*/
private List<SkuImagesEntity> images;
/**
* spu销售属性组合
*/
private List<SkuSaleAttrVO> saleAttrs;
/**
* spu介绍
*/
private SpuInfoDescEntity spuDesc;
/**
* spu规格参数
*/
private List<SpuAttrGroupVO> groupAttrs;
}
如图所示：
2.编写SkuSaleAttrVO的代码如下:
package com.txw.gulimall.product.vo;
import lombok.Data;
import java.util.List;
/**
* 销售属性 {@link SkuSaleAttrVO}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@Data
public class SkuSaleAttrVO {
private Long attrId;
private String attrName;
private List<AttrValueWithSkuIdVO> attrValues;
}
如图所示：
3.编写AttrValueWithSkuIdVO的代码如下:
package com.txw.gulimall.product.vo;
import lombok.Data;
/**
* sku属性组合 {@link AttrValueWithSkuIdVO}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@Data
public class AttrValueWithSkuIdVO {
private String attrValue;
private String skuIds;
}
如图所示：
4.编写SpuAttrGroupVO的代码如下:
package com.txw.gulimall.product.vo;
import lombok.Data;
import java.util.List;
/**
* 规格参数分组 {@link SpuAttrGroupVO}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@Data
public class SpuAttrGroupVO {
private String groupName;
private List<Attr> attrs;
}
如图所示：
1.3 后台接口实现
1.编写ItemController的代码如下：
package com.txw.gulimall.product.web;
import com.txw.gulimall.product.service.SkuInfoService;
import com.txw.gulimall.product.vo.SkuItemVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
/**
* 商品详情页 {@link ItemController}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@SuppressWarnings("all") // 注解警告信息
@Controller
public class ItemController {
@Autowired
private SkuInfoService skuInfoService;
/**
* sku详情页
* @param skuId
* @return
*/
@GetMapping("/{skuId}.html")
public String item(@PathVariable("skuId") Long skuId, Model model) {
SkuItemVO skuItemVO = skuInfoService.item(skuId);
model.addAttribute("skuItemVO", skuItemVO);
return "item";
}
}
如图所示：
2.编写SkuInfoService的代码如下：
/**
* sku详情页
* @param skuId
* @return
*/
SkuItemVO item(Long skuId);
如图所示：
3.编写SkuInfoServiceImpl的代码如下：
/**
* sku详情页
* @param skuId
* @return
*/
@Override
public SkuItemVO item(Long skuId) {
SkuItemVO skuItemVO = new SkuItemVO();
// 1.sku基本信息 pms_sku_info
SkuInfoEntity skuInfo = getById(skuId);
skuItemVO.setSkuInfo(skuInfo);
Long spuId = skuInfo.getSpuId();
Long catalogId = skuInfo.getCatalogId();
// TODO 查询库存
skuItemVO.setHasStock(true);
// 2.sku图片信息 pms_sku_images
List<SkuImagesEntity> images = skuImagesService.getImagesBySkuId(skuId);
skuItemVO.setImages(images);
// 3.spu销售属性组合
List<SkuSaleAttrVO> saleAttrs = skuSaleAttrValueService.getSaleAttrsBySpuId(spuId);
skuItemVO.setSaleAttrs(saleAttrs);
// 4.spu商品介绍
SpuInfoDescEntity spuInfoDescEntity = spuInfoDescService.getById(spuId);
skuItemVO.setSpuDesc(spuInfoDescEntity);
// 5.spu规格参数
List<SpuAttrGroupVO> groupAttrs = attrGroupService.getAttrGroupWithAttrsBySpuId(catalogId, spuId);
skuItemVO.setGroupAttrs(groupAttrs);
return skuItemVO;
}
如图所示：
4.编写SkuImagesService的代码如下：
/**
* 查询sku图片信息
* @param skuId
* @return
*/
List<SkuImagesEntity> getImagesBySkuId(Long skuId);
如图所示：
5.编写SkuImagesServiceImpl的代码如下：
/**
* 查询sku图片信息
* @param skuId
* @return
*/
@Override
public List<SkuImagesEntity> getImagesBySkuId(Long skuId) {
List<SkuImagesEntity> imagesEntities = list(new QueryWrapper<SkuImagesEntity>().eq("sku_id", skuId));
return imagesEntities;
}
如图所示：
6.编写SkuSaleAttrValueService的代码如下：
/**
* 查询 spu销售属性组合
* @param spuId
* @return
*/
List<SkuSaleAttrVO> getSaleAttrsBySpuId(Long spuId);
如图所示：
7.编写SkuSaleAttrValueServiceImpl的代码如下：
/**
* 查询spu销售属性组合
* @param spuId
* @return
*/
@Override
public List<SkuSaleAttrVO> getSaleAttrsBySpuId(Long spuId) {
List<SkuSaleAttrVO> saleAttrVOS = baseMapper.selectSaleAttrsBySpuId(spuId);
return saleAttrVOS;
}
如图所示：
8.编写SkuSaleAttrValueDao的代码如下：
package com.txw.gulimall.product.dao;
import com.txw.gulimall.product.entity.SkuSaleAttrValueEntity;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.txw.gulimall.product.vo.SkuSaleAttrVO;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import java.util.List;
/**
* sku销售属性&值
*
* @author Adair
* @email 1578533828@qq.com
* @date 2021-11-12 11:37:26
*/
@SuppressWarnings("all") // 注解警告信息
@Mapper
public interface SkuSaleAttrValueDao extends BaseMapper<SkuSaleAttrValueEntity> {
/**
* 查询spu销售属性组合
* @param spuId
* @return
*/
List<SkuSaleAttrVO> selectSaleAttrsBySpuId(@Param("spuId") Long spuId);
}
如图所示：
9…编写SkuSaleAttrValueDao.xml的代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.txw.gulimall.product.dao.SkuSaleAttrValueDao">
<!-- 可根据自己的需求，是否要使用 -->
<resultMap type="com.txw.gulimall.product.entity.SkuSaleAttrValueEntity" id="skuSaleAttrValueMap">
<result property="id" column="id"/>
<result property="skuId" column="sku_id"/>
<result property="attrId" column="attr_id"/>
<result property="attrName" column="attr_name"/>
<result property="attrValue" column="attr_value"/>
<result property="attrSort" column="attr_sort"/>
</resultMap>
<resultMap id="skuSaleAttrVO" type="com.txw.gulimall.product.vo.SkuSaleAttrVO">
<result property="attrId" column="attr_id"/>
<result property="attrName" column="attr_name"/>
<collection property="attrValues" ofType="com.txw.gulimall.product.vo.AttrValueWithSkuIdVO">
<result property="attrValue" column="attr_value"/>
<result property="skuIds" column="sku_ids"/>
</collection>
</resultMap>
<!--查询spu销售属性组合-->
<select id="selectSaleAttrsBySpuId" resultMap="skuSaleAttrVO">
SELECT
skv.attr_id attr_id,
skv.attr_name attr_name,
skv.attr_value attr_value,
GROUP_CONCAT( DISTINCT ski.sku_id ) sku_ids
FROM
pms_sku_info ski
LEFT JOIN pms_sku_sale_attr_value skv ON skv.sku_id = ski.sku_id
WHERE
ski.spu_id = #{spuId}
GROUP BY
skv.attr_id,
skv.attr_name,
skv.attr_value
</select>
</mapper>
如图所示：
10.编写AttrGroupService的代码如下：
/**
* 获取商品的所有属性分组及关联的所有属性
* @param catalogId 三级分类id
* @param spuId
* @return
*/
List<SpuAttrGroupVO> getAttrGroupWithAttrsBySpuId(Long catalogId, Long spuId);
如图所示：
11.编写AttrGroupServiceImpl的代码如下：
/**
* 获取商品的所有属性分组及关联的所有属性
* @param catalogId 三级分类id
* @param spuId
* @return
*/
@Override
public List<SpuAttrGroupVO> getAttrGroupWithAttrsBySpuId(Long catalogId, Long spuId) {
List<SpuAttrGroupVO> vos = baseMapper.selectAttrGroupWithAttrsBySpuId(catalogId, spuId);
return vos;
}
如图所示：
12.编写AttrGroupDao的代码如下：
package com.txw.gulimall.product.dao;
import com.txw.gulimall.product.entity.AttrGroupEntity;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.txw.gulimall.product.vo.SpuAttrGroupVO;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import java.util.List;
/**
* 属性分组
*
* @author Adair
* @email 1578533828@qq.com
* @date 2021-11-12 11:37:27
*/
@SuppressWarnings("all") // 注解警告信息
@Mapper
public interface AttrGroupDao extends BaseMapper<AttrGroupEntity> {
/**
* 获取商品的所有属性分组及关联的所有属性
* @param catalogId
* @param spuId
* @return
*/
List<SpuAttrGroupVO> selectAttrGroupWithAttrsBySpuId(@Param("catalogId") Long catalogId,
@Param("spuId") Long spuId);
}
如图所示：
13.编写AttrGroupDao.xml的代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.txw.gulimall.product.dao.AttrGroupDao">
<!-- 可根据自己的需求，是否要使用 -->
<resultMap type="com.txw.gulimall.product.entity.AttrGroupEntity" id="attrGroupMap">
<result property="attrGroupId" column="attr_group_id"/>
<result property="attrGroupName" column="attr_group_name"/>
<result property="sort" column="sort"/>
<result property="descript" column="descript"/>
<result property="icon" column="icon"/>
<result property="catelogId" column="catelog_id"/>
</resultMap>
<resultMap id="spuAttrGroupVO" type="com.txw.gulimall.product.vo.SpuAttrGroupVO">
<result property="groupName" column="attr_group_name"/>
<collection property="attrs" ofType="com.txw.gulimall.product.vo.Attr">
<result property="attrName" column="attr_name"/>
<result property="attrValue" column="attr_value"/>
</collection>
</resultMap>
<!--获取商品的所有属性分组及关联的所有属性-->
<select id="selectAttrGroupWithAttrsBySpuId"
resultMap="spuAttrGroupVO">
SELECT
pav.spu_id,
ag.attr_group_id,
ag.attr_group_name,
attr.attr_name,
pav.attr_value
FROM
pms_attr_group ag
LEFT JOIN pms_attr_attrgroup_relation aar ON aar.attr_group_id = ag.attr_group_id
LEFT JOIN pms_attr attr ON attr.attr_id = aar.attr_id
LEFT JOIN pms_product_attr_value pav ON pav.attr_id = attr.attr_id
WHERE
ag.catelog_id = #{catalogId}
AND pav.spu_id = #{spuId}
</select>
</mapper>
如图所示：
1.4 商品详情页面渲染
sku图片
sku标题
sku价格
sku销售属性组合
商品介绍
规格与包装
1.修改list.html，如图所示：
2 Thread 线程
2.1 初始化线程的4种方式
继承 Thread
实现 Runnable 接口
实现 Callable接口 + FutureTask （可以拿到返回结果，可以处理异常）
线程池 ExecutorService
方式1和方式2：主进程无法获取线程的运算结果。
方式3：主进程可以获取线程的运算结果，但是不利于控制服务器中的线程资源。可能导致服务器资源耗尽。
2.2 创建线程池
2.2.1 两种方式初始化线程池
Executors工具类的代码如下：
Executors.newFiexedThreadPool(8);
ThreadPoolExecutor的代码如下：
/**
* corePoolSize 核心线程数
* maximumPoolSize 最大线程数，控制资源
* keepAliveTime 存活时间，当前线程数大于核心线程数，释放空闲线程
* TimeUnit 存活时间单位
* workQueue 阻塞队列（BlockingQueue），存放任务队列，只要有空闲线程就去队列取出继续执行
* threadFactory 线程创建工厂
* handler 如果队列满了，按照指定的拒绝策略拒绝执行任务
*/
new ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUnit unit, BlockingQueue<Runnable> workQueue, ThreadFactory threadFactory, RejectedExecutionHandler handler);
new ThreadPoolExecutor(
8,
100,
10,
TimeUnit.SECONDS,
new LinkedBlockingDeque<>(10000),
Executors.defaultThreadFactory(),
new ThreadPoolExecutor.AbortPolicy()
)
通过线程池性能稳定，也可以获取执行结果，并捕获异常。但是，在业务复杂情况下，一个异步调用可能会依赖于另一个异步调用的执行结果。
使用CompletableFuture异步编排来解决异步调用依赖问题
2.2.2 线程池运行流程
1.线程池创建好，准备好core数量的核心线程，准备接受任务
2.新的任务进来，用core准备好的空闲线程执行
1.core满了，就将再进来的任务放入阻塞队列中，空闲的core就会自己去阻塞队列获取任务执行
2.阻塞队列满了，就直接开新线程执行，最大只能开到max指定的数量
3.max满了，max-core数量空闲的线程会在KeepAliveTime指定的时间后自动销毁，最终保持到
core大小
4.如果线程数开到了max的数量，还有新任务进来，就会使用reject指定的拒绝策略进行处理
3.所有的线程创建都是由指定的factory创建的
面试：一个线程池 core：7，max：20，queue：50，100个并发进来怎么分配？
有7个能直接得到执行，接下来50个进入队列排队，再多开13个线程继续执行，现在就有70个被分配上了，剩下的30个默认拒绝策略。
阿里面试：如果给你8G内存，500G固态硬盘，双CPU四核的配置，现在有100个用户访问你的系
统，请你设计一下你刚刚说的那些线程池参数。
为了说明合理设置的条件，我们首先确定有以下几个相关参数：
1.tasks，程序每秒需要处理的最大任务数量（假设系统每秒任务数为100~1000）
2.tasktime，单线程处理一个任务所需要的时间（每个任务耗时0.1秒）
3.responsetime，系统允许任务最大的响应时间（每个任务的响应时间不得超过2秒）
corePoolSize：核心线程数
每个任务需要tasktime秒处理，则每个线程每钞可处理1/tasktime个任务。系统每秒有tasks个任务
需要处理，则需要的线程数为：tasks/(1/tasktime)，即taskstasktime个线程数。假设系统每秒任
务数为100~1000，每个任务耗时0.1秒，则需要1000.1至10000.1，即10~100个线程。那么
corePoolSize应该设置为大于10，具体数字最好根据8020原则，即80%情况下系统每秒任务数，若
系统80%的情况下任务数小于200，最多时为1000，则corePoolSize可设置为20
queueCapacity：任务队列的长度:
任务队列的长度要根据核心线程数，以及系统对任务响应时间的要求有关。队列长度可以设置为
(corePoolSize/tasktime)responsetime： (20/0.1)2=400，即队列长度可设置为400。
如果队列长度设置过大，会导致任务响应时间过长，如以下写法：
LinkedBlockingQueue queue = new LinkedBlockingQueue();
这实际上是将队列长度设置为Integer.MAX_VALUE，将会导致线程数量永远为corePoolSize，再也
不会增加，当任务数量陡增时，任务响应时间也将随之陡增。
maxPoolSize:最大线程数
当系统负载达到最大值时，核心线程数已无法按时处理完所有任务，这时就需要增加线程。每秒
200个任务需要20个线程，那么当每秒达到1000个任务时，则需要(1000-
queueCapacity)X(20/200)，即60个线程，可将maxPoolSize设置为60。
keepAliveTime：线程存活时间
线程数量只增加不减少也不行。当负载降低时，可减少线程数量，如果一个线程空闲时间达到
keepAliveTiime，该线程就退出。默认情况下线程池最少会保持corePoolSize个线程。
keepAliveTiime设定值可根据任务峰值持续时间来设定。
以上关于线程数量的计算并没有考虑CPU的情况。若结合CPU的情况，比如，当线程数量达到50
时，CPU达到100%，则将maxPoolSize设置为60也不合适，此时若系统负载长时间维持在每秒
1000个任务，则超出线程池处理能力，应设法降低每个任务的处理时间(tasktime)。
应用是IO密集型和CPU密集型
CPU繁忙时间占比越高，设置线程数越少，CPU繁忙时间占比越低，设置线程数越多（当然也有限
度）。
2.2.3 常见的4种线程池
newCachedThreadPool
创建一个可缓存线程池，若线程池长度超过处理需要，可灵活回收空闲线程，若无可回收，则新建线程。
newFixedThreadPool
创建一个定长线程池，可控制线程最大并发数，超出的线程会在队列中等待。
newScheduledThreadPool
创建一个定长线程池，支持定时及周期性任务执行。
newSingleThreadExecutor
创建一个单线程化的线程池，它只会用唯一的工作线程来执行任务，保证所有任务。
2.2.4 线程池好处
降低资源的消耗
通过重复利用已经创建好的线程降低线程的创建和销毁带来的损耗。
提高响应速度
因为线程池中的线程数没有超过线程池的最大上限时，有的线程处于等待分配任务的状态，当任务来时无需创建新的线程就能执行。
提高线程的可管理性
线程池会根据当前系统特点对池内的线程进行优化处理，减少创建和销毁线程带来的系统开销。无限的创建和销毁线程不仅消耗系统资源，还降低系统的稳定性，使用线程池进行统一分配。
PS：在使用多线程之前要确认一点，是否需要使用多线程，因为多线程会带来切换的开销，如果不
断切换上下文的开销损耗和程序新增的复杂度大于并行带来的受益，那么是不建议使用多线程的。
3 CompletableFuture 异步编排
3.1 业务场景
查询商品详情页的逻辑比较复杂，有些数据还需要远程调用，必然需要花费更多的时间。
获取sku的基本信息：0.5s
获取sku的图片信息：0.5s
获取sku的促销信息：1s
获取spu的所有销售属性：1s
获取规格参数组及组下的规格参数：1.5s
spu详情：1s
假如商品详情页的每个查询，需要以上标注的时间才能完成，那么，用户需要5.5s后才能看到商品详情页的内容，很显然是不能接受的。如果有多个线程同时完成这6步操作，也许只需要1.5s即可完成响应。
3.2 CompletableFuture介绍
Future是Java 5添加的类，用来描述一个异步计算的结果。你可以使用isDone方法检查计算是否完成，或者使用get阻塞住调用线程，直到计算完成返回结果，你也可以使用cancel方法停止任务的执行。
虽然Future以及相关使用方法提供了异步执行任务的能力，但是对于结果的获取却是很不方便，只能通过阻塞或者轮询的方式得到任务的结果。阻塞的方式显然和我们的异步编程的初衷相违背，轮询的方式又会耗费无谓的CPU资源，而且也不能及时地得到计算结果，为什么不能用观察者设计模式当计算结果完成及时通知监听者呢？
很多语言，比如Node.js，采用回调的方式实现异步编程。Java的一些框架，比如Netty，自己扩展了Java的Future接口，提供了addListener等多个扩展方法；Google guava也提供了通用的扩展
Future；Scala也提供了简单易用且功能强大的Future/Promise异步编程模式。
作为正统的Java类库，是不是应该做点什么，加强一下自身库的功能呢？
在Java 8中, 新增加了一个包含50个方法左右的类: CompletableFuture，提供了非常强大的Future的扩展功能，可以帮助我们简化异步编程的复杂性，提供了函数式编程的能力，可以通过回调的方式处理计算结果，并且提供了转换和组合CompletableFuture的方法。
CompletableFuture类实现了Future接口，所以你还是可以像以前一样通过get方法阻塞或者轮询的方式获得结果，但是这种方式不推荐使用。
CompletableFuture和FutureTask同属于Future接口的实现类，都可以获取线程的执行结果。
3.3 创建异步对象
CompletableFuture提供了四个静态方法来创建一个异步操作。
static CompletableFuture<Void> runAsync(Runnable runnable)
public static CompletableFuture<Void> runAsync(Runnable runnable, Executor executor)
public static <U> CompletableFuture<U> supplyAsync(Supplier<U> supplier)
public static <U> CompletableFuture<U> supplyAsync(Supplier<U> supplier, Executor executor)
没有指定Executor的方法会使用ForkJoinPool.commonPool() 作为它的线程池执行异步代码。如果指定线程池，则使用指定的线程池运行。以下所有的方法都类同。
runAsync方法不支持返回值
supplyAsync可以支持返回值
3.4 计算完成时回调方法
当CompletableFuture的计算结果完成，或者抛出异常的时候，可以执行特定的Action。主要是下面的方法：
public CompletableFuture<T> whenComplete(BiConsumer<? super T,? super Throwable> action);
public CompletableFuture<T> whenCompleteAsync(BiConsumer<? super T,? super Throwable> action);
public CompletableFuture<T> whenCompleteAsync(BiConsumer<? super T,? super Throwable> action, Executor executor);
public CompletableFuture<T> exceptionally(Function<Throwable,? extends T> fn);
whenComplete可以处理正常和异常的计算结果
exceptionally处理异常情况
BiConsumer<? super T,? super Throwable>可以定义处理业务
whenComplete和whenCompleteAsync的区别：
whenComplete：是执行当前任务的线程执行继续执行whenComplete的任务。
whenCompleteAsync：是执行把whenCompleteAsync这个任务继续提交给线程池来进行执行。
方法不以Async结尾，意味着Action使用相同的线程执行，而Async可能会使用其他线程执行（如果是使用相同的线程池，也可能会被同一个线程选中执行）。
代码示例：
public class CompletableFutureDemo {
public static void main(String[] args) throws ExecutionException,
InterruptedException {
CompletableFuture future = CompletableFuture.supplyAsync(new
Supplier<Object>() {
@Override
public Object get() {
System.out.println(Thread.currentThread().getName() + "\t
completableFuture");
int i = 10 / 0;
return 1024;
}
}).whenComplete(new BiConsumer<Object, Throwable>() {
@Override
public void accept(Object o, Throwable throwable) {
System.out.println(" o=" + o.toString());
System.out.println(" throwable=" + throwable);
}
}).exceptionally(new Function<Throwable, Object>() {
@Override
public Object apply(Throwable throwable) {
System.out.println("throwable=" + throwable);
return 666;
}
});
System.out.println(future.get()); 666
}
}
3.5 handle方法
public <U> CompletableFuture<U> handle(BiFunction<? super T, Throwable, ? extends U> fn);
public <U> CompletableFuture<U> handleAsync(BiFunction<? super T, Throwable, ? extends U> fn);
public <U> CompletableFuture<U> handleAsync(BiFunction<? super T, Throwable, ? extends U> fn, Executor executor);
和CompletableFuture一样，可对结果做最后处理（可处理异常），可改变返回值。
3.6 线程串行化方法
public <U> CompletableFuture<U> thenApply(Function<? super T,? extends U> fn)
public <U> CompletableFuture<U> thenApplyAsync(Function<? super T,? extends U> fn)
public <U> CompletableFuture<U> thenApplyAsync(Function<? super T,? extends U> fn, Executor executor)
public CompletionStage<Void> thenAccept(Consumer<? super T> action);
public CompletionStage<Void> thenAcceptAsync(Consumer<? super T> action);
public CompletionStage<Void> thenAcceptAsync(Consumer<? super T> action,Executor executor);
public CompletionStage<Void> thenRun(Runnable action);
public CompletionStage<Void> thenRunAsync(Runnable action);
public CompletionStage<Void> thenRunAsync(Runnable action,Executor executor);
thenApply方法：当一个线程依赖另一个线程时，获取上一个任务返回的结果，并返回当前任务的返回值
thenAccept方法：消费处理结果。接收任务的处理结果，并消费处理，无返回结果
thenRun方法：只要上面的任务执行完成，就开始执行thenRun，只是处理完任务，执行thenRun的后续操作
带有Async默认是异步执行的，这里所谓的异步指的是不在当前线程内执行
Function<? super T,? extends U>
T：上一个任务返回结果的类型
U：当前任务的返回值类型
代码演示：
public static void main(String[] args) throws ExecutionException, InterruptedException {
CompletableFuture<Integer> future = CompletableFuture.supplyAsync(new Supplier<Integer>() {
@Override
public Integer get() {
System.out.println(Thread.currentThread().getName() + "\t completableFuture");
int i = 10 / 0;
return 1024;
}
}).thenApply(new Function<Integer, Integer>() {
@Override
public Integer apply(Integer o) {
System.out.println("thenApply方法，上次返回结果：" + o);
return o * 2;
}
}).whenComplete(new BiConsumer<Integer, Throwable>() {
@Override
public void accept(Integer o, Throwable throwable) {
System.out.println(" o=" + o);
System.out.println(" throwable=" + throwable);
}
}).exceptionally(new Function<Throwable, Integer>() {
@Override
public Integer apply(Throwable throwable) {
System.out.println("throwable=" + throwable);
return 666;
}
});
System.out.println(future.get());
}
3.7 多任务组合
public static CompletableFuture<Void> allOf(CompletableFuture<?> cfs);
public static CompletableFuture<Object> anyOf(CompletableFuture<?> cfs);
allOf：等待所有任务完成
anyOf：只要有一个任务完成
代码示例：
public static void main(String[] args) {
List<CompletableFuture> futures = Arrays.asList(
CompletableFuture.completedFuture("hello"),
CompletableFuture.completedFuture(" world!"),
CompletableFuture.completedFuture(" hello"),
CompletableFuture.completedFuture("java!"));
final CompletableFuture<Void> allCompleted =
CompletableFuture.allOf(futures.toArray(new CompletableFuture[]{}));
allCompleted.thenRun(() {
futures.stream().forEach(future -> {
try {
System.out.println("get future at:"+System.currentTimeMillis()+",
result:"+future.get());
} catch (InterruptedException | ExecutionException e) {
e.printStackTrace();
}
});
});
}
测试结果：
get future at:1568892339473, result:hello
get future at:1568892339473, result: world!
get future at:1568892339473, result: hello
get future at:1568892339473, result:java!
几乎同时完成任务！
4 商品详情优化
4.1 优化方式
代码优化（多线程与异步编排）
页面静态化
4.2 代码优化
1.使用多线程及以异步编排来优化商品详情接口实现逻辑的代码如下：
/**
* 商品详情
* @param skuId
* @return
*/
@Override
public SkuItemVO item(Long skuId) {
SkuItemVO skuItemVO = new SkuItemVO();
// 异步编排
CompletableFuture<SkuInfoEntity> skuInfoFuture = CompletableFuture.supplyAsync(() -> {
// 1.sku基本信息 pms_sku_info
SkuInfoEntity skuInfo = getById(skuId);
skuItemVO.setSkuInfo(skuInfo);
return skuInfo;
}, executor);
CompletableFuture<Void> saleAttrFuture = skuInfoFuture.thenAcceptAsync((res) -> {
// 3.spu销售属性组合
List<SkuSaleAttrVO> saleAttrs = skuSaleAttrValueService.getSaleAttrsBySpuId(res.getSpuId());
skuItemVO.setSaleAttrs(saleAttrs);
}, executor);
CompletableFuture<Void> descFuture = skuInfoFuture.thenAcceptAsync((res) -> {
// 4.spu商品介绍
SpuInfoDescEntity spuInfoDescEntity = spuInfoDescService.getById(res.getSpuId());
skuItemVO.setSpuDesc(spuInfoDescEntity);
}, executor);
CompletableFuture<Void> baseAttrFuture = skuInfoFuture.thenAcceptAsync((res) -> {
// 5.spu规格参数
List<SpuAttrGroupVO> groupAttrs = attrGroupService.getAttrGroupWithAttrsBySpuId(
res.getCatalogId(), res.getSpuId());
skuItemVO.setGroupAttrs(groupAttrs);
}, executor);
CompletableFuture<Void> imageFuture = CompletableFuture.runAsync(() -> {
// 2.sku图片信息 pms_sku_images
List<SkuImagesEntity> images = skuImagesService.getImagesBySkuId(skuId);
skuItemVO.setImages(images);
}, executor);
try {
// 等待所有任务执行完
CompletableFuture.allOf(saleAttrFuture, descFuture, baseAttrFuture, imageFuture).get();
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
// TODO 查询库存
skuItemVO.setHasStock(true);
return skuItemVO;
}
如图所示：
2.编写ThreadPoolProperties的代码如下：
package com.txw.gulimall.product.config;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
/**
*线程池配置 {@link ThreadPoolProperties}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@ConfigurationProperties(prefix = "gulimall.thread")
@Data
public class ThreadPoolProperties {
/**
* 核心线程数
*/
private Integer coreSize;
/**
* 最大线程数
*/
private Integer maxSize;
/**
* 空闲回收时间
*/
private Integer keepAliveTime;
/**
* 队列大小
*/
private Integer queueSize;
}
如图所示：
3编写ThreadPoolConfig的代码如下：
package com.txw.gulimall.product.config;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.concurrent.Executors;
import java.util.concurrent.LinkedBlockingDeque;
import java.util.concurrent.ThreadPoolExecutor;
import java.util.concurrent.TimeUnit;
/**
* 线程池配置 {@link ThreadPoolConfig}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@EnableConfigurationProperties(ThreadPoolProperties.class)
@Configuration
public class ThreadPoolConfig {
@Bean
public ThreadPoolExecutor threadPoolExecutor(ThreadPoolProperties threadPool) {
return new ThreadPoolExecutor(
threadPool.getCoreSize(),
threadPool.getMaxSize(),
threadPool.getKeepAliveTime(),
TimeUnit.SECONDS,
new LinkedBlockingDeque<>(threadPool.getQueueSize()),
Executors.defaultThreadFactory(),
new ThreadPoolExecutor.AbortPolicy());
}
}
如图所示：
4.编写application.properties的代码如下：
#线程池的配置
gulimall.thread.core-size=10
gulimall.thread.max-size=60
gulimall.thread.keep-alive-time=10
gulimall.thread.queue-size=400
如图所示：
5 页面静态化
5.1 简介
5.1.1 问题分析
现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询，而后渲染得到HTML页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。
大家能想到什么办法来解决这个问题？
首先我们能想到的就是缓存技术，比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大，例如我们的商品详情页。每个页面如果10kb，100万商品，就是10GB空间，对内存占用比较大。此时就给缓存系统带来极大压力，如果缓存崩溃，接下来倒霉的就是数据库了。
所以缓存并不是万能的，某些场景需要其它技术来解决，比如静态化。
5.1.2 什么是静态化
静态化是指把动态生成的HTML页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染。
而静态的HTML页面可以部署在nginx中，从而大大提高并发能力，减小tomcat压力。
5.1.3 如何实现静态化
目前，静态化页面都是通过模板引擎来生成，而后保存到nginx服务器来部署。常用的模板引擎比如：
Freemarker
Velocity
Thymeleaf
我们之前就使用的Thymeleaf，来渲染html返回给用户。Thymeleaf除了可以把渲染结果写入
Response，也可以写到本地文件，从而实现静态化。
5.2 Thymeleaf实现静态化
5.2.1 概念
先说下Thymeleaf中的几个概念：
Context：运行上下文
TemplateResolver：模板解析器
TemplateEngine：模板引擎
Context
上下文： 用来保存模型数据，当模板引擎渲染时，可以从Context上下文中获取数据用于渲染。
当与SpringBoot结合使用时，我们放入Model的数据就会被处理到Context，作为模板渲染的数据使用。
TemplateResolver
模板解析器：用来读取模板相关的配置，例如：模板存放的位置信息，模板文件名称，模板文件的类型等等。
当与SpringBoot结合时，TemplateResolver已经由其创建完成，并且各种配置也都有默认值，比如模板存放位置，其默认值就是：templates。比如模板文件类型，其默认值就是html。
TemplateEngine
模板引擎：用来解析模板的引擎，需要使用到上下文、模板解析器。分别从两者中获取模板中需要的数据，模板文件。然后利用内置的语法规则解析，从而输出解析后的文件。来看下模板引擎进行处理的函数：
templateEngine.process("模板名", context, writer);
三个参数：
模板名称
上下文：里面包含模型数据。
writer：输出目的地的流。
在输出时，我们可以指定输出的目的地，如果目的地是Response的流，那就是网络响应。如果目的地是本地文件，那就实现静态化了。
而在SpringBoot中已经自动配置了模板引擎，因此我们不需要关心这个。现在我们做静态化，就是把输出的目的地改成本地文件即可！
5.2.2 具体实现
1.编写ItemController的代码如下：
package com.txw.gulimall.product.web;
import com.txw.gulimall.product.service.SkuInfoService;
import com.txw.gulimall.product.vo.SkuItemVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
/**
* 商品详情页 {@link ItemController}
* @author Adair
* E-mail: 1578533828@qq.com
*/
@SuppressWarnings("all") // 注解警告信息
@Controller
public class ItemController {
@Autowired
private SkuInfoService skuInfoService;
/**
* sku详情页
* @param skuId
* @return
*/
@GetMapping("/{skuId}.html")
public String item(@PathVariable("skuId") Long skuId, Model model) {
try {
SkuItemVO skuItemVO = skuInfoService.item(skuId);
model.addAttribute("skuItemVO", skuItemVO);
} catch (Exception e) {
e.printStackTrace();
}
// 创建静态页面
skuInfoService.createHtml(skuId);
return "item";
}
}
如图所示：
2.编写SkuInfoService的代码如下：
/**
* 创建静态页面
* @param skuId
*/
void createHtml(Long skuId);
如图所示：
3.编写SkuInfoServiceImpl的代码如下：
/**
* 创建静态化页面
* @param skuId
*/
@Override
public void createHtml(Long skuId) {
// 新建线程处理静态化页面
executor.submit(() -> {
PrintWriter writer = null;
try {
// 获取页面数据
SkuItemVO skuItemVO = item(skuId);
// 创建thymeleaf上下文对象
Context context = new Context();
// 把数据放入上下文对象
context.setVariable("skuItemVO", skuItemVO);
// 创建输出流，指定输出目的地
// 上线后，这个目的地应该配置为 nginx 的一个资源目录
File file = new File("E:\\" + skuId + ".html");
writer = new PrintWriter(file);
// 执行页面静态化方法
templateEngine.process("item", context, writer);
} catch (Exception e) {
log.error("页面静态化出错：{}", e, skuId);
} finally {
if (writer != null) {
writer.close();
}
}
});
}
如图所示：
注意：生成html 的代码不能对用户请求产生影响，所以这里我们使用额外的线程进行异步创建。
5.2.3 什么时候创建静态文件
我们编写好了创建静态文件的service，那么问题来了：什么时候去调用它呢？
想想这样的场景：
假如大部分的商品都有了静态页面。那么用户的请求都会被nginx拦截下来，根本不会到达 yomall-product 服务。只有那些还没有页面的请求，才可能会到达这里。
因此，如果请求到达了这里，我们除了返回页面视图外，还应该创建一个静态页面，那么下次就不会再访问yomall-product服务的业务处理方法了。
所以，我们在ItemController中添加逻辑，去生成静态html文件。
5.3 Nginx代理静态页面
接下来，我们修改nginx，让它对商品请求进行监听，指向本地静态页面，如果本地没找到，才进行反向代理的代码如下：
server {
listen 80;
listen [::]:80;
server_name *.gulimall.com gulimall.com; #域名
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location /static/ {
root /usr/share/nginx/html;
}
location /item {
root /usr/share/nginx/html;
if (!-f $request_filename){
proxy_pass http://gulimall;
break;
}
}
location / {
proxy_pass http://gulimall;
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_set_header Host $host; #Nginx代理给网关时，会丢失请求的Host信息
}
}
配置为如图所示：
运行报错误的信息如下：
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Tue Dec 07 15:26:11 GMT+08:00 2021
There was an unexpected error (type=Bad Request, status=400).
Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "list"
org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "list"
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:133)
at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:121)
at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:167)
at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:134)
at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:105)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:878)
at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:792)
at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1040)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)
at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:626)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:733)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.session.web.http.SessionRepositoryFilter.doFilterInternal(SessionRepositoryFilter.java:141)
at org.springframework.session.web.http.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:82)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:542)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:143)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:374)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:888)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1597)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.NumberFormatException: For input string: "list"
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Long.parseLong(Long.java:589)
at java.lang.Long.valueOf(Long.java:803)
at org.springframework.util.NumberUtils.parseNumber(NumberUtils.java:214)
at org.springframework.beans.propertyeditors.CustomNumberEditor.setAsText(CustomNumberEditor.java:115)
at org.springframework.beans.TypeConverterDelegate.doConvertTextValue(TypeConverterDelegate.java:429)
at org.springframework.beans.TypeConverterDelegate.doConvertValue(TypeConverterDelegate.java:402)
at org.springframework.beans.TypeConverterDelegate.convertIfNecessary(TypeConverterDelegate.java:155)
at org.springframework.beans.TypeConverterSupport.convertIfNecessary(TypeConverterSupport.java:73)
at org.springframework.beans.TypeConverterSupport.convertIfNecessary(TypeConverterSupport.java:53)
at org.springframework.validation.DataBinder.convertIfNecessary(DataBinder.java:693)
at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:125)
... 51 more
解决办法如下：
gulimall-gateway.yaml配置修改：
- id: gulimall_host_route
uri: lb://gulimall-product
predicates:
- Host=*.gulimall.com, gulimall.com
改为：
- id: gulimall_host_route
uri: lb://gulimall-product
predicates:
- Host=gulimall.com
- id: gulimallsearch_host_route
uri: lb://gulimall-search
predicates:
- Host=search.gulimall.co
1.index.html的代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>谷粒-正品低价、品质保证、配送及时、轻松购物！</title>
<link rel="stylesheet" href="/static/index/css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="/static/index/css/GL.css">
<script src="/static/index/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/index/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/index/js/swiper-3.4.2.min.js"></script>
</head>
<body>
<div class="top_find">
<div class="top_find_son">
<img src="/static/index/img/top_find_logo.png" alt="">
<div class="input_find">
<input type="text" placeholder="卸妆水" />
<span style="background: url(../static/index/img/img_12.png) 0 -1px;"></span>
<a href="#"><img src="/static/index/img/img_09.png" /></a>
</div>
</div>
</div>
<ul class="left_floor">
<li class="left_floor_xiang">享品质</li>
<li class="left_floor_fu">服饰美妆</li>
<li class="left_floor_jia">家电手机</li>
<li class="left_floor_dian">电脑数码</li>
<li class="left_floor_3C">3C运动</li>
<li class="left_floor_ai">爱吃</li>
<li class="left_floor_mu">母婴家居</li>
<li class="left_floor_tu">图书汽车</li>
<li class="left_floor_you">游戏金融</li>
<li class="left_floor_lv">旅行健康</li>
<li class="left_floor_hai">还没逛够</li>
<li class="left_floor_ding">顶部</li>
</ul>
<header>
<div class="head">
<a href="#"><img src="/static/index/img/img_01.png" /></a>
<p>X</p>
</div>
<!--头部-->
<div class="header_head">
<div class="header_head_box">
<a href="#" class="img"><img src="/static/index/img/logo.jpg" /></a>
<b class="header_head_p">
<a href="#">
<img src="/static/index/img/img_05.png" style="border-radius: 50%;"/>
<!--<span class="glyphicon glyphicon-map-marker"></span>-->
北京</a>
<div class="header_head_p_cs">
<a href="#" style="background: #C81623;color: #fff;">北京</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>
<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>
<a href="#">新疆</a>
<a href="#">港澳</a>
<a href="#">台湾</a>
<a href="#">钓鱼岛</a>
<a href="#">海外</a>
</div>
</b>
<ul>
<li>
<a href="/登录页面\index.html">你好，请登录</a>
</li>
<li>
<a href="/注册页面\index.html" class="li_2">免费注册</a>
</li>
<span>|</span>
<li>
<a href="#">我的订单</a>
</li>
</ul>
</div>
</div>
<!---->
<div class="header_sous">
<div class="header_form">
<input id="searchText" type="text" placeholder="" />
<span style="background: url(/static/index/img/img_12.png) 0 -1px;"></span>
<!--<button><i class="glyphicon"></i></button>-->
<!-- <a href="#" ><img src="/static/index/img/img_09.png" οnclick="search()" /></a>-->
<a href="javascript:search();" ><img src="/static/index/img/img_09.png" /></a>
</div>
<div class="header_ico">
<div class="header_gw">
<img src="/static/index/img/img_15.png" />
<span><a href="/购物车\One_JDshop.html">我的购物车</a></span>
<span>0</span>
</div>
<div class="header_ko">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</div>
<div class="header_form_nav">
<ul>
<li>
<a href="#" class="aaaaa">满999减300</a>
</li>
<li>
<a href="#">金立S11</a>
</li>
<li>
<a href="#">农用物资</a>
</li>
<li>
<a href="#">保暖特惠</a>
</li>
<li>
<a href="#">洗衣机节</a>
</li>
<li>
<a href="#">七度空间卫生巾</a>
</li>
<li>
<a href="#">自动波箱油</a>
</li>
<li>
<a href="#">超市</a>
</li>
</ul>
</div>
<nav>
<ul>
<li>
<a href="#">秒杀</a>
</li>
<li>
<a href="#">优惠券</a>
</li>
<li>
<a href="#">闪购</a>
</li>
<li>
<a href="#">拍卖</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li>
<a href="#">服饰</a>
</li>
<li>
<a href="#">超市</a>
</li>
<li>
<a href="#">生鲜</a>
</li>
<li>
<a href="#">全球购</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li>
<a href="#">金融</a>
</li>
</ul>
</nav>
<div class="right">
<a href="#"><img src="/static/index/img/img_21.png" /></a>
</div>
</div>
<!--轮播主体内容-->
<div class="header_main">
<div class="header_banner">
<div class="header_main_left">
<ul>
<li th:each="category: ${categories}">
<a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}">
<b th:text="${category.name}"></b>
</a>
</li>
</ul>
</div>
<div class="header_main_center">
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="/static/index/img/lunbo.png" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="/static/index/img/lunbo3.png" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="/static/index/img/lunbo6.png" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="/static/index/img/lunbo7.png" /></a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="header_main_center_b">
<a href="#"><img src="/static/index/img/5a13bf0bNe1606e58.jpg" /></a>
<a href="#"><img src="/static/index/img/5a154759N5385d5d6.jpg" /></a>
</div>
</div>
<div class="header_main_right">
<div class="header_main_right_user">
<div class="user_info">
<div class="user_info_tou">
<a href="#"><img class="" src="/static/index/img/touxiang.png"></a>
</div>
<div class="user_info_show">
<p class="">Hi, 欢迎来到!</p>
<p>
<a href="#" class="">登录</a>
<a href="#" class="">注册</a>
</p>
</div>
</div>
<div class="user_info_hide">
<a href="#">新人福利</a>
<a href="#">PLUS会员</a>
</div>
</div>
<div class="header_main_right_new">
<div class="header_new">
<div class="header_new_t">
<p class="active">
<a href="#">促销</a>
</p>
<p>
<a href="#">公告</a>
</p>
<a href="#">更多</a>
</div>
<div class="header_new_connter">
<div class="header_new_connter_1">
<ul>
<li>
<a href="#">全民纸巾大作战</a>
</li>
<li>
<a href="#">家具建材满999减300元</a>
</li>
<li>
<a href="#">黑科技冰箱，下单立减千元</a>
</li>
<li>
<a href="#">抢102减101神券！</a>
</li>
</ul>
</div>
<div class="header_new_connter_1" style="display: none;">
<ul>
<li>
<a href="#">关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告</a>
</li>
<li>
<a href="#">物流推出配送员统一外呼电话"95056”</a>
</li>
<li>
<a href="#">天府大件运营中心开仓公告</a>
</li>
<li>
<a href="#">大件物流“送装一体”服务全面升级！</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header_main_right_ser">
<div class="ser_box">
<ul>
<li class="ser_box_item">
<a href="#">
<img src="/static/index/img/huafei.png" />
<span>话费</span>
</a>
</li>
<li class="ser_box_item">
<a href="#">
<img src="/static/index/img/jipiao.png" />
<span>机票</span>
</a>
</li>
<li class="ser_box_item">
<a href="#">
<img src="/static/index/img/jiudian.png" />
<span>酒店</span>
</a>
</li>
<li class="ser_box_item">
<a href="#">
<img src="/static/index/img/youxi.png" />
<span>游戏</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/qiyegou.png" />
<span>企业购</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/jiayouka.png" />
<span>加油卡</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/dianyingpiao.png" />
<span>电影票</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/huochepiao.png" style="height:20px;" />
<span>火车票</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/zhongchou.png" />
<span>众筹</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/licai.png" style="height:22px;" />
<span>理财</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/lipinka.png" style="height:14px;" />
<span>礼品卡</span>
</a>
</li>
<li class="ser_box_item1">
<a href="#">
<img src="/static/index/img/baitiao.png" style="height:20px;" />
<span>白条</span>
</a>
</li>
</ul>
<div class="ser_box_aaa">
<div class="ser_box_aaa_one">
<div class="ser_box_aaa_nav">
<ol>
<li class="active">
<a href="#">话费</a>
</li>
<li>
<a href="#">机票</a>
</li>
<li>
<a href="#">酒店</a>
</li>
<li>
<a href="#">游戏</a>
</li>
</ol>
<div class="ser_ol">
<div class="ser_ol_li">
<ul>
<div class="guanbi">X</div>
<a class="active">话费充值</a>
<a>流量充值</a>
<a>套餐变更</a>
<div class="ser_ol_div">
<p>号码<input type="text" /></p>
<p style="margin: 10px 0;">面值
<select name="">
<option value="">100元</option>
<option value="">20元</option>
<option value="">50元</option>
<option value="">10元</option>
<option value="">2元</option>
</select>
<span>￥98.0-￥100.0</span></p>
</div>
<button>快速充值</button>
<p class="p">抢99减50元话费</p>
</ul>
</div>
<div class="ser_ol_li">
<ul>
<div class="guanbi">X</div>
<a class="active">国际机票</a>
<a>国际/港澳</a>
<a>特惠活动</a>
<div class="ser_ol_div1">
<p>
<input type="radio" name="a" style="vertical-align:middle;" />单程
<input type="radio" name="a" style="vertical-align:middle;" />往返
</p>
<input type="text" placeholder="出发城市" />
<input type="text" placeholder="到达城市" />
<input type="text" placeholder="日期" />
</div>
<button>机票查询</button>
<span class="p">当季热门特惠机票</span>
</ul>
</div>
<div class="ser_ol_li">
<ul>
<div class="guanbi">X</div>
<a class="active" style="width: 50%;">国内港澳台</a>
<a style="width: 50%;">促销活动</a>
<div class="ser_ol_div1">
<input type="text" placeholder="出发城市" style="margin-top: 10px;" />
<input type="text" placeholder="到达城市" />
<input type="text" placeholder="日期" />
<input type="text" placeholder="酒店 商圈 地标" />
</div>
<button>酒店查询</button>
<span class="p">订酒店到</span>
</ul>
</div>
<div class="ser_ol_li">
<ul>
<div class="guanbi">X</div>
<a class="active">点卡</a>
<a>QQ</a>
<a>页游</a>
<div class="ser_ol_div1">
<input type="text" placeholder="游戏" style="margin-top: 15px;" />
<br />面值
<select name="" style="margin: 8px 0;">
<option value="">面值</option>
<option value="">面值</option>
<option value="">面值</option>
</select><span style="color: #C81623;">￥0.00</span>
<p>
<input type="radio" name="a" style="width: 15px;vertical-align:middle;" />直充
<input type="radio" name="a" style="width: 15px;vertical-align:middle;" />卡密
</p>
</div>
<button>快速充值</button>
<span class="p">吃鸡就要快人一步</span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_banner1">
<a href="#" class="a">
<img src="/static/index/img/5a1e5ce2N034ce344.png" class="aa" />
</a>
<div class="header_banner1_div">
<p>X</p>
</div>
</div>
</div>
</header>
<div class="section_second">
<!-- 第一层 -->
<div class="section_second_header">
<p class="section_second_header_img"></p>
<div class="section_second_header_left">
<p></p>
<span class="">秒杀</span>
<span>总有你想不到的低价</span>
<span>
</span>
</div>
<div class="section_second_header_right">
<p>当前场次</p>
<span class="section_second_header_right_hours">00</span>
<span class="section_second_header_right_mao">：</span>
<span class="section_second_header_right_minutes">00</span>
<span class="section_second_header_right_mao">：</span>
<span class="section_second_header_right_second">00</span>
<p>后结束</p>
</div>
</div>
<div class="section_second_list">
<div class="swiper-container swiper_section_second_list_left">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li>
<img src="/static/index/img/section_second_list_img1.jpg" alt="">
<p>花王 (Merries) 妙而舒 纸尿裤 大号 L54片 尿不湿（9-14千克） （日本官方直采） 花王 (Merries) 妙而舒 纸尿裤 大号 L54片 尿不湿（9-14千</p>
<span>¥83.9</span><s>¥99.9</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img2.jpg" alt="">
<p>华为mate9 4GB+32GB版 月光银 移动联通电信4G手机 双卡</p>
<span>¥17.90</span><s>¥29.90</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img3.jpg" alt="">
<p>超能 植翠低泡洗衣液（鲜艳亮丽）2kg/袋装（新老包装随机</p>
<span>¥20.70</span><s>¥44.90</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img4.jpg" alt="">
<p>长城（GreatWall）红酒 特选5年橡木桶解百纳干红葡萄酒 整</p>
<span>¥399.00</span><s>¥599.00</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img5.jpg" alt="">
<p>惠普(HP)暗影精灵2代Pro 15.6英寸游戏笔记本电脑(i5-7300H</p>
<span>¥5999.00</span><s>¥6499.00</s>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li>
<img src="/static/index/img/section_second_list_img6.jpg" alt="">
<p>Apple iMac 21.5英寸一体机（2017新款四核Core i5 处理器/8GB内存/1TB/RP555显卡/4K屏 MNDY2CH/A） Apple iMac 21.5英寸一体机（2017新款四核Core i5 处理</p>
<span>¥9588.00</span><s>¥10288.00</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img7.jpg" alt="">
<p>中柏（Jumper）EZpad 4S Pro 10.6英寸二合一平板电脑（X5 z</p>
<span>¥848.00</span><s>¥899.00</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img8.jpg" alt="">
<p>飞利浦（PHILIPS）电动牙刷HX6761/03亮白型成人充电式声波震动牙刷粉色 飞利浦（PHILIPS）电动牙刷HX6761/03亮白型成人充电式声波
</p>
<span>¥379.00</span><s>¥698.00</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img9.jpg" alt="">
<p>美的(Midea) 258升 变频智能三门冰箱 一级能效 风冷无霜 中门</p>
<span>¥3088.00</span><s>¥3299.00</s>
</li>
<li>
<img src="/static/index/img/section_second_list_img10.jpg" alt="">
<p>【第二件减50元】蒙羊 内蒙古羔羊羊肋排 2.4斤</p>
<span>¥99.90</span><s>¥199.00</s>
</li>
</ul>
</div>
</div>
<div class="swiper-button-prev second_list">
<p></p>
</div>
<div class="swiper-button-next second_list">
<p></p>
</div>
</div>
<ul class="section_second_list_right">
<li>
<img src="/static/index/img/section_second_list_right_img.jpg" alt="">
</li>
<li>
<img src="/static/index/img/section_second_list_right_img.png" alt="">
</li>
<div class="section_second_list_right_button">
<p class="section_second_list_right_button_active"></p>
<p></p>
</div>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function search() {
var keyword=$("#searchText").val()
window.location.href="http://search.gulimall.com/list.html?keyword="+keyword;
}
</script>
<script type="text/javascript" src="/static/index/js/text.js"></script>
<script type="text/javascript" src="/static/index/js/header.js"></script>
<script type="text/javascript" src="/static/index/js/secend.js"></script>
<script type="text/javascript" src="/static/index/js/zz.js"></script>
<script type="text/javascript" src="/static/index/js/index.js"></script>
<script type="text/javascript" src="/static/index/js/left,top.js"></script>
<script type="text/javascript" src="/static/index/js/catalogLoader.js"></script>
</html>
如图所示：
2.item.html的代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>[[${skuItemVO.skuInfo.skuTitle}]] - 谷粒</title>
<link rel="icon" href="/static/item/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css" />
<link rel="stylesheet" href="/static/item/scss/header.css" />
<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css" />
</head>
<body>
<div id="max">
<header>
<div class="min">
<ul class="header_ul_left">
<li class="glyphicon glyphicon-home"> <a href="http://gulimall.com" class="aa">谷粒首页</a></li>
<li class="glyphicon glyphicon-map-marker"> <a href="javascript:;">北京</a>
<ol id="beijing">
<li style="background: red;"><a href="javascript:;" style="color: white;">北京</a></li>
<li><a href="javascript:;">上海</a></li>
<li><a href="javascript:;">天津</a></li>
<li><a href="javascript:;">重庆</a></li>
<li><a href="javascript:;">河北</a></li>
<li><a href="javascript:;">山西</a></li>
<li><a href="javascript:;">河南</a></li>
<li><a href="javascript:;">辽宁</a></li>
<li><a href="javascript:;">吉林</a></li>
<li><a href="javascript:;">黑龙江</a></li>
<li><a href="javascript:;">内蒙古</a></li>
<li><a href="javascript:;">江苏</a></li>
<li><a href="javascript:;">山东</a></li>
<li><a href="javascript:;">安徽</a></li>
<li><a href="javascript:;">浙江</a></li>
<li><a href="javascript:;">福建</a></li>
<li><a href="javascript:;">湖北</a></li>
<li><a href="javascript:;">湖南</a></li>
<li><a href="javascript:;">广东</a></li>
<li><a href="javascript:;">广西</a></li>
<li><a href="javascript:;">江西</a></li>
<li><a href="javascript:;">四川</a></li>
<li><a href="javascript:;">海南</a></li>
<li><a href="javascript:;">贵州</a></li>
<li><a href="javascript:;">云南</a></li>
<li><a href="javascript:;">西藏</a></li>
<li><a href="javascript:;">陕西</a></li>
<li><a href="javascript:;">甘肃</a></li>
<li><a href="javascript:;">青海</a></li>
<li><a href="javascript:;">宁夏</a></li>
<li><a href="javascript:;">新疆</a></li>
<li><a href="javascript:;">港澳</a></li>
<li><a href="javascript:;">台湾</a></li>
<li><a href="javascript:;">钓鱼岛</a></li>
<li><a href="javascript:;">海外</a></li>
</ol>
</li>
</ul>
<ul class="header_ul_right">
<li style="border: 0;"><a href="../登录页面\index.html" class="aa">你好，请登录</a></li>
<li><a href="../注册页面\index.html" style="color: red;">免费注册</a> |</li>
<li><a href="javascript:;" class="aa">我的订单</a> |</li>
<li class="jingdong"><a href="javascript:;">我的谷粒</a><span class="glyphicon glyphicon-menu-down">|</span>
<ol class="jingdong_ol">
<li><a href="javascript:;">待处理订单</a></li>
<li><a href="javascript:;">消息</a></li>
<li><a href="javascript:;">返修退换货</a></li>
<li><a href="javascript:;">我的回答</a></li>
<li><a href="javascript:;">降价商品</a></li>
<li><a href="javascript:;">我的关注</a></li>
<li style="width: 100%;height: 1px;background: lavender;margin-top: 15px;"></li>
<li style="margin-top: 0;"><a href="javascript:;">我的京豆</a></li>
<li style="margin-top: 0;"><a href="javascript:;">我的优惠券</a></li>
<li style="margin-bottom: 10px;"><a href="javascript:;">我的白条</a></li>
</ol>
</li>
<li><a href="javascript:;" class="aa">谷粒会员</a> |</li>
<li><a href="javascript:;" class="aa">企业采购</a> |</li>
<li class="fuwu"><a href="javascript:;">客户服务</a><span class="glyphicon glyphicon-menu-down"></span> |
<ol class="fuwu_ol">
<h6>客户</h6>
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">售后服务</a></li>
<li><a href="javascript:;">在线客服</a></li>
<li><a href="javascript:;">意见建议</a></li>
<li><a href="javascript:;">电话客服</a></li>
<li><a href="javascript:;">客服邮箱</a></li>
<li style="margin-bottom: -5px;"><a href="javascript:;">金融咨询</a></li>
<li style="margin-bottom: -5px;"><a href="javascript:;">售全球客服</a></li>
<h6 style="border-top: 1px dashed darkgray;height: 30px;line-height: 30px;">商户</h6>
<li style="margin-top: -5px;"><a href="javascript:;">合作招商</a></li>
<li style="margin-top: -5px;"><a href="javascript:;">学习中心</a></li>
<li><a href="javascript:;">商家后台</a></li>
<li><a href="javascript:;">京麦工作台</a></li>
<li><a href="javascript:;">商家帮助</a></li>
<li><a href="javascript:;">规则平台</a></li>
</ol>
</li>
<li class="daohang"><a href="javascript:;">网站导航</a><span class="glyphicon glyphicon-menu-down"></span> |
<ol class="daohang_ol">
<li style="width: 34%;">
<h5>特色主题</h5>
<p>
<a href="javascript:;">谷粒试用</a>
<a href="javascript:;">谷粒金融</a>
<a href="javascript:;">全球售</a>
<a href="javascript:;">国际站</a>
</p>
<p>
<a href="javascript:;">谷粒会员</a>
<a href="javascript:;">谷粒预售</a>
<a href="javascript:;">买什么</a>
<a href="javascript:;">俄语站</a>
</p>
<p>
<a href="javascript:;">装机大师</a>
<a href="javascript:;">0元评测</a>
<a href="javascript:;">定期送</a>
<a href="javascript:;">港澳售</a>
</p>
<p>
<a href="javascript:;">优惠券</a>
<a href="javascript:;">秒杀</a>
<a href="javascript:;">闪购</a>
<a href="javascript:;">印尼站</a>
</p>
<p>
<a href="javascript:;">谷粒金融科技</a>
<a href="javascript:;">In货推荐</a>
<a href="javascript:;">陪伴计划</a>
<a href="javascript:;">出海招商</a>
</p>
</li>
<li>
<h5>行业频道</h5>
<p>
<a href="javascript:;" class="aa_2">手机</a>
<a href="javascript:;" class="aa_2">智能数码</a>
<a href="javascript:;" class="aa_2">玩3C</a>
</p>
<p>
<a href="javascript:;" class="aa_2">电脑办公</a>
<a href="javascript:;" class="aa_2">家用电器</a>
<a href="javascript:;" class="aa_2">谷粒智能</a>
</p>
<p>
<a href="javascript:;" class="aa_2">服装城</a>
<a href="javascript:;" class="aa_2">美妆馆</a>
<a href="javascript:;" class="aa_2">家装城</a>
</p>
<p>
<a href="javascript:;" class="aa_2">母婴</a>
<a href="javascript:;" class="aa_2">食品</a>
<a href="javascript:;" class="aa_2">运动户外</a>
</p>
<p>
<a href="javascript:;" class="aa_2">农资频道</a>
<a href="javascript:;" class="aa_2">整车</a>
<a href="javascript:;" class="aa_2">图书</a>
</p>
</li>
<li>
<h5>生活服务</h5>
<p>
<a href="javascript:;" class="aa_2">谷粒众筹</a>
<a href="javascript:;" class="aa_2">白条</a>
<a href="javascript:;" class="aa_2">谷粒金融APP</a>
</p>
<p>
<a href="javascript:;" class="aa_2">谷粒小金库</a>
<a href="javascript:;" class="aa_2">理财</a>
<a href="javascript:;" class="aa_2">智能家电</a>
</p>
<p>
<a href="javascript:;" class="aa_2">话费</a>
<a href="javascript:;" class="aa_2">水电煤</a>
<a href="javascript:;" class="aa_2">彩票</a>
</p>
<p>
<a href="javascript:;" class="aa_2">旅行</a>
<a href="javascript:;" class="aa_2">机票酒店</a>
<a href="javascript:;" class="aa_2">电影票</a>
</p>
<p>
<a href="javascript:;" class="aa_2">谷粒到家</a>
<a href="javascript:;" class="aa_2">谷粒众测</a>
<a href="javascript:;" class="aa_2">游戏</a>
</p>
</li>
<li style="border: 0;">
<h5>更多精选</h5>
<p>
<a href="javascript:;" class="aa_2">合作招商</a>
<a href="javascript:;" class="aa_2">谷粒通信</a>
<a href="javascript:;" class="aa_2">谷粒E卡</a>
</p>
<p>
<a href="javascript:;" class="aa_2">企业采购</a>
<a href="javascript:;" class="aa_2">服务市场</a>
<a href="javascript:;" class="aa_2">办公生活馆</a>
</p>
<p>
<a href="javascript:;" class="aa_2">乡村招募</a>
<a href="javascript:;" class="aa_2">校园加盟</a>
<a href="javascript:;" class="aa_2">京友邦</a>
</p>
<p>
<a href="javascript:;" class="aa_2">谷粒社区</a>
<a href="javascript:;" class="aa_2">智能社区</a>
<a href="javascript:;" class="aa_2">游戏社区</a>
</p>
<p>
<a href="javascript:;" class="aa_2">知识产权维权</a>
<a href="javascript:;" class="aa_2"></a>
<a href="javascript:;" class="aa_2"></a>
</p>
</li>
</ol>
</li>
<li class="sjjd" style="border: 0;"><a href="javascript:;" class="aa">手机谷粒</a>
<div class="er">
<div class="er_1">
<div class="er_1_1">
<h6><a href="#">手机谷粒</a></h6>
<p>新人专享大礼包</p>
</div>
</div>
<div class="er_1">
<div class="er_1_1">
<h6><a href="#">关注谷粒微信</a></h6>
<p>微信扫一扫关注新粉最高180元惊喜礼包</p>
</div>
</div>
<!--我的理财-->
<div class="er_1" style="border: 0;">
<img src="/static/item/img/5874a555Ne8192324.jpg" />
<div class="er_1_1">
<h6><a href="#">谷粒金融客户端</a></h6>
<p>新人专享大礼包</p>
<div><a href="#"><img src="/static/item/img/11.png" /></a><a href="#"><img src="/static/item/img/22.png" /></a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</header>
<nav>
<div class="nav_min">
<div class="nav_top">
<div class="nav_top_one"><a href="http://gulimall.com"><img src="/static/item/img/logo.png" /></a></div>
<div class="nav_top_two"><input type="text" /><button>搜索</button></div>
<div class="nav_top_three"><a href="../JD_Shop/One_JDshop.html">我的购物车</a><span
class="glyphicon glyphicon-shopping-cart"></span>
<div class="nav_top_three_1">
<img src="/static/item/img/44.png" />购物车还没有商品，赶紧选购吧！
</div>
</div>
</div>
<div class="nav_down">
<ul class="nav_down_ul">
<li class="nav_down_ul_1" style="width: 24%;float: left;"><a href="javascript:;">全部商品分类</a></li>
<li class="ul_li"><a href="javascript:;">服装城</a></li>
<li class="ul_li"><a href="javascript:;">美妆馆</a></li>
<li class="ul_li"><a href="javascript:;">超市</a></li>
<li class="ul_li" style="border-right: 1px solid lavender;"><a href="javascript:;">生鲜</a></li>
<li class="ul_li"><a href="javascript:;">全球购</a></li>
<li class="ul_li"><a href="javascript:;">闪购</a></li>
<li class="ul_li" style="border-right: 1px solid lavender;"><a href="javascript:;">拍卖</a></li>
<li class="ul_li"><a href="javascript:;">金融</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="crumb-wrap">
<div class="w">
<div class="crumb">
<div class="crumb-item">
<a href="">手机</a>
</div>
<div class="crumb-item sep">></div>
<div class="crumb-item">
<a href="">手机通讯</a>
</div>
<div class="crumb-item sep">></div>
<div class="crumb-item">
<a href="">手机</a>
</div>
<div class="crumb-item sep">></div>
<div class="crumb-item">
<div class="crumb-item-one">
华为 (HUAWEI)
<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
<div class="crumb-item-two ">
<div class="crumb-item-con clear">
<ul class="con-ul">
<li>
<img src="/static/item/img/5825a5a6Nde8ecb75.jpg" alt="" />
</li>
<li>
<p>荣耀8青春版 全网通标配 3GB+32GB 幻海蓝</p>
<p>￥1099.00</p>
</li>
</ul>
<ul class="con-ul">
<li>
<img src="/static/item/img/5919637aN271a1301.jpg" alt="" />
</li>
<li>
<p>荣耀8青春版 全网通标配 3GB+32GB 幻海蓝</p>
<p>￥1099.00</p>
</li>
</ul>
<ul class="con-ul">
<li>
<img src="/static/item/img/599a806bN9d829c1c.jpg" alt="" />
</li>
<li>
<p>荣耀8青春版 全网通标配 3GB+32GB 幻海蓝</p>
<p>￥1099.00</p>
</li>
</ul>
</div>
<div class="crumb-item-cons clear">
<ul>
<li>华为(huawei)</li>
<li>小米(xiaomi)</li>
<li>APPle</li>
<li>魅族(meizu)</li>
<li>锤子</li>
</ul>
<ul>
<li>三星</li>
<li>vivo</li>
<li>飞利浦</li>
<li>360</li>
<li>更多>></li>
</ul>
</div>
</div>
</div>
</div>
<div class="crumb-item sep">></div>
<div class="crumb-item">
华为Mate 40 Pro
</div>
</div>
<div class="contact">
<ul class="contact-ul">
<li>
<a href="#">华为谷粒自营官方旗舰店</a>
<span class="contact-sp">
<span class="contact-sp1">谷粒</span>
<span class="contact-sp2">自营</span>
</span>
</li>
<li>
<a href="#">
<img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" /> 联系供应商
</a>
</li>
<li>
<a href="#">
<img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" /> YOMI
</a>
</li>
<li>
<a href="#">
<img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" /> 关注店铺
</a>
</li>
</ul>
<div class="contact-one">
<ul>
<li>客服</li>
<li><img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" />留言</li>
<li><img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" />YOMI智能</li>
<li>
<img src="/static/item/img/5874a555Ne8192324.jpg" class="contact-img" />
<p>手机下单</p>
</li>
</ul>
<div class="contact-two">
<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />进店逛逛</span>
<span><img src="/static/item/img/a400e3d61d5645459f769b00d9f431e7.png" alt="" />关注店铺</span>
</div>
</div>
</div>
</div>
</div>
<div class="Shop">
<div class="box">
<div class="box-one ">
<div class="boxx">
<div class="imgbox">
<div class="probox">
<img class="img1" alt="" th:src="${skuItemVO.skuInfo.skuDefaultImg}">
<div class="hoverbox"></div>
</div>
<div class="showbox">
<img class="img1" alt="" th:src="${skuItemVO.skuInfo.skuDefaultImg}">
</div>
</div>
<div class="box-lh">
<div class="box-lh-one">
<ul>
<li th:each="img:${skuItemVO.images}">
<img th:src="${img.imgUrl}" />
</li>
</ul>
</div>
<div id="left">
<img src="/static/item/img/disabled-prev.png" />
</div>
<div id="right">
<img src="/static/item/img/disabled-next.png" />
</div>
<div class="boxx-one">
<ul>
<li>
<span>
<img src="/static/item/img/b769782fe4ecca40913ad375a71cb92d.png" alt="" />关注
</span>
<span>
<img src="/static/item/img/fx.png" alt="" />分享
</span>
<span>
<img src="/static/item/img/9224fcea62bfff479a6712ba3a6b47cc.png" alt="" />对比
</span>
</li>
<li>举报</li>
</ul>
</div>
</div>
</div>
<div class="box-two">
<div class="box-name" th:text="${skuItemVO.skuInfo.skuTitle}"></div>
<div class="box-hide" th:text="${skuItemVO.skuInfo.skuSubtitle}"></div>
<div class="box-yuyue">
<div class="yuyue-one">
<img src="/static/item/img/7270ffc3baecdd448958f9f5e69cf60f.png" alt="" /> 预约抢购
</div>
<div class="yuyue-two">
<ul>
<li>
<img src="/static/item/img/f64963b63d6e5849977ddd6afddc1db5.png" />
<span>190103</span> 人预约
</li>
<li>
<img src="/static/item/img/36860afb69afa241beeb33ae86678093.png" /> 预约剩余
<span id="timer">
</span>
</li>
</ul>
</div>
</div>
<div class="box-summary clear">
<ul>
<li>谷粒价</li>
<li>
<span>￥</span>
<span th:text="${#numbers.formatDecimal(skuItemVO.skuInfo.price,1,2)}"></span>
</li>
<li>
<a>预约享资格</a>
</li>
<li>
<a href="">预约说明</a>
</li>
</ul>
</div>
<div class="box-wrap clear">
<div class="box-wrap-one clear">
<ul>
<li>增值业务</li>
<li><img src="/static/item/img/90a6fa41d0d46b4fb0ff6907ca17c478.png" /></li>
<li><img src="/static/item/img/2e19336b961586468ef36dc9f7199d4f.png" /></li>
<li><img src="/static/item/img/1f80c3d6fabfd3418e54b005312c00b5.png" /></li>
</ul>
</div>
</div>
<div class="box-stock">
<ul class="box-ul">
<li>配送至</li>
<li class="box-stock-li">
<div class="box-stock-one">
北京朝阳区管庄
<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
</div>
<div class="box-stock-two">
<dl>
<dt>
<a>选择新地址</a>
<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="box-stock-two-img" />
</dt>
<dd>
<div class="box-stock-dd">
<div class="box-stock-top">
<div class="box-stock-div">北京</div>
<div class="box-stock-div">朝阳区</div>
<div class="box-stock-div">管庄</div>
</div>
<div class="box-stock-fot">
<div class="box-stock-con" style="display: block;">
<ul>
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</div>
<div class="box-stock-con">
<ul>
<li>朝阳区</li>
<li>海淀区</li>
<li>东城区</li>
<li>西城区</li>
</ul>
</div>
<div class="box-stock-con">
<ul>
<li>4环到5环之内</li>
<li>管庄</li>
<li>北苑</li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
</div>
</li>
<li>
<span th:text="${skuItemVO.hasStock?'有货':'无货，此商品暂时售完'}"></span>
</li>
</ul>
</div>
<div class="box-supply">
<ul class="box-ul">
<li></li>
<li>
由 <span>谷粒</span> 发货，并提供售后服务
</li>
</ul>
</div>
<div class="box-attr-2">
<div class="box-attr clear" th:each="attr:${skuItemVO.saleAttrs}">
<dl>
<dt>选择[[${attr.attrName}]]</dt>
<dd th:each="vals:${attr.attrValues}">
<a href="javascript:void(0)"
th:attr="class=${#lists.contains(#strings.listSplit(vals.skuIds,','),skuItemVO.skuInfo.skuId+'')}?'sku-attr-value checked':'sku-attr-value',skus=${vals.skuIds}">
[[${vals.attrValue}]]
</a>
</dd>
</dl>
</div>
</div>
<div class="box-btns clear">
<div class="box-btns-one">
<input type="text" name="" id="" value="1" />
<div class="box-btns-one1">
<div>
<button id="jia">
+
</button>
</div>
<div>
<button id="jian">
-
</button>
</div>
</div>
</div>
<div class="box-btns-two">
<a href="../商品分类\index.html">
立即预约
</a>
</div>
</div>
<div class="box-footer-zo">
<div class="box-footer clear">
<dl>
<dt>本地活动</dt>
<dd>
<a href="#">
·1元500MB激活到账30元 >>
</a>
</dd>
</dl>
</div>
<div class="box-footer">
<dl>
<dt>温馨提示</dt>
<dd>·本商品不能使用 东券 京券</dd>
<dd>·请完成预约后及时抢购！</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!--欲约抢购流程-->
<div class="qianggoulioucheng">
<div class="lioucheng">
<h3>欲约抢购流程</h3>
</div>
<!--抢购步骤-->
<ul class="qianggoubuzhao">
<li>
<img src="/static/item/img/shop_03.png" />
<dl class="buzhou">
<dt>1.等待预约</dt>
<dl>预约即将开始</dl>
</dl>
</li>
<li>
<img src="/static/item/img/shop_04.png" />
<dl class="buzhou">
<dt>2.预约中</dt>
<dl>2017-11-15 10:35 2017-11-15 23:59</dl>
</dl>
</li>
<li>
<img src="/static/item/img/shop_05.png" />
<dl class="buzhou">
<dt>3.等待抢购</dt>
<dl>抢购即将开始</dl>
</dl>
</li>
<li>
<img src="/static/item/img/shop_06.png" />
<dl class="buzhou">
<dt>4.抢购中</dt>
<dl></dl>
</dl>
</li>
</ul>
</div>
<div class="ShopXiangqing">
<div class="allLeft">
<!--火热预约-->
<div class="huoreyuyue">
<h3>火热预约</h3>
</div>
<div class="dangeshopxingqing">
<ul class="shopdange">
<li>
<a href="##"><img src="/static/item/img/5a0afeddNb34732af.jpg" /></a>
<p>
<a href="##">OPPO R11s Plus 双卡双待全面屏拍照手机香槟色 全网通(6G RAM+64G ROM)标配</a>
</p>
<p><strong class="J-p-20015341974">￥3699.00</strong></p>
</li>
<li>
<a href="##"><img src="/static/item/img/5a12873eN41754123.jpg" /></a>
<p>
<a target="_blank" title="詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）"
href="//item.jd.com/20348283521.html">詹姆士（GEMRY） R19plus全网通4G 智能手机 双卡双待 6+128GB 鳄鱼纹雅致版（新品预约）</a>
</p>
<p><strong class="J-p-20348283521">￥13999.00</strong></p>
</li>
<li>
<a href="##"><img src="/static/item/img/59ec0131Nf239df75.jpg" /></a>
<p>
<a target="_blank" title="斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60"
href="//item.jd.com/16683419775.html">斐纳（TOMEFON） 德国家用无线无绳手持立式充电吸尘器 静音大吸力吸尘器TF-X60</a>
</p>
<p><strong class="J-p-16683419775">￥1599.00</strong></p>
</li>
<li>
<a href="##"><img src="/static/item/img/59015444N27317512.jpg" /></a>
<p>
<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金"
href="//item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
</p>
<p><strong class="J-p-12187770381">￥2599.00</strong></p>
</li>
</ul>
</div>
<!--看了又看-->
<div class="huoreyuyue">
<h3>看了又看</h3>
</div>
<div class="dangeshopxingqing">
<ul class="shopdange">
<li>
<a href="##"><img src="/static/item/img/59e55e01N369f98f2.jpg" /></a>
<p>
<a target="_blank" title="华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)"
href="//item.jd.com/17931625443.html">华为（HUAWEI） 华为 Mate10 4G手机 双卡双待 亮黑色 全网通(6GB RAM+128GB ROM)</a>
<p><strong class="J-p-17931625443">￥4766.00</strong></p>
</li>
<li>
<a href="##"><img src="/static/item/img/584fcc3eNdb0ab94c.jpg" /></a>
<p>
<a target="_blank" title="华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待"
href="//item.jd.com/3749093.html">华为 Mate 9 Pro 6GB+128GB版 琥珀金 移动联通电信4G手机 双卡双待</a>
</p>
<p><strong class="J-p-3749093">￥4899.00</strong></p>
</li>
<li>
<!--shopjieshao-->
<a href="##"><img src="/static/item/img/59eb0df9Nd66d7585.jpg" /></a>
<p>
<a target="_blank" title="华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版"
href="//item.gulimall.com/12306211773.html">华为（HUAWEI） 华为 Mate10 手机 亮黑色 全网通(4+64G)标准版</a>
</p>
<p><strong class="J-p-12306211773">￥4088.00</strong></p>
</li>
<li>
<a href="##"><img src="/static/item/img/5a002ba3N126c2f73.jpg" /></a>
<p>
<a target="_blank" title="斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金"
href="//item.jd.com/12187770381.html">斐纳（TOMEFON） 扫地机器人德国智能导航规划全自动超薄扫地机器人吸尘器TF-D60 香槟金</a>
</p>
<p><strong class="J-p-12187770381">￥2599.00</strong></p>
</li>
</ul>
<img src="/static/item/img/5a084a1aNa1aa0a71.jpg" />
</div>
</div>
<!--商品介绍-->
<div class="allquanbushop">
<ul class="shopjieshao">
<li class="jieshoa" style="background: #e4393c;">
<a href="javascript:void(0)" style="color: white;">商品介绍</a>
</li>
<li class="baozhuang">
<a href="javascript:void(0)">规格与包装</a>
</li>
<li class="baozhang">
<a href="javascript:void(0)">售后保障</a>
</li>
<li class="pingjia">
<a href="javascript:void(0)">商品评价(4万+)</a>
</li>
<li class="shuoming">
<a href="javascript:void(0)">预约说明</a>
</li>
</ul>
<button class="Lijiyuyuessss">立即预约</button>
<!--商品详情-->
<div class="huawei">
<ul class="xuanxiangka">
<li class="jieshoa actives" id="li1">
<div class="shanpinsssss">
<p>
<a href="#">品牌:华为（HUAWEI）</a>
</p>
<table>
<tr>
<td>
<a href="##">商品名称：华为Mate 10</a>
</td>
<td>
<a href="##">商品毛重：0.58kg</a>
</td>
<td>
<a href="##">商品编号：5544038</a>
</td>
<td>
<a href="##">商品产地：中国大陆</a>
</td>
</tr>
</table>
<!-- 商品介绍图片 -->
<img class="xiaoguo"
th:each="desc:${#strings.listSplit(skuItemVO.spuDesc.decript,',')}"
th:src="${desc}" />
</div>
</li>
<li class="baozhuang actives" id="li2">
<div class="guiGebox">
<div class="guiGe" th:each="group:${skuItemVO.groupAttrs}">
<h3 th:text="${group.groupName}"></h3>
<dl th:each="attr:${group.attrs}">
<dt th:text="${attr.attrName}"></dt>
<dd th:text="${attr.attrValue}"></dd>
</dl>
</div>
<div class="package-list">
<h3>包装清单</h3>
<p>手机（含内置电池） X 1、5A大电流华为SuperCharge充电器X 1、5A USB数据线 X 1、半入耳式线控耳机 X 1、快速指南X 1、三包凭证 X 1、取卡针 X 1、保护壳 X
1</p>
</div>
</div>
</li>
<!--售后保障-->
<li class="baozhang actives" id="li3">
<div class="oBox">
<div class="shuoHou">
<div class="baoZhang">
<h2>售后保障</h2>
</div>
</div>
<!--厂家服务-->
<div class="changJia">
<div class="lianBao">
<span class="oImg">
<img src="/static/item/img/2017.jpg" alt="" />
<h3>厂家服务</h3>
</span>
<div class="wenZi">
本产品全国联保，享受三包服务，质保期为：一年保<br />
如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br />
(注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a
href="#">请点击这儿查询...</a><br /><br />
</div>
</div>
<div class="lianBao oCn">
<span class="oImg">
<img src="/static/item/img/2017.jpg" alt="" />
<h3>谷粒承诺</h3>
</span>
<div class="wenZi">
本产品全国联保，享受三包服务，质保期为：一年保<br />
如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在保质期内享受免费保修等安保服务！<br />
(注：如厂家在商品介绍中有售后保障的说明，则此商品按照厂家说明执行售后保障服务。)您可以查询本品牌在各地售后服务中心的练习方式<a
href="#">请点击这儿查询...</a><br /><br /><br />
</div>
</div>
<div class="lianBao ">
<span class="oImg">
<img src="/static/item/img/2017.jpg" alt="" />
<h3>正品行货</h3>
</span>
<div class="wenZi hangHuo">
谷粒商城向您保证所售商品均为正品行货，谷粒自营商品开具机打发票或电子发票。
</div>
</div>
<div class="lianBao quanGuo">
<span class="oImg">
<img src="/static/item/img/2017-1.jpg" alt="" />
<h3>全国联保</h3>
</span>
<div class="wenZi">
凭质保证书及谷粒商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由谷粒联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。谷粒商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！
<br />
注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
</div>
</div>
<!--权利声明-->
<div class="quanLi">
<h4>权利声明:</h4>
<div class="jingDong">
谷粒上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是谷粒重要的经营资源，未经许可，禁止非法转载使用。<br />
<span class="oZhu">注</span>：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。
</div>
</div>
<div class="quanLi jiaGe">
<h4>价格说明:</h4>
<div class="jingDong">
<span class="oZhu">谷粒价</span>：谷粒价为商品的销售价，是您最终决定是否购买商品的依据。<br />
<span
class="oZhu">划线价</span>：商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在谷粒平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。<br />
<span
class="oZhu">折扣</span>：如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。<br />
<span
class="oZhu">异常问题</span>：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
</div>
</div>
</div>
</div>
</li>
<!--评价-->
<li class="PINgjia actives" id="li4">
<div class="h3">
<h3>商品评价</h3>
</div>
<div class="nav">
<div class="left">
<p class="haoping">好评度</p>
<p><span>100%</span></p>
</div>
<div class="right">
<ul>
<li>
<a href="##">就是快（424）</a>
</li>
<li>
<a href="##">物流很快（254） </a>
</li>
<li>
<a href="##">货真价实（168）</a>
</li>
<li>
<a href="##">有档次（158）</a>
</li>
<li>
<a href="##">国产品牌（133）</a>
</li>
<li>
<a href="##">外形美观（103）</a>
</li>
<li>
<a href="##">很给力（75）</a>
</li>
<li>
<a href="##">反应灵敏（68）</a>
</li>
<li>
<a href="##">性价比高（60）</a>
</li>
<li>
<a href="##">价格优惠（50）</a>
</li>
<li>
<a href="##">功能齐全（49）</a>
</li>
<li style="background: gainsboro;">
<a href="##">速度太慢（5）</a>
</ul>
</div>
</div>
<!--全部评价-->
<div class="allpingjia">
<ul>
<li><a href="##">全部评价（4.2万）</a></li>
<li><a href="##">晒图（500）</a></li>
<li><a href="##">追拼（200+）</a></li>
<li><a href="##">好评（4.1万）</a></li>
<li><a href="##">中评（100+）</a></li>
<li><a href="##">差评（100+）</a></li>
<li><a href="##"><input type="checkbox" />只看当前商品价格</a></li>
<li class="imga" style="float: right;"><a href="##">推荐排序 <img src="/static/item/img/animaite.png" /> </a>
</li>
</ul>
</div>
</li>
<li class="shuoming actives" id="li5"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="headera">
<div class="Logo-tu">
<img src="/static/item/img/header-logo.png" />
</div>
<div class="table">
<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>
<dd>
<a href="##">联系客服</a>
</dd>
</dl>
<dl>
<dt><a href="##">配送方式</a></dt>
<dd>
<a href="##">上门自提</a>
</dd>
<dd>
<a href="##">211限时达</a>
</dd>
<dd>
<a href="##">配送服务查询</a>
</dd>
<dd>
<a href="##"></a>
</dd>
<dd>
<a href="##">海外配送</a>
</dd>
<dd></dd>
</dl>
<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>
<dd></dd>
</dl>
<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>
<dd></dd>
</dl>
<dl class="dls">
<dt><a href="##">特色服务</a></dt>
<dd>
<a href="##">夺宝岛</a>
</dd>
<dd>
<a href="##">DIY装机</a>
</dd>
<dd>
<a href="##">延保服务</a>
</dd>
<dd>
<a href="##">谷粒E卡</a>
</dd>
<dd>
<a href="##">谷粒通信</a>
</dd>
<dd>
<a href="##">谷粒JD+</a>
</dd>
</dl>
</div>
<!--关于我们-->
<div class="guanyuwomen clearfix">
<ul>
<li>
<a href="##">关于我们</a>
</li>
<li>|</li>
<li>
<a href="##">联系我们</a>
</li>
<li>|</li>
<li>
<a href="##">联系客服</a>
</li>
<li>|</li>
<li>
<a href="##">合作招商</a>
</li>
<li>|</li>
<li>
<a href="##">商家帮助</a>
</li>
<li>|</li>
<li>
<a href="##">营销中心</a>
</li>
<li>|</li>
<li>
<a href="##">手机谷粒</a>
</li>
<li>|</li>
<li>
<a href="##">友情链接</a>
</li>
<li>|</li>
<li>
<a href="##">销售联盟</a>
</li>
<li>|</li>
<li>
<a href="##">谷粒社区</a>
</li>
<li>|</li>
<li>
<a href="##">风险检测</a>
</li>
<li>|</li>
<li>
<a href="##">隐私政策</a>
</li>
<li>|</li>
<li>
<a href="##">谷粒公益</a>
</li>
<li>|</li>
<li>
<a href="##">English Site</a>
</li>
<li>|</li>
<li>
<a href="##">Mdeila $ IR</a>
</li>
</ul>
</div>
<!--jieshoa-->
<p class="p1"><img src="/static/item/img/56a0a994Nf1b662dc.png" />
<a href="##"> 京公网安备 11000002000088号</a>|
<a href="##"> 京ICP证070359号</a>|
<a href="##"> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 </a>|
<a href="##">新出发京零 字第大120007号</a>
</p>
<p class="p1">
<a href="##"> 互联网出版许可证编号新出网证(京)字150号</a>|
<a href="##"> 出版物经营许可证</a>|
<a href="##"> 网络文化经营许可证京网文 </a>|
<a href="##">[2014]2148-348号 </a>|
<a href="##"> 违法和不良信息举报电话 </a>|
<a href="##">：4006561155 </a>
</p>
<p class="p1">
<a href="##"> Copyright © 2004-2017 谷粒JD.com 版权所有</a>|
<a href="##"> 消费者维权热线：4006067733 经营证照</a>|
</p>
<p class="p1">
<a href="##"> 谷粒旗下网站：谷粒支付</a>|
<a href="##"> 谷粒云</a>
</p>
<p class="p3">
<img src="/static/item/img/54b8871eNa9a7067e.png" />
<img src="/static/item/img/54b8872dNe37a9860.png" />
<img src="/static/item/img/54b8875fNad1e0c4c.png" />
<img src="/static/item/img/5698dc03N23f2e3b8.jpg" />
<img src="/static/item/img/5698dc16Nb2ab99df.jpg" />
<img src="/static/item/img/56a89b8fNfbaade9a.jpg" />
</p>
</div>
<div class="Fixedbian">
<ul>
<li class="li1"><a class="aaa" href="##">顶部</a></li>
</ul>
</div>
<div class="gouwuchexiaguo">
<img src="/static/item/img/44.png" />
<span>购物车还没有商品，赶紧选购吧！</span>
</div>
</body>
<script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 给选中的sku组合设置边框样式
$('.sku-attr-value.checked').parent().css({'border':'1px solid red'})
})
// sku组合切换
$('.sku-attr-value').click(function(){
let skus = [];
$(this).addClass('clicked')
// 当前被点击的sku组合
let curr = $(this).attr('skus').split(',')
// 将当前被点击的sku组合放入
skus.push(curr)
// 移除同一属性的所有 checked
$(this).parent().parent().find('.sku-attr-value').removeClass('checked')
$('a[class="sku-attr-value checked"]').each(function(){
// 其它的sku组合
skus.push($(this).attr('skus').split(','))
})
// 找出多个sku属性数组的交集，得到新的sku组合
let filterSku = skus[0];
for(let i = 1; i < skus.length; i++){
filterSku = $(filterSku).filter(skus[i])
}
location.href = `http://item.gulimall.com/${filterSku[0]}.html`
})
</script>
</html>
如图所示：
3.list.html的代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品搜索 - 谷粒</title>
<link rel="icon" href="/static/search/image/favicon.ico">
<link rel="stylesheet" href="/static/search/css/index.css">
<link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
<script src="/static/search/js/jquery-1.12.4.js"></script>
<style>
.a_page{
cursor: pointer;
}
.nav_f_v, .nav_f_x{
color: red;
}
.nav_f_x{
display: inline-block;
text-align: center;
width: 30px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header_head">
<div class="header_head_box">
<b class="header_head_p">
<div style="overflow: hidden">
<a href="http://gulimall.com" class="header_head_p_a1" style="width:73px;">谷粒首页</a>
<a href="#" class="header_head_p_a">
<img src="/static/search/img/img_05.png" style="border-radius: 50%;" />北京
</a>
</div>
<div class="header_head_p_cs">
<a href="#" style="background: #C81623;color: #fff;">北京</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>
<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>
<a href="#">新疆</a>
<a href="#">港澳</a>
<a href="#">台湾</a>
<a href="#">钓鱼岛</a>
<a href="#">海外</a>
</div>
</b>
<ul>
<li>
<a href="#" class="li_2">你好，请登录</a>
</li>
<li>
<a href="#">免费注册</a>
</li>
<span>|</span>
<li>
<a href="#">我的订单</a>
</li>
<span>|</span>
<li class="header_wdjd">
<a href="#">我的谷粒</a>
<img src="/static/search/image/down-@1x.png" />
</li>
<span>|</span>
<li>
<a href="#">谷粒会员</a>
</li>
<span>|</span>
<li>
<a href="#">企业采购</a>
</li>
<span>|</span>
<li class="header_wdjd1">
<a href="#">客户服务</a>
<img src="/static/search/image/down-@1x.png" />
</li>
<span>|</span>
<li class="header_wzdh">
<a href="#">网站导航</a>
<img src="/static/search/image/down-@1x.png" />
</li>
<span>|</span>
<li class="header_sjjd">
<a href="#">手机谷粒</a>
<div class="header_sjjd_div">
<img src="/static/search/img/01.png" />
</div>
</li>
</ul>
</div>
</div>
<!--搜索导航-->
<div class="header_sous">
<div class="logo">
<a href="http://gulimall.com">
<img src="/static/search/image/logo.png" alt="">
</a>
</div>
<div class="header_form">
<input id="keyword_input" type="text" placeholder="手机" th:value="${param.keyword}" />
<a href="javascript:searchByKeyword()">搜索</a>
</div>
<div class="header_ico">
<div class="header_gw">
<span><a href="#">我的购物车</a></span>
<img src="/static/search/image/settleup-@1x.png" />
<span>0</span>
</div>
<div class="header_ko">
<p>购物车中还没有商品，赶紧选购吧！</p>
</div>
</div>
<div class="header_form_nav">
<ul>
<li>
<a href="#">华为手机</a>
</li>
<li>
<a href="#">苹果手机</a>
</li>
<li>
<a href="#">小米手机</a>
</li>
<li>
<a href="#">手机自营</a>
</li>
<li>
<a href="#">vivo手机</a>
</li>
<li>
<a href="#">华为mate40</a>
</li>
<li>
<a href="#">华为p40</a>
</li>
<li>
<a href="#">小米11</a>
</li>
<li>
<a href="#">手机5G</a>
</li>
</ul>
</div>
<nav>
<ul>
<li class="nav_li1">
<a href="#">全部商品分类</a>
</li>
<li class="nav_li">
<a href="#">谷粒时尚</a>
</li>
<li class="nav_li">
<a href="#">美妆馆</a>
</li>
<li class="nav_li">
<a href="#">超市</a>
</li>
<li class="nav_li">
<a href="#">生鲜</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a href="#">全球购</a>
</li>
<li class="nav_li">
<a href="#">闪购</a>
</li>
<li class="nav_li">
<a href="#">拍卖</a>
</li>
</ul>
<div class="spacer">|</div>
<ul>
<li class="nav_li">
<a href="#">金融</a>
</li>
</ul>
</nav>
<div class="header_main_left">
<ul>
<li>
<a href="#" class="header_main_left_a"><b>家用电器</b></a>
</li>
</ul>
</div>
</div>
<hr style="border: 1px solid red;margin-top: -7px;">
<!--热卖促销-->
<div class="JD_temai">
<div class="JD_main">
<div class="JD_left">
<div class="hd">热卖推荐</div>
<div class="bd mc">
<ul class="mc">
<li>
<a href="#" class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即抢购</a>
</div>
</li>
<li>
<a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥1699.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即抢购</a>
</div>
</li>
<li style="margin-right: 0">
<a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
<div class="mc_div">
<a href="#" class="mc_div_a1">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<p>
<strong>
<em class="number J-p-5963064">￥2999.00</em>
</strong>
</p>
<a href="#" class="mc_div_a2">立即抢购</a>
</div>
</li>
</ul>
</div>
</div>
<div class="JD_right">
<div class="hd"> 促销活动</div>
<div class="bd">
<ul>
<li> . <a href="#">红米千元全面屏手机上市</a></li>
<li> . <a href="#">锤子坚果Pro2火爆预约中</a></li>
<li> . <a href="#">大牌新品 疯狂抢购</a></li>
<li> . <a href="#">X20 vivo蓝新色上市</a></li>
<li> . <a href="#">荣耀畅玩7X新品上市</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--手机-->
<div class="JD_ipone">
<div class="JD_ipone_bar">
<div class="JD_ipone_one a">
<a href="#">手机</a>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one b">
<a href="#" class="qqq">手机通讯录 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<a href="#">手机通讯</a>
<a href="#">运营商</a>
<a href="#">手机配件</a>
<a href="#">手机服务</a>
</div>
</div>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<div class="JD_ipone_one c">
<a href="#" class="qqq">手机 <img src="/static/search/image/down-@1x.png" alt=""></a>
<div>
<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>
<i><img src="/static/search/image/right-@1x.png" alt=""></i>
<!-- 面包屑导航 -->
<div class="JD_ipone_one c">
<a th:href="${nav.link}" th:each="nav:${searchResponseVO.navs}" class="nav_a"
style="background: #eee;border:1px solid #ccc;padding-left: 5px;padding-right: 0px;margin-right: 5px">
<span class="nav_f" th:text="${nav.navName}"></span>
<span class="nav_f nav_f_v" th:text="${nav.navValue}"></span>
<span class="nav_f_x">X</span>
</a>
</div>
</div>
</div>
<!--商品筛选和排序-->
<div class="JD_banner w">
<div class="JD_nav">
<div class="JD_selector">
<!--手机商品筛选-->
<div class="title">
<h3><b>手机</b><em>商品筛选</em></h3>
<div class="st-ext">共 <span>10135</span>个商品 </div>
</div>
<div class="JD_nav_logo" th:with="brandId=${param.brandId}">
<!--品牌-->
<div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
<div class="sl_key">
<span>品牌：</span>
</div>
<div class="sl_value">
<div class="sl_value_logo">
<ul>
<li th:each="brand:${searchResponseVO.brands}">
<a th:href="${'javascript:searchProduct("brandId",'+brand.brandId+')'}">
<img th:src="${brand.brandImg}" alt="">
<div th:text="${brand.brandName}"></div>
</a>
</li>
</ul>
</div>
</div>
<div class="sl_ext">
<a href="#">
更多
<i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
<b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
</a>
<a href="#">
多选
<i>+</i>
<span>+</span>
</a>
</div>
</div>
<!--分类-->
<div class="JD_pre">
<div class="sl_key">
<span>分类：</span>
</div>
<div class="sl_value">
<ul>
<li th:each="catalog:${searchResponseVO.catalogs}">
<a th:href="${'javascript:searchProduct("catalog3Id", '+catalog.catalogId+')'}"
th:text="${catalog.catalogName}"></a>
</li>
</ul>
</div>
</div>
<!--SKU属性-->
<div class="JD_pre" th:each="attr:${searchResponseVO.attrs}"
th:if="${!#lists.contains(searchResponseVO.attrIds, attr.attrId)}">
<div class="sl_key">
<span th:text="${attr.getAttrName()}"></span>
</div>
<div class="sl_value">
<ul>
<li th:each="attrValue:${attr.attrValues}">
<a th:href="${'javascript:searchProduct("attrs", "'+attr.attrId+'_'+attrValue+'")'}"
th:text="${attrValue}"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="JD_show">
<a href="#">
<span>
更多选项（ CPU核数、网络、机身颜色 等）
</span>
</a>
</div>
</div>
<!--排序-->
<div class="JD_banner_main">
<!--商品精选-->
<div class="JD_con_left">
<div class="JD_con_left_bar">
<div class="JD_con_one">
<div class="mt">
<h3>商品精选</h3>
<span>广告</span>
</div>
<div class="mc">
<ul>
<li>
<a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">12466</a>
人评价
</div>
</li>
<li>
<a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥2999.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">12466</a>
人评价
</div>
</li>
<li>
<a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
<div class="mc_price">
<strong class="price">
<span class="J-p-5963064">￥1799.00</span>
</strong>
<span class="mc-ico" title="购买本商品送赠品">
<i class="goods-icons">赠品</i>
</span>
</div>
<div class="mc_rev">
已有
<a href="#" class="number">15600</a>
人评价
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--综合排序-->
<div class="JD_con_right">
<div class="filter">
<!--综合排序-->
<div class="filter_top">
<div class="filter_top_left" th:with="p=${param.sort},pr=${param.skuPrice}">
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p, 'hotScore')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
sort="hotScore" href="#">综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
sort="saleCount" href="#">销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
<a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
sort="price" href="#">价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
<input id="minPrice" type="number" style="border:1px solid #ccc;width:80px;height: 23px;margin-left: 10px" th:value="${#strings.isEmpty(pr)?'':#strings.substringBefore(pr,'_')}"> -
<input id="maxPrice" type="number" style="border:1px solid #ccc;width:80px;height: 23px" th:value="${#strings.isEmpty(pr)?'':#strings.substringAfter(pr,'_')}">
<button id="skuPriceSearchBtn" style="border:1px solid #ccc;height: 23px;padding: 0px 5px">确定</button>
</div>
<div class="filter_top_right">
<span class="fp-text">
<b>[[${searchResponseVO.pageNum}]]</b><em>/</em><i>[[${searchResponseVO.totalPage}]]</i>
</span>
<a href="#" class="prev"> < </a>
<a href="#" class="next"> > </a>
</div>
</div>
<!--收货地址-->
<div class="filter_bottom">
<div class="filter_bottom_left">
<div class="fs-cell">收货地</div>
<div class="dizhi">
<div class="dizhi_show">
<em>北京朝阳区三环以内</em>
<b></b>
</div>
</div>
<div class="dizhi_con">
<ul id="tab">
<li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab2" value="2">朝阳 <img src="/static/search/image/down-@1x.png" alt=""></li>
<li id="tab3" value="3">三环以内 <img src="/static/search/image/down-@1x.png" alt=""></li>
</ul>
<div id="container">
<div id="content1" style="z-index: 1;">
<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>
<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>
<a href="#">新疆</a>
<a href="#">港澳</a>
<a href="#">台湾</a>
<a href="#">钓鱼岛</a>
<a href="#">海外</a>
</div>
<div id="content2">
<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 id="content3">
<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>
<div class="filter_bottom_right">
<ul>
<li>
<a href="#">
<input type="checkbox">
谷粒配送
</a>
</li>
<li>
<a href="#">
<input type="checkbox">
京尊达 </a>
</li>
<li>
<a href="#">
<input type="checkbox">货到付款
</a>
</li>
<li>
<a href="#" th:with="check=${param.hasStock}">
<input id="showHasStock" type="checkbox" th:checked="${#strings.equals(check,'1')}">
仅显示有货
</a>
</li>
<li>
<a href="#">
<input type="checkbox">
可配送全球
</a>
</li>
</ul>
</div>
</div>
<!--排序内容-->
<div class="rig_tab">
<div th:each="product:${searchResponseVO.getProducts()}">
<div class="ico">
<i class="iconfont icon-weiguanzhu"></i>
<a href="#">关注</a>
</div>
<p class="da">
<a th:href="|http://item.gulimall.com/${product.skuId}.html|">
<img th:src="${product.skuImg}" class="dim">
</a>
</p>
<ul class="tab_im">
<li>
<a href="#">
<img th:src="${product.skuImg}">
</a>
</li>
</ul>
<p class="tab_R">
<span th:text="'¥'+${product.skuPrice}"></span>
</p>
<p class="tab_JE">
<a href="#" th:utext="${product.skuTitle}"></a>
</p>
<p class="tab_PI">
已有<span>11万+</span>热门评价
<a href="#">二手有售</a>
</p>
<p class="tab_CP">
<a href="#" title="谷粒Apple产品专营店">谷粒Apple产品...</a>
<a href='#' title="联系供应商进行咨询">
<img src="/static/search/img/xcxc.png">
</a>
</p>
<div class="tab_FO">
<div class="FO_one">
<p>自营
<span>谷粒自营,品质保证</span>
</p>
<p>满赠
<span>该商品参加满赠活动</span>
</p>
</div>
</div>
</div>
</div>
<!--分页-->
<div class="filter_page">
<div class="page_wrap">
<span class="page_span1">
<a class="a_page" th:if="${searchResponseVO.pageNum > 1}"
th:attr="pageNo=${searchResponseVO.pageNum - 1}"
style="background: #eee;color: #333">
< 上一页
</a>
<a class="a_page" th:each="pageNav:${searchResponseVO.pageNavs}"
th:attr="pageNo=${pageNav}, style=${pageNav == searchResponseVO.pageNum
? 'border: 0;color:#ee2222;background: #fff' : ''}">
[[${pageNav}]]
</a>
<a class="a_page" th:if="${searchResponseVO.pageNum < searchResponseVO.totalPage}"
th:attr="pageNo=${searchResponseVO.pageNum + 1}">
下一页 >
</a>
</span>
<span class="page_span2">
<em>
共<b>[[${searchResponseVO.totalPage}]]</b>页
到第
</em>
<input type="text" th:value="${searchResponseVO.pageNum}">
<em>页</em>
<a class="page_submit">确定</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--商品精选-->
<div class="JD_jx">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">商品精选</strong>
<img src="/static/search/image/u-ad.gif" alt="">
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好评</span>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
<em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
<span class="mc_ico" title="购买本商品送赠品">赠品</span>
</div>
<div class="mc_rev">
<a href="#">15930</a>
<span>人好评</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--猜你喜欢-->
<div class="JD_cnxh">
<div class="JD_jx_title">
<div class="mt">
<strong class="mt-title">猜你喜欢</strong>
<a href="#">
<img src="/static/search/image/update.png" alt="">
换一批
</a>
</div>
<div class="mc">
<ul>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59bf3c47n91d65c73.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/593e4de0n5ff878a4.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/593e4de0n5ff878a4.jpg" alt="">
</a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
<li>
<div class="mc_img">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
</div>
<div class="mc_name">
<a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
<em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
</a>
</div>
<div class="mc_rev">
<a href="#">已有80万+人评价</a>
</div>
<div class="mc_price">
<strong>
<span>￥1999.00</span>
</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div style="width: 1210px; margin: 0 auto; margin-bottom: 10px">
<img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt="">
</div>
<!--底部-->
<footer class="footer">
<div class="footer_top">
<ul>
<li>
<span></span>
<h3>品类齐全，轻松购物</h3>
</li>
<li>
<span></span>
<h3>多仓直发，极速配发</h3>
</li>
<li>
<span></span>
<h3>正品行货，精致服务</h3>
</li>
<li>
<span></span>
<h3>天天低价，畅选无忧</h3>
</li>
</ul>
</div>
<div class="footer_center">
<ol>
<li>购物指南</li>
<li><a href="#" style="color: rgb(114, 114, 114);">购物流程</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">会员介绍</a>
</li>
<li><a href="#">生活旅行</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">常见问题</a>
</li>
<li><a href="#">大家电</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">联系客服</a>
</li>
</ol>
<ol>
<li>配送方式</li>
<li><a href="#" style="color: rgb(114, 114, 114);">上门自提</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">211限时达</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">配送服务查询</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">配送费收取标准</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">海外配送</a>
</li>
</ol>
<ol>
<li>支付方式</li>
<li><a href="#" style="color: rgb(114, 114, 114);">货到付款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">在线支付</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">分期付款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">邮局汇款</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">公司转账</a>
</li>
</ol>
<ol>
<li>售后服务</li>
<li><a href="#" style="color: rgb(114, 114, 114);">售后政策</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">价格保护</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">退款说明</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">返修/退换货</a>
</li>
<li><a href="#">取消订单</a>
</li>
</ol>
<ol>
<li>特色服务</li>
<li><a href="#" style="color: rgb(114, 114, 114);">夺宝岛</a>
</li>
<li><a href="#">DIY装机</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">延保服务</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">谷粒E卡</a>
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">谷粒通信</a>
</li>
</ol>
<ol>
<li>谷粒自营覆盖区域</li>
<li>
谷粒已向全国2661个区县提供自<br> 营配送服务，支持货到付款、
<br> POS机刷卡和售后上门服务。
</li>
<li><a href="#" style="color: rgb(114, 114, 114);">查看详情></a>
</li>
</ol>
</div>
<div class="footer_foot">
<p class="footer_p p1">
<a href="#">关于我们</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">联系我们</a>
<span></span>
<a href="#">联系客服</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">合作招商</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">商家帮助</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">营销中心</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">手机谷粒</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">友情链接</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">销售联盟</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">谷粒社区</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">风险监测</a>
<span></span>
<a href="#">隐私政策</a>
<span></span>
<a href="#">谷粒公益</a>
<span></span>
<a href="#" style="color: rgb(114, 114, 114);">English Site</a>
<span></span>
<a href="#">Media & IR</a>
</p>
<p class="footer_p">
<a href="#">京公网安备 11000002000088号</a>
<span></span>
<a href="#">京ICP证070359号</a>
<span></span>
<a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
<span></span>
<a href="#">新出发京零 字第大120007号</a>
</p>
<p class="footer_p">
<a href="#">互联网出版许可证编号新出网证(京)字150号</a>
<span></span>
<a href="#">出版物经营许可证</a>
<span></span>
<a href="#">网络文化经营许可证京网文[2014]2148-348号</a>
<span></span>
<a href="#">违法和不良信息举报电话：4006561155</a>
</p>
<p class="footer_p">
<a href="#">Copyright © 2004 - 2017 谷粒JD.com 版权所有</a>
<span></span>
<a href="#">消费者维权热线：4006067733</a>
<a href="#">经营证照</a>
</p>
<p class="footer_p">
<a href="#">谷粒旗下网站:</a>
<a href="#">谷粒支付</a>
<span></span>
<a href="#">谷粒云</a>
</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>
<!--右侧侧边栏-->
<div class="header_bar">
<div class="header_bar_box">
<ul>
<li>
<a href="#"><img src="/static/search/img/wo.png" /></a>
<div class="div">
<a href="#">谷粒会员</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/gouwuche.png" /></a>
<div class="div">
<a href="#">购物车</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/taoxin.png" /></a>
<div class="div">
<a href="#">我的关注</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/shi.png" /></a>
<div class="div">
<a href="#">我的足迹</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a href="#">我的消息</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/qianbao.png" /></a>
<div class="div">
<a href="#">资讯JIMI</a>
</div>
</li>
</ul>
<ul>
<li>
<a href="#"><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
<div class="div">
<a href="#">顶部</a>
</div>
</li>
<li>
<a href="#"><img src="/static/search/img/xinxi.png" /></a>
<div class="div">
<a href="#">反馈</a>
</div>
</li>
</ul>
</div>
</div>
<script>
// 商品筛选
function searchProduct(name, value){
location.href = replaceParamVal(location.href, name, value, true)
}
// 根据关键字
function searchByKeyword() {
searchProduct('keyword', $('#keyword_input').val())
}
// 分页跳转处理
$('.a_page').click(function (){
let pageNo = $(this).attr('pageNo');
if (location.href.lastIndexOf('pageNum') != -1){
// 替换pageNum的值
location.href = replaceParamVal(location.href, 'pageNum', pageNo)
} else {
location.href += '&pageNum=' + pageNo
}
return false
})
/**
* url替换
* @param url
* @param paramName 替换的参数
* @param replaceVal 替换的参数值
* @param forceAdd 强制追加参数
* @returns {string}
*/
function replaceParamVal(url, paramName, replaceVal, forceAdd) {
let oUrl = url.toString()
if (oUrl.indexOf(paramName) != -1) {
if (forceAdd) {
let nUrl = ''
if (oUrl.lastIndexOf('?') != -1) {
nUrl = oUrl + '&' + paramName + '=' + replaceVal
} else {
nUrl = oUrl + '?' + paramName + '=' + replaceVal
}
return nUrl
} else {
let re = eval('/('+paramName+'=)([^&]*)/gi')
let nUrl = oUrl.replace(re, paramName + '=' + replaceVal)
return nUrl
}
} else {
let nUrl = ''
if (oUrl.lastIndexOf('?') != -1) {
nUrl = oUrl + '&' + paramName + '=' + replaceVal
} else {
nUrl = oUrl + '?' + paramName + '=' + replaceVal
}
return nUrl
}
}
// 商品排序
$('.a_sort').click(function () {
$(this).toggleClass('desc')
let sort = $(this).attr('sort')
sort = $(this).hasClass('desc') ? sort + '_desc' : sort + '_asc'
location.href = replaceParamVal(location.href, 'sort', sort)
return false
})
// 商品价格区间过滤
$('#skuPriceSearchBtn').click(function () {
let minPrice = $('#minPrice').val()
let maxPrice = $('#maxPrice').val()
let query = ''
if (minPrice !== '' || maxPrice !== '') {
query = minPrice + '_' + maxPrice
}
location.href = replaceParamVal(location.href, 'skuPrice', query)
})
// 仅显示有货
$('#showHasStock').change(function () {
if ($(this).prop('checked')) {
location.href = replaceParamVal(location.href, 'hasStock', 1)
} else {
let re = eval('/(&hasStock=)([^&]*)/gi');
location.href = location.href.toString().replace(re, '')
}
})
// 面包屑导航样式控制
let $navs = $('.nav_a')
for (let i = 0; i < $navs.length; i++) {
(function (i){
$($navs[i]).hover(function (){
$($navs[i]).css({'border':'1px solid red','background':'#fff'})
$('.nav_f_x:eq('+i+')').css({'background':'red','color':'#fff'})
}, function (){
$($navs[i]).css({'border':'1px solid #ccc','background':'#eee'})
$('.nav_f_x:eq('+i+')').css({'background':'#eee','color':'red'})
})
})(i)
}
$(".sl_ext a:nth-child(1)").hover(function () {
$(this).children("b").stop(true).animate({ top: "3px" }, 50);
$(this).children("i").stop(true).animate({ top: "-23px" }, 50)
}, function () {
$(this).children("b").stop(true).animate({ top: "24px" }, 50);
$(this).children("i").stop(true).animate({ top: "3px" }, 50)
});
$(".sl_ext a:nth-child(2)").hover(function () {
$(this).children("span").stop(true).animate({ top: "-1px" }, 100);
$(this).children("i").stop(true).animate({ top: "-14px" }, 100).css({ display: "none" })
}, function () {
$(this).children("span").stop(true).animate({ top: "14px" }, 100);
$(this).children("i").stop(true).animate({ top: "-1px" }, 100).css({ display: "block" })
});
$('.tab_im img').hover(function () {
var a = $(this).prop('src');
var index = $(this).parents('li').index();
$(this).parents('li').css('border', '2px solid red').siblings('li').css('border', '1px solid #ccc');
$(this).parents('ul').prev().find('img').prop('src', a);
$(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display', 'block').siblings('a').css('display', 'none');
$(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display', 'block').siblings('span').css('display', 'none')
});
$(".JD_ipone_one").hover(function () {
$(this).children("div").css({ display: "block" })
}, function () {
$(this).children("div").css({ display: "none" })
});
$("#tab>li").click(function () {
var i = $(this).index();
$("#container>div").hide().eq(i).show()
});
$(".dizhi_show").hover(function () {
$(".dizhi_con").css({ display: "block"})
}, function () {
$(".dizhi_con").css({ display: "none" })
});
$(".dizhi_con").hover(function () {
$(this).css({ display: "block" })
}, function () {
$(this).css({ display: "none" })
});
//显示隐藏
var $li = $(".JD_nav_logo>div:gt(3)").hide();
$('.JD_show span').click(function () {
if ($li.is(':hidden')) {
$li.show();
$(this).css({ width: "86px" }).text('收起 ^');
} else {
$li.hide();
$('.JD_show span').css({ width: "291px" }).text('更多选项（ CPU核数、网络、机身颜色 等）');
}
return false;
});
$(".rig_tab>div").hover(function () {
var i = $(this).index();
$(this).find('.ico').css({ display: 'block' }).stop(true).animate({ top: "190px" }, 300)
}, function () {
var i = $(this).index();
$(this).find('.ico').css({ display: 'none' }).stop(true).animate({ top: "230px" })
});
$('.header_main_left>ul>li').hover(function () {
$(this).css({
background: "#f0f0f0"
}).find('.header_main_left_main').stop(true).fadeIn(300)
}, function () {
$(this).css({
background: "#fff"
}).find(".header_main_left_a").css({
color: "#000"
});
$(this).find('.header_main_left_main').stop(true).fadeOut(100)
});
$(".header_sj a").hover(function () {
$(this).css({
background: "#444"
})
}, function () {
$(this).css({
background: "#6e6568"
})
});
$(".nav_li1 a").hover(function () {
$(".header_main_left").stop(true).fadeIn()
}, function () {
$(".header_main_left").stop(true).fadeOut()
});
$(".header_main_left").hover(function () {
$(this).stop(true).fadeIn()
}, function () {
$(this).stop(true).fadeOut()
});
//右侧侧边栏
$(".header_bar_box ul li").hover(function () {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "block"
}).stop(true).animate({
left: "-60px"
}, 300)
}, function () {
$(this).css({
background: "#7A6E6E"
}).children(".div").css({
display: "none"
}).stop(true).animate({
left: "0"
}, 300)
});
//底部
$(".footer_foot .p1 a").hover(function () {
$(this).css("color", "#D70B1C")
}, function () {
$(this).css("color", "#727272")
});
$(".footer .footer_center ol li a").hover(function () {
$(this).css("color", "#D70B1C")
}, function () {
$(this).css("color", "#727272")
})
</script>
</body>
</html>
如图所示：
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
