乐优商城（八）商品详情

于 2020-04-24 20:16:40 发布
阅读量562 收藏 1
点赞数
分类专栏： # 乐优商城 文章标签： 微服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bm1998/article/details/105738934
版权

文章目录

1. 搭建商品详情微服务

当用户搜索到商品后，如果想要了解商品的更多信息，就需要进入商品详情页。

由于商品详情浏览量比较大，所以我们会创建一个微服务，用来展示商品详情。我们的商品详情页会采用 Thymeleaf 模板引擎渲染后，再返回到客户端。

1.1 创建工程

  1. 右键 leyou 项目 --> New Module --> Maven --> Next

  2. 填写项目信息 --> Next

    在这里插入图片描述

  3. 填写保存的位置 --> Finish

    在这里插入图片描述

  4. 添加依赖

    <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.parent</groupId>
    <artifactId>leyou-goods-web</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>
        <dependency>
            <groupId>com.leyou.common</groupId>
            <artifactId>leyou-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.leyou.item</groupId>
            <artifactId>leyou-item-interface</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
    </dependencies>
</project>

  5. 编写配置文件 application.yaml

    server:
  port: 8084
spring:
  application:
    name: goods-web-service
  thymeleaf:
    cache: false
eureka:
  client:
    service-url:
      defaultZone: http://localhost:10086/eureka
  instance:
    lease-renewal-interval-in-seconds: 5
    lease-expiration-duration-in-seconds: 10

  6. 编写启动类

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

1.2 创建页面模板

  1. 从 leyou-portal 项目中复制 item.html 模板到当前项目 resource 目录下的 templates 中。

    在这里插入图片描述

  2. 把 HTML 的名称空间改成 xmlns:th="http://www.thymeleaf.org"，这样页面就由 Thymeleaf 的引擎解析了。

    在这里插入图片描述

1.3 页面跳转

1.3.1 修改页面跳转路径

当我们点击某个商品图片时，应该携带该商品的 SpuId 跳转到商品详情页。

例如：

http://www.leyou.com/item/2314123.html

我们打开 search.html，修改其中的商品路径：

在这里插入图片描述

1.3.2 Nginx 反向代理

接下来，我们要把这个地址指向我们的 leyou-goods-web 服务，其端口为 8084。

我们在 nginx.conf 中添加配置，并重启 Nginx

在这里插入图片描述

1.3.3 编写 Controller

在 leyou-goods-web 中编写 Controller，接收请求，并跳转到商品详情页

@Controller
@RequestMapping("/item")
public class GoodsController {

    /**
     * 跳转到商品详情页
     *
     * @param model
     * @param id
     * @return
     */
    @GetMapping("/{id}.html")
    public String toItemPage(Model model, @PathVariable("id") Long id) {
        return "item";
    }
}

1.3.4 测试

  1. 启动 leyou-goods-web 工程

  2. 点击一个搜索到的商品，成功跳转到商品详情页

    在这里插入图片描述

1.4 后台提供接口

1.4.1 分析模型数据

首先我们一起来分析一下，在这个页面中需要哪些数据。

我们已知的条件是传递来的 Spu 的 id，我们需要根据 Spu 的 id 查询到下面的数据：

  • Spu 信息
  • Spu 详情
  • Spu 下的所有 Sku
  • 品牌
  • 商品三级分类
  • 规格参数组
  • 规格参数

1.4.2 商品微服务提供接口

为了查询到上面的数据，我们需要在商品微服务中提供一些接口。

通过 Spu 的 id 查询 Spu

  1. 在 SpuApi 接口中添加方法 querySpuById

    /**
 * 通过 spuId 查询 Spu
 * @param spuId
 * @return
 */
@GetMapping("{spuId}")
public Spu querySpuById(@PathVariable("spuId") Long spuId);

  2. 在 SpuController 中添加方法 querySpuById

    /**
 * 通过 spuId 查询 Spu
 * @param spuId
 * @return
 */
@GetMapping("{spuId}")
public ResponseEntity<Spu> querySpuById(@PathVariable("spuId") Long spuId){
    Spu spu = spuService.querySpuById(spuId);
    if (spu == null) {
        return ResponseEntity.notFound().build();
    }
    return ResponseEntity.ok(spu);
}

  3. 在 SpuService 中添加方法 querySpuById

    /**
 * 通过 spuId 查询 Spu
 * @param spuId
 * @return
 */
