其他分享
首页 > 其他分享> > 乐优商城--服务(六) ： 页面微服务

乐优商城--服务(六) ： 页面微服务

作者：互联网

页面微服务


当用户搜索到商品，肯定会点击查看，就会进入商品详情页，商品详情浏览量比较大，并发高，我们会独立开启一个微服务，用来展示商品详情。

接下来我们完成商品详情页的展示，商品详情页在leyou-portal对应的页面是:item.html。
但是不同的商品，到达item.html需要展示的内容不同，该怎么做呢？

我们应该将两者做一个结合，实现一个最优方案，即：我们先在后台完成数据的渲染，生成一个页面（静态页面），而要完成服务端渲染，以前采用JSP，而现在我们使用另外的模板引擎技术：Thymeleaf

1. Thymeleaf

Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎。

Thymeleaf的主要目标是为我们的开发工作流程带来优雅的自然模板 - HTML（前后端人员都可以运行）。可以在直接浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。

Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等，而Thymeleaf与SpringMVC的视图技术，及SpringBoot的自动化配置集成非常完美。

Thymeleaf作为一个模板引擎，当用户的请求到达后台时，Thymeleaf会把请求接收到，然后去查询数据，查完数据以后，再去拿到模板item.html，再把model中的数据一一渲染到item.html中，渲染完成以后，Thymeleaf再把渲染得到的html内容写到用户的respose中，自然也就返回到了浏览器。

特点：

2. 搭建项目

2.1 引入依赖

<?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.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.service</groupId>
    <artifactId>ly-page</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </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.service</groupId>
            <artifactId>ly-item-interface</artifactId>
            <version>1.0.0-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-amqp</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2.2 配置

server:
  port: 8084
spring:
  application:
    name: page-service
  thymeleaf: #thymeleaf做了缓存，我们应关掉
    cache: false
  rabbitmq:
      host: 192.168.184.130
      username: leyou
      password: leyou
      virtual-host: /leyou
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:10086/eureka

2.3 启动类

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

2.4 页面模板

我们从leyou-portal中复制item.html模板到当前项目resource目录下的template中：
在这里插入图片描述

3. 页面跳转

3.1 跳转路径

页面跳转时，我们会携带SPU的id信息。例如http://www.leyou.com/item/2314123.html

3.2 nginx反向代理

接下来，我们要把这个地址指向我们刚刚创建的服务：ly-page，其端口为8084

我们在nginx.conf中添加一段逻辑：
在这里插入图片描述
把以/item开头的请求，代理到我们的8084端口

4. 商品微服务提供接口

4.1 页面分析

在这里插入图片描述
页面中需要哪些数据：

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

4.2 查询spu接口

以上所需数据中，查询spu的接口目前还没有，我们需要在商品微服务中提供这个接口：

// 根据spu的id查询spu
@GetMapping("spu/{id}")
Spu querySpuById(@PathVariable("id") Long spuId);

// 根据spu的id查询spu
@GetMapping("spu/{id}")
public ResponseEntity<Spu> querySpuById(@PathVariable("id")Long spuId){
    return ResponseEntity.ok(goodsService.querySpuById(spuId));
}

// 根据spu的id查询spu
public Spu querySpuById(Long id) {

    //查询spu
    Spu spu = spuMapper.selectByPrimaryKey(id);
    if(spu==null){
        throw new LyException(ExceptionEnum.GOODS_NOT_FOUND);
    }
    //查询sku
    spu.setSkus(querySkuBySpuId(id));
    //查询detail
    spu.setSpuDetail(queryDetailById(id));
    return spu;
}

4.3 查询规格参数组

我们在页面展示规格时，需要按组展示：
在这里插入图片描述
组内有多个参数，为了方便展示。我们提供一个接口，查询规格组，同时在规格组中持有组内的所有参数。

@Data
@Table(name = "tb_spec_group")
public class SpecGroup {
    @Id
    @KeySql(useGeneratedKeys = true)
    private Long id;
    private Long cid;
    private String name;

    @Transient
    private List<SpecParam> params;
}

//根据cid查询规格组及其规格参数
@GetMapping("spec/group")
List<SpecGroup> queryGroupByCid(@RequestParam("cid") Long cid);

//根据cid查询规格组及其规格参数
@GetMapping("group")
public ResponseEntity<List<SpecGroup>> queryListByCid(@RequestParam("cid") Long cid){
    return ResponseEntity.ok(specificationService.queryListByCid(cid));
}

 //根据cid查询规格组及其规格参数
public List<SpecGroup> queryListByCid(Long cid) {
   // 查询规格组
   List<SpecGroup> specGroups = queryGroupByCid(cid);

   // 查询组内参数
   List<SpecParam> specParams = querySpecParams(null, cid, null);

   // 先把规格参数变成map，map的key是组Id,map的值是组下的所有参数
   HashMap<Long, List<SpecParam>> map = new HashMap<>();
   for (SpecParam param : specParams) {
       if(!map.containsKey(param.getGroupId())){
           // 如果不包含组Id，说明是第一次出现,因此要新增一个List
           map.put(param.getGroupId(),new ArrayList<>());
       }
       // 如果group存在 也要添加
       map.get(param.getGroupId()).add(param);
   }

   // 填充param到group中
   for (SpecGroup specGroup : specGroups) {
       specGroup.setParams(map.get(specGroup.getId()));
   }

   return specGroups;
}

5. 创建FeignClient

我们在ly-page服务中，创建FeignClient：
在这里插入图片描述

6. 实现查询商品详情

6.1 web

@Controller
public class PageController {
    @Autowired
    private PageService pageService;

    @GetMapping("item/{id}.html")
    public String toItemPage(@PathVariable("id") Long spuId, Model model){
        // 查询数据模型
        Map<String,Object> attributes = pageService.loadModel(spuId);

        // 准备数据模型
        model.addAllAttributes(attributes);
        // 返回视图
        return "item";
    }
}

6.2 service

@Slf4j
@Service
public class PageService {

    // 加载模型数据
    public Map<String,Object> loadModel(Long spuId) {

        Map<String,Object> model = new HashMap<>();

        // 查询spu
        Spu spu = goodsClient.querySpuById(spuId);
        // 查询skus
        List<Sku> skus = spu.getSkus();
        // 查询详情detail
        SpuDetail detail = spu.getSpuDetail();
        // 查询brand
        Brand brand = brandClient.queryBrandById(spu.getBrandId());
        // 查询商品的分类
        List<Category> categories = categoryClient.queryCategoryByIds(Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3()));
        // 查询规格参数
        List<SpecGroup> specs = specificationClient.queryGroupByCid(spu.getCid3());

        model.put("title", spu.getTitle());
        model.put("subTitle", spu.getSubTitle());
        model.put("skus", skus);
        model.put("detail", detail);
        model.put("brand", brand);
        model.put("categories", categories);
        model.put("specs", specs);
        return model;
    }
}

7. 页面静态化

页面静态化是一种解决高并发非常有效的手段。

7.1 简介

7.1.1 问题分析

现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询，而后渲染得到HTML页面。会对数据库造成压力，并且请求的响应时间过长，并发能力不高。

大家能想到什么办法来解决这个问题？

首先我们能想到的就是缓存技术，比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大，例如我们的商品详情页。每个页面如果10kb，100万商品，就是10GB空间，对内存占用比较大。此时就给缓存系统带来极大压力，如果缓存崩溃，接下来倒霉的就是数据库了。

所以缓存并不是万能的，某些场景需要其它技术来解决，比如静态化。

7.1.2 什么是静态化

静态化是指把动态生成的HTML页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染。

而静态的HTML页面可以部署在nginx中，从而大大提高并发能力，减小tomcat压力。

7.1.3 如何实现静态化

目前，静态化页面都是通过模板引擎来生成，而后保存到nginx服务器来部署。常用的模板引擎比如：

我们之前就使用的Thymeleaf，来渲染html返回给用户。Thymeleaf除了可以把渲染结果写入Response，也可以写到本地文件，从而实现静态化。
静态化思路：把模板引擎的输出目的地进行改写，不再是写到response，而是写到文件。

7.2 Thymeleaf实现静态化

7.2.1 概念

先说下Thymeleaf中的几个概念：

| Context

上下文： 用来保存模型数据，当模板引擎渲染时，可以从Context上下文中获取数据用于渲染。

当与SpringBoot结合使用时，我们放入Model的数据就会被处理到Context，作为模板渲染的数据使用。

| TemplateResolver

模板解析器：用来读取模板相关的配置，例如：模板存放的位置信息，模板文件名称，模板文件的类型等等。

当与SpringBoot结合时，TemplateResolver已经由其创建完成，并且各种配置也都有默认值，比如模板存放位置，其默认值就是：templates。比如模板文件类型，其默认值就是html。

| TemplateEngine

模板引擎：用来解析模板的引擎，需要使用到上下文、模板解析器。分别从两者中获取模板中需要的数据，模板文件。然后利用内置的语法规则解析，从而输出解析后的文件。来看下模板引起进行处理的函数：

templateEngine.process("模板名", context, writer);

三个参数：

在输出时，我们可以指定输出的目的地，如果目的地是Response的流，那就是网络响应。如果目的地是本地文件，那就实现静态化了。

而在SpringBoot中已经自动配置了模板引擎，因此我们不需要关心这个。现在我们做静态化，就是把输出的目的地改成本地文件即可！

7.2.2 具体实现

@Slf4j
@Service
public class PageService {

    @Autowired
    private TemplateEngine templateEngine;

    // 创建html页面
    public void createHtml(Long spuId){
        //上下文
        Context context = new Context();
        context.setVariables(loadModel(spuId));
        //输出流
        File dest = new File("E:\\course\\JavaProject\\upload", spuId + ".html");

        //判断文件是否存在,若存在，先删除掉
        if(dest.exists()){
            dest.delete();
        }
        try(PrintWriter writer = new PrintWriter(dest,"UTF-8")){
            //生成html
            templateEngine.process("item",context,writer);
        }catch (Exception e){
            log.error("[静态页服务] 生成静态页异常！",e);
        }
    }
}

7.2.3 测试

@RunWith(SpringRunner.class)
@SpringBootTest
public class PageServiceTest {

    @Autowired
    private PageService pageService;

    @Test
    public void createHtml() {
        pageService.createHtml(141L);
    }
}

7.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://192.168.1.109:8084;
                break;
            }
        }
    
        location / {
            proxy_pass http://192.168.1.109:9002;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }

(优化：将ly-page与nginx部署在一起，生成的html直接在nginx下，这样就无需手动完成静态页的上传)

7.4 什么时候创建静态文件

当商品完成了增删改操作时，我们都需要对静态页进行重新处理。

问题：

如果我们在后台修改了商品的价格，搜索页面和商品详情页显示的依然是旧的价格，这样显然不对。该如何解决？

这里有两种解决方案：

以上两种方式都有同一个严重问题：就是代码耦合，后台服务中需要嵌入搜索和商品页面服务，违背了微服务的独立原则。

所以，我们会通过另外一种方式来解决这个问题：消息队列

注：由于内容偏多，我们将消息队列的知识重新写成了一篇。

标签：服务,静态,乐优,spu,查询,Thymeleaf,模板,页面
来源： https://blog.csdn.net/qq_41649078/article/details/90672403