[E-commerce website 005] Page static (Project practice: product details page, page static)

I. Introduction

2. Introduction

2.1 Problem analysis

General process: The front-end page is rendered by the Thymeleaf template engine and then returned to the browser. In the background, a large amount of data query is required, and then the HTML page is rendered .
Problem: First, a large number of data queries in the background put pressure on the database; second, the response is slow, the response time of the request is too long, and the concurrency is not high .
Option 1: Cache technology, such as Redis. However, Redis is suitable for situations where the data size is relatively small. If the amount of data is relatively large, such as our product details page. If each page is 10kb and 1 million products, it is 10GB, which takes up a lot of memory. At this time, it brings great pressure to the cache system. If the cache crashes, the next bad luck is the database.

2.2 What is static

Definition: Convert the dynamically generated HTML page into static content and save it on the Nginx server. After the user's request arrives, the static page will be directly accessed without being rendered by the service.
Summary: Static HTML pages can be deployed in nginx, which greatly improves concurrency and reduces tomcat pressure.
Reason 1: Web server and web application server have
the advantages of large concurrency, but the disadvantage is that they can only handle static resources. Nginx has a concurrency of 50,000 but can only handle static pages
. The disadvantage of web application servers is that the concurrency is small and the advantage is that it can handle dynamics. Page, the tomcat concurrent volume is 200, but it can handle dynamic pages.
Reason 2: Nginx and Redis:
pages are static, the product detail page is accessed frequently, the amount of data is large, and contains various images, and the entire html of the product detail page is simply changed to static The page is stored on Nginx, and it will be taken directly from Nginx next time (redis can only store hotspot data with high access frequency, key-value key-value pairs, not pages)
ps: Page static is to statically store the entire html page To Nginx, not a little bit of storage of data and pictures

2.3 how to achieve static

First, the static pages are generated by the template engine, and
second, the generated static pages are saved to the nginx server for deployment.
Summary sentence: template engine will whole html page to generate static pages , nginx server will generate a static page stored up and out when needed.

Commonly used template engines such as: Freemarker, Velocity, Thymeleaf
For Thymeleaf, we used Thymeleaf before to render html back to the user. Thymeleaf can not only write the rendering result into the Response, but also write it to a local file to achieve static.
One sentence summary: Thymeleaf can write the rendering result into Response and return it to the front end; it can also write the rendering result to a local file to get a static page and store it on the Nginx server to achieve static.

Third, Thymeleaf realizes staticization (write the rendering results to a local file to obtain a static page and store it in the Nginx server)

3.1 Several concepts in Thymeleaf

Let me talk about several concepts in Thymeleaf:
Context: Run context
TemplateResolver: Template resolver
TemplateEngine: Template engine

Context
definition : context, used to save model data, what is the use of saved model data? When the template engine TemplateEngine renders, it can get data from the context for rendering.
Used in combination with SpringBoot : When used in combination with SpringBoot, the data put into the Model will automatically be processed to the Context and used as the data for template rendering.

TemplateResolver
definition : template resolver, used to read template-related configuration, such as: template storage location information, template file name, template file type, etc.
Used in conjunction with SpringBoot : When combined with SpringBoot, TemplateResolver has been created by it, and various configurations also have default values, such as the storage location of templates. The default value is templates. For example, the template file type, its default value is html.

TemplateEngine (Thymeleaf is a template engine)
definition : template engine, the engine used to parse templates, requires context and template parser. Obtain the data needed in the template (ie template file) from the context and the template resolver TemplateResolver. Then use the built-in grammatical rules to parse to output the parsed file. Let’s take a look at the processing function of the template engine:
templateEngine.process("template name", context, writer);
three parameters:
(1) template name
(2) context object: it contains model data //
(3) writer: The flow of the output destination//The function of this parameter: when outputting, we can specify the destination of the output, if the destination is the flow of Response, it is the network response. If the destination is a local file, it will be static.
ps: The template engine has been automatically configured in SpringBoot. We statically change the output destination to a local file!

3.2 Practice: In the SpringBoot project, Thymeleaf realizes static

Service code:

@Service
public class GoodsHtmlService {
    
       // 商品详情页面Html页面

    @Autowired
    private GoodsService goodsService;

    @Autowired
    private TemplateEngine templateEngine;  // 模板引擎

    private static final Logger LOGGER = LoggerFactory.getLogger(GoodsHtmlService.class);

    public void createHtml(Long spuId) {
    
       // 创建html页面
        PrintWriter writer = null;
        try {
    
    
            // 第二个参数，创建thymeleaf上下文context对象
            Context context = new Context();
            // 获取页面数据
            Map<String, Object> spuMap = this.goodsService.loadModel(spuId);
            // 把数据放入上下文对象
            context.setVariables(spuMap);

            // 第三个参数，创建输出流  指定输出位置  输出为html文件
            File file = new File("C:\\project\\nginx-1.14.0\\html\\item\\" + spuId + ".html");
            writer = new PrintWriter(file);

            // 执行页面静态化方法
            templateEngine.process("item", context, writer);
        } catch (Exception e) {
    
    
            LOGGER.error("页面静态化出错：{}，"+ e, spuId);
        } finally {
    
    
            if (writer != null) {
    
    
                writer.close();
            }
        }
    }

    /**
     * 新建线程处理页面静态化
     * @param spuId
     */
    public void asyncExcute(Long spuId) {
    
    
        ThreadUtils.execute(()->createHtml(spuId));  
        /*ThreadUtils.execute(new Runnable() {
            @Override
            public void run() {
                createHtml(spuId);
            }
        });*/
    }
}

Thread tools:

public class ThreadUtils {
    
    

    private static final ExecutorService es = Executors.newFixedThreadPool(10);

    public static void execute(Runnable runnable) {
    
    
        es.submit(runnable);
    }
}

3.2.1 When to create static files

We have written a service to create static files, then the question is: when to call it

Consider this scenario:

If most of the products have static pages. Then the user's request will be intercepted by nginx and will not reach our leyou-goods-webservice at all. Only those requests that do not have a page can arrive here.

Therefore, if the request arrives here, in addition to returning to the page view, we should also create a static page, so we won't bother us again next time.

So, we add logic to GoodsController to generate static html files:

@GetMapping("{id}.html")
public String toItemPage(@PathVariable("id")Long id, Model model){
    
    

    // 原有业务逻辑，加载所需的数据
    Map<String, Object> map = this.goodsService.loadModel(id);
    // 原有业务逻辑，把数据放入数据模型
    model.addAllAttributes(map);

    // 新增业务逻辑，页面静态化
    this.goodsHtmlService.asyncExcute(id);

    return "item";
}

Note: The code that generates html cannot affect user requests, so here we use additional threads for asynchronous creation.

3.2.2 Restart test:

Visit a product detail, and then view the nginx catalog:

3.3 nginx proxy static pages

We modify nginx to listen to product requests and point to the local static page. If it is not found locally, it will reverse proxy to the actual server.

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;
    }
}

Restart the test:

Found that the request speed has been greatly improved:

Four, interview golden finger

During the interview, I can understand several questions:
1. Why use static page?
2. What is static? The principle of static?
3. How to achieve
staticization ? 4. Thymeleaf achieves staticization (write the rendering results to a local file to obtain static pages and store them in the Nginx server)
4.1 Three concepts in Thymeleaf
4.2 When does the controller interface call the static service
4.3 Nginx configuration: Modify the nginx configuration so that it listens to product requests and points to the local static page. If it is not found locally, it will reverse proxy to the actual server.
PS: Principle: The code that generates html cannot affect user requests, so here we use additional The threads are created asynchronously.
Write these down and do it all in one go, and the problem of static page is just fine.

4.1 Basic knowledge of page static

4.1.1 Why use static

General process: The front-end page is rendered by the Thymeleaf template engine and then returned to the browser. In the background, a large amount of data query is required, and then the HTML page is rendered .
Problem: First, a large number of data queries in the background put pressure on the database; second, the response is slow, the response time of the request is too long, and the concurrency is not high .
Option 1: Cache technology, such as Redis. However, Redis is suitable for situations where the data size is relatively small. If the amount of data is relatively large, such as our product details page. If each page is 10kb and 1 million products, it is 10GB, which takes up a lot of memory. At this time, it brings great pressure to the cache system. If the cache crashes, the next bad luck is the database.

4.1.2 What is static? The principle of static?

Definition: Convert the dynamically generated HTML page into static content and save it on the Nginx server. After the user's request arrives, the static page will be directly accessed without being rendered by the service.
Summary: Static HTML pages can be deployed in nginx, which greatly improves concurrency and reduces tomcat pressure.
Reason 1: Web server and web application server have
the advantages of large concurrency, but the disadvantage is that they can only handle static resources. Nginx has a concurrency of 50,000 but can only handle static pages
. The disadvantage of web application servers is that the concurrency is small and the advantage is that it can handle dynamics. Page, the tomcat concurrent volume is 200, but it can handle dynamic pages.
Reason 2: Nginx and Redis:
pages are static, the product detail page is accessed frequently, the amount of data is large, and contains various images, and the entire html of the product detail page is simply changed to static The page is stored on Nginx, and it will be taken directly from Nginx next time (redis can only store hotspot data with high access frequency, key-value key-value pairs, not pages)
ps: Page static is to statically store the entire html page To Nginx, not a little bit of storage of data and pictures

4.1.3 How to achieve static

First, the static pages are generated by the template engine, and
second, the generated static pages are saved to the nginx server for deployment.
Summary sentence: template engine will whole html page to generate static pages , nginx server will generate a static page stored up and out when needed.

Commonly used template engines such as: Freemarker, Velocity, Thymeleaf
For Thymeleaf, we used Thymeleaf before to render html back to the user. Thymeleaf can not only write the rendering result into the Response, but also write it to a local file to achieve static.
One sentence summary: Thymeleaf can write the rendering result into Response and return it to the front end; it can also write the rendering result to a local file to get a static page and store it on the Nginx server to achieve static.

4.2 Thymeleaf realizes staticization (write the rendering results to a local file to get the static page to be stored in the Nginx server)

4.2.1 Several concepts in Thymeleaf

Let me talk about several concepts in Thymeleaf:
Context: Run context
TemplateResolver: Template resolver
TemplateEngine: Template engine

Context
definition : context, used to save model data, what is the use of saved model data? When the template engine TemplateEngine renders, it can get data from the context for rendering.
Used in combination with SpringBoot : When used in combination with SpringBoot, the data put into the Model will automatically be processed to the Context and used as the data for template rendering.

TemplateResolver
definition : template resolver, used to read template-related configuration, such as: template storage location information, template file name, template file type, etc.
Used in conjunction with SpringBoot : When combined with SpringBoot, TemplateResolver has been created by it, and various configurations also have default values, such as the storage location of templates. The default value is templates. For example, the template file type, its default value is html.

TemplateEngine (Thymeleaf is a template engine)
definition : template engine, the engine used to parse templates, requires context and template parser. Obtain the data needed in the template (ie template file) from the context and the template resolver TemplateResolver. Then use the built-in grammatical rules to parse to output the parsed file. Let’s take a look at the processing function of the template engine:
templateEngine.process("template name", context, writer);
three parameters:
(1) template name
(2) context object: it contains model data //
(3) writer: The flow of the output destination//The function of this parameter: when outputting, we can specify the destination of the output, if the destination is the flow of Response, it is the network response. If the destination is a local file, it will be static.
ps: The template engine has been automatically configured in SpringBoot. We statically change the output destination to a local file!

4.2.2 when when to call the static page Service

First, the controller calls the static page service.
We have written the service that creates the static files. Then the question is: when to call it.
Think about this scenario:
If most of the products have static pages. Then the user's request will be intercepted by nginx and will not reach our leyou-goods-webservice at all. Only those requests that do not have a page can arrive here.
Therefore, if the request arrives here, in addition to returning to the page view, we should also create a static page, so we won’t bother us next time.

Second, Nginx configuration : modify the nginx configuration to allow it to monitor product requests and point to the local static page. If it is not found locally, it will reverse proxy to the actual server.

Note: The code that generates html cannot affect user requests, so here we use additional threads for asynchronous creation.

V. Summary

Static page (project practice: product detail page, static page), completed.

Code every day, make progress every day! ! !