public Spu querySpuById(Long spuId) {
    Spu spu = spuMapper.selectByPrimaryKey(spuId);
    return spu;
}

通过分类 id 查询规格参数组

商品详情页需要展示商品的规格参数组，以及其下的规格参数。所以我们需要提供一个接口，通过 Spu 的 id 查询规格参数组，并将规格参数封装其中。

在这里插入图片描述

  1. 在 SpecificationApi 接口中添加方法 queryGroupWithCid

    /**
 * 通过分类 id 查询规格参数组
 * @param cid
 * @return
 */
@GetMapping("/group/param/{cid}")
public List<SpecGroup> queryGroupWithCid(@PathVariable("cid") Long cid);

  2. 在 SpecificationController 中添加方法 queryGroupsWithParam

    /**
 * 通过分类 id 查询规格参数组
 *
 * @param cid
 * @return
 */
@GetMapping("/group/param/{cid}")
public ResponseEntity<List<SpecGroup>> queryGroupsWithParam(@PathVariable("cid") Long cid) {
    List<SpecGroup> specGroups = specificationService.queryGroupsWithParam(cid);
    if (CollectionUtils.isEmpty(specGroups)) {
        return ResponseEntity.notFound().build();
    }
    return ResponseEntity.ok(specGroups);
}

  3. 在 SpecificationService 中添加方法 queryGroupsWithParam

    /**
 * 通过分类 id 查询规格参数组
 *
 * @param cid
 * @return
 */
public List<SpecGroup> queryGroupsWithParam(Long cid) {
    List<SpecGroup> specGroups = querySpecGroupsByCid(cid);
    for (SpecGroup specGroup : specGroups) {
        List<SpecParam> params = querySpecParams(specGroup.getId(), null, null, null);
        specGroup.setParams(params);
    }
    return specGroups;
}

1.4.3 创建 FeignClient

我们在 leyou-goods-web 服务中，创建 FeignClient

在这里插入图片描述

@FeignClient(value = "item-service")
public interface BrandClient extends BrandApi {
}

@FeignClient(value = "item-service")
public interface SpuClient extends SpuApi {
}

@FeignClient(value = "item-service")
public interface CategoryClient extends CategoryApi {
}

@FeignClient(value = "item-service")
public interface SpecificationClient extends SpecificationApi {
}

1.4.4 商品详情微服务提供接口

再来回顾一下商品详情页需要的数据，如下：

  • Spu 信息
  • Spu 详情
  • Spu 下的所有 Sku
  • 品牌
  • 商品三级分类
  • 规格参数组
  • 规格参数

我们可以使用 Map<String, Object> 的数据结构封装这些数据，第一个参数为数据名称，第二个参数为数据。

  1. 在 GoodsController 中查询到所需数据，并放入 model

    @Controller
@RequestMapping("/item")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    /**
     * 通过 spuId 查询所需数据
     *
     * @param model
     * @param id
     * @return
     */
    @GetMapping("/{id}.html")
    public String toItemPage(Model model, @PathVariable("id") Long id) {
        // 通过 spuId 查询所需数据
        Map<String, Object> modelMap = this.goodsService.loadData(id);
        // 放入模型
        model.addAllAttributes(modelMap);
        return "item";
    }
}

  2. 在 GoodsService 中添加方法 loadData

    @Service
public class GoodsService {
    @Autowired
    private BrandClient brandClient;

    @Autowired
    private CategoryClient categoryClient;

    @Autowired
    private SpuClient spuClient;

    @Autowired
    private SpecificationClient specificationClient;

    /**
     * 通过 spuId 查询所需数据
     * @param spuId
     * @return
     */
    public Map<String, Object> loadData(Long spuId) {
        Map<String, Object> map = new HashMap<>();

        // 查询 Spu
        Spu spu = this.spuClient.querySpuById(spuId);

        // 查询 SpuDetail
        SpuDetail spuDetail = this.spuClient.querySpuDetailBySpuId(spuId);

        // 查询 Sku 集合
        List<Sku> skus = this.spuClient.querySkusBySpuId(spuId);

        // 查询分类
        List<Long> cids = Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3());
        List<String> names = this.categoryClient.queryNamesByIds(cids);
        List<Map<String, Object>> categories = new ArrayList<>();
        for (int i = 0; i < cids.size(); i++) {
            Map<String, Object> categoryMap = new HashMap<>();
            categoryMap.put("id", cids.get(i));
            categoryMap.put("name", names.get(i));
            categories.add(categoryMap);
        }

        // 查询品牌
        Brand brand = this.brandClient.queryBrandById(spu.getBrandId());

        // 查询规格参数组
        List<SpecGroup> groups = this.specificationClient.queryGroupsWithParam(spu.getCid3());

        // 查询特殊的规格参数
        List<SpecParam> params = this.specificationClient.querySpecParams(null, spu.getCid3(), false, null);
        Map<Long, String> paramMap = new HashMap<>();
        params.forEach(param -> {
            paramMap.put(param.getId(), param.getName());
        });

        // 封装 Spu
        map.put("spu", spu);
        // 封装 SpuDetail
        map.put("spuDetail", spuDetail);
        // 封装 Sku 集合
        map.put("skus", skus);
        // 封装分类
        map.put("categories", categories);
        // 封装品牌
        map.put("brand", brand);
        // 封装规格参数组
        map.put("groups", groups);
        // 封装特殊规格参数
        map.put("paramMap", paramMap);

        return map;
    }
}

1.4.5 测试

  1. 在 item.html 页面写一段 JS 代码，把模型中的数据取出观察

    <script th:inline="javascript">
    const a = /*[[${groups}]]*/ [];
    const b = /*[[${params}]]*/ [];
    const c = /*[[${categories}]]*/ [];
    const d = /*[[${spu}]]*/ {};
    const e = /*[[${spuDetail}]]*/ {};
    const f = /*[[${skus}]]*/ [];
    const g = /*[[${brand}]]*/ {};
</script>

  2. 重启 leyou-item 和 leyou-goods-web 工程

  3. 点击一个商品详情页，查看网页源码，成功查到数据

    在这里插入图片描述

1.5 渲染页面

略，交给前端吧。最终效果如下：

在这里插入图片描述

在这里插入图片描述

2. 页面静态化

2.1 问题分析

现在我们的商品详情页会采用 Thymeleaf 模板引擎渲染后，再返回到客户端。

但这样在后台需要做大量的数据查询，而后渲染得到 HTML 页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。

有没有办法解决这些问题呢？

  • 首先，我们能想到的就是缓存技术。比如使用 Redis 缓存，不过 Redis 适合数据规模比较小的情况。假如数据量比较大，比如我们的商品详情页，每个页面如果 10 kb，100 万商品，就是 10 GB 空间，对内存占用比较大，此时就给缓存系统带来极大压力，如果缓存崩溃，接下来倒霉的就是数据库了。
  • 其次，可以使用静态化技术。静态化是指把动态生成的 HTML 页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务器的渲染。而静态的 HTML 页面可以部署在 Nginx 中，从而大大提高并发能力。

2.2 如何实现静态化

原来，我们商品详情页通过 Thymeleaf 模板引擎生成后，直接就返回给客户端了。

现在，我们生成商品详情页后，将它先部署一份在 Nginx 中，再返回给客户端。下一次在访问这个页面时，就直接访问 Niginx 中的静态页面。

2.3 实现页面静态化

  1. 在 leyou-goods-web 工程中的 service 包下创建 GoodsHtmlService

    @Service
public class GoodsHtmlService {

    @Autowired
    private GoodsService goodsService;

    @Autowired
    private TemplateEngine templateEngine;


    /**
     * 创建 HTML 静态页面
     *
     * @param spuId
     * @throws Exception
     */
    public void createHtml(Long spuId) {

        PrintWriter writer = null;
        try {
            // 获取页面数据
            Map<String, Object> spuMap = this.goodsService.loadData(spuId);

            // 创建 Thymeleaf 上下文对象
            Context context = new Context();
            // 把数据放入上下文对象
            context.setVariables(spuMap);

            // 创建输出流
            File file = new File("D:\\nginx-1.14.0\\html\\item\\" + spuId + ".html");
            writer = new PrintWriter(file);

            // 执行页面静态化方法
            templateEngine.process("item", context, writer);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (writer != null) {
                writer.close();
            }
        }
    }
}

  2. 在 GoodsController 中调用页面静态化方法

    /**
 * 通过 spuId 查询所需数据
 *
 * @param model
 * @param id
 * @return
 */
@GetMapping("/{id}.html")
public String toItemPage(Model model, @PathVariable("id") Long id) {
    // 通过 spuId 查询所需数据
    Map<String, Object> modelMap = this.goodsService.loadData(id);
    // 放入模型
    model.addAllAttributes(modelMap);
    // 页面静态化
    goodsHtmlService.createHtml(id);
    return "item";
}

  3. 修改 Nginx 配置，使 Nginx 代理静态页面。让它对商品请求进行监听，先指向本地静态页面，如果本地没找到，才反向代理到商品详情微服务。

    server {
    listen       80;
    server_name  www.leyou.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 /item {
        # 先找本地
        root html;
        if (!-f $request_filename) { #请求的文件不存在，就反向代理
            proxy_pass http://127.0.0.1:8084;
            break;
        }
    }

    location / {
        proxy_pass http://127.0.0.1:9002;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}

2.4 测试

  1. 重启商品详情微服务

  2. 重启 Nginx

  3. 访问一个商品详情页后，成功生成静态页面

    在这里插入图片描述

  4. 再次访问，速度得到极大提升

    在这里插入图片描述

bm1998
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
乐优商城（09）--商品详情
m0_60551090的博客
09-01 500
乐优商城（09）–商品详情 一、商品详情 1.1、商品详情页服务 商品详情浏览量比较大，并发高，所以独立开发一个微服务，用来展示商品详情 创建module 商品的详情页服务，命名为：leyou-goods-web pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2
乐优商城前八天
10-17
黑马最新乐优商城项目前八天视频，资料、代码、sql是完整
乐优商城页面静态化thymeleaf的item,html模板页面
05-05
乐优商城页面静态化thymeleaf的item,html模板页面，800行代码左右，2018年9月黑马乐优商城的版本,乐优商城页面静态化thymeleaf的item,html模板页面，800行代码左右，2018年9月黑马乐优商城的版本
leyou:在线商城项目
05-26
基于SpringCloud的在线商城系统 简介 这是一个全品类的电商购物网站(B2C模式)，采用目前流行的微服务架构方案设计，以SpringCloud为核心的，基于Rest风格的微服务架构。 系统架构 整个系统采用了前后端分离的开发模式 前端基于Vue相关技术栈进行开发，并通过ajax与后端服务进行交互 前端通过nginx部署，并利用nginx实现对后台服务的反向代理和负载均衡 后端采用SpringCloud技术栈来搭建微服务集群，并对外提供Rest风格接口 Zuul作为整个微服务入口，实现请求路由、负载均衡、限流、权限控制等功能 后端技术栈： Spring Boot Mybatis Spring Cloud Redis RabbitMQ Elasticsearch nginx FastDFS thymeleaf JWT ：商品及商品分类、品牌、库存等的服务 商品的种类繁多，每一件商品，其
乐优商城项目---day14-thymeleaf及静态化
zgz102928的博客
02-27 454
1.商品详情 当用户搜索到商品，肯定会点击查看，就会进入商品详情页，接下来我们完成商品详情页的展示， 1.1.Thymeleaf 在商品详情页中，我们会使用到Thymeleaf来渲染页面，所以需要先了解Thymeleaf的语法。 详见课前资料中《Thymeleaf语法入门.md》 创建leyou-goods-web微服务 导入依赖 <?xml version="1.0" ...
乐优商城：笔记（八）：页面微服务：LyPageApplication
dianemax
05-31 721
文章目录引言1 思路分析2 Thymeleaf2.1 视图解析器2.2 model1 页面微服务搭建1.1 引入依赖1.3 配置文件1.3 启动类1.4 导入页面模板1.5 nginx反向代理2 实现详情页的数据渲染2.1 封装接口2.1.1 查询spu2.1.2 查询规格参数2.2 client2.2 controller2.3 service3 ==页面静态化==3.1 简介3.1.1 问题分...
乐优商城，乐优商城，乐优商城，乐优商城
最新发布
08-05
乐优商城，乐优商城，乐优商城，乐优商城
乐优商城项目总结1
08-08
《乐优商城项目总结：深入理解Spring Boot》 Spring Boot作为现代Java开发中的一个重要框架，以其高效、便捷的特性深受开发者喜爱。在“乐优商城”项目中，Spring Boot扮演了核心角色，帮助我们快速构建了一个功能...
乐优商城SQL文件，mysql使用
01-26
在乐优商城的数据库设计中，通常会包含多个表，例如用户表（users）、商品表（products）、订单表（orders）、购物车表（carts）等。每个表都有其特定的字段，如用户表可能包含用户ID、用户名、密码、邮箱、电话等；...
Java 乐优商城源码
04-02
【Java 乐优商城源码】是一套基于Java技术实现的电子商务系统，旨在提供一个功能齐全、可扩展性强的在线购物平台。这个源码项目包含了多个模块，如用户注册（leyou-register）、门面系统（leyou-gategay）以及搜索...
乐优商城前端
10-08
乐优商城门户网站，门户系统面向的是用户，安全性很重要，而且搜索引擎对于单页应用并不友好。因此门户系统不再采用与后台系统类似的SPA（单页应用）。依然是前后端分离，不过前端的页面会使用独立的html，在每个页面中使用vue来做页面渲染。
leyou 商城后台管理
03-11
leyou 商城后台管理
比较全leyou商城前台代码
09-23
提供了比较全的leyou商城前台代码.
乐优商城--服务(六) ： 页面微服务(LyPageApplication)
xiazhiyou
05-31 932
页面微服务1. Thymeleaf2. 搭建项目2.1 引入依赖2.2 配置2.3 启动类2.4 页面模板3. 页面跳转3.1 跳转路径3.2 nginx反向代理4. 商品微服务提供接口4.1 页面分析4.2 查询spu接口4.3 查询规格参数组5. 创建FeignClient6. 实现查询商品详情6.1 web6.2 service7. 页面静态化7.1 简介7.1.1 问题分析7.1.2 什么...
乐优商城学习笔记十八-商品详情
小武的Blog
04-21 1677
0.学习目标 了解Thymeleaf的基本使用 实现商品详情页的渲染 知道页面静态化的作用 实现页面静态化功能 1.商品详情 当用户搜索到商品，肯定会点击查看，就会进入商品详情页，接下来我们完成商品详情页的展示， 1.2.商品详情页服务 商品详情浏览量比较大，并发高，我们会独立开启一个微服务，用来展示商品详情。 1.2.1.创建module 商品的详情页服务，命名为：ly-goods-page...
乐优商城笔记六：商品详情页
Bbb的博客
06-14 2026
使用模板引擎 Thymeleaf + nginx 完成商品详情页静态化 完成乐优商城商品详情页 搭建商品详情页微服务 创建子工程 GroupId：com.leyou.service ArtifactId：ly-page 编写pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven...
乐优商城（二十二）——商品详情及静态化
lyj2018gyq的博客
10-17 4029
目录 一、商品详情 1.1 商品详情页服务 1.1.1 创建module 1.1.2 pom依赖 1.1.3 编写启动类 1.1.4 application.yml 1.1.5 页面模板 1.2 页面跳转 1.2.1 修改页面跳转路径 1.2.2 nginx反向代理 1.2.3 编写跳转Controller 1.2.4 测试 1.3 封装模型数据 1.3.1 商品微服务...
乐优商城第十五天（商品详情以及静态化）
CR2018博客
06-14 881
商品详情页浏览量大，并发高，更新的频率并不是很高。如果我们每次都去后台请求数据的话，会造成很大的服务器压力，这里我们使用Thymeleaf技术来渲染页面，Thymeleaf的特点是动静结合，既可以让前端在没有服务端数据的情况下看到效果， 又可以让后端在服务器端带着数据去查看效果。我们的商品详情并发很大，需要一个单独的微服务。第一步，导入依赖&lt;dependencies&gt; &lt;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bm1998

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值