[Sitio web de comercio electrónico 005] Página estática (práctica del proyecto: página de detalles del producto, página estática)

I. Introducción

2. Introducción

2.1 Análisis de problemas

Proceso general: El motor de plantillas Thymeleaf representa la página de inicio y luego la devuelve al navegador. En segundo plano, se requiere una gran cantidad de consultas de datos y luego se representa la página HTML .
Problemas: primero, una gran cantidad de consultas de datos en segundo plano ejercen presión sobre la base de datos; segundo, la respuesta es lenta, el tiempo de respuesta de la solicitud es demasiado largo y la capacidad de concurrencia no es alta .
Opción 1: tecnología de caché, como Redis. Sin embargo, Redis es adecuado para situaciones en las que el tamaño de los datos es relativamente pequeño. Si la cantidad de datos es relativamente grande, como nuestra página de detalles del producto. Si cada página tiene 10 kb y 1 millón de productos, son 10 GB, lo que ocupa mucha memoria. En este momento, ejerce una gran presión sobre el sistema de caché. Si el caché falla, la siguiente mala suerte es la base de datos.

2.2 Qué es estático

Definición: Convierta la página HTML generada dinámicamente en contenido estático y guárdelo en el servidor Nginx. Después de que llegue la solicitud del usuario, se accederá directamente a la página estática sin que el servicio la preste.
Resumen: las páginas HTML estáticas se pueden implementar en nginx, lo que mejora en gran medida la concurrencia y reduce la presión de Tomcat.
Razón 1: el servidor web y el servidor de aplicaciones web tienen
las ventajas de una gran concurrencia, pero la desventaja es que solo pueden manejar recursos estáticos. Nginx tiene una concurrencia de 50.000 pero solo puede manejar páginas estáticas
. La desventaja de los servidores de aplicaciones web es que la concurrencia es pequeña y la ventaja es que puede manejar dinámicas. Página, el volumen simultáneo de Tomcat es 200, pero puede manejar páginas dinámicas.
Razón 2: Nginx y Redis:
páginas estáticas, se accede con frecuencia a la página de detalles del producto, la cantidad de datos es grande y contiene varias imágenes, simplemente convierta todo el html de la página de detalles del producto en estático La página se almacena en Nginx, y se tomará directamente de Nginx la próxima vez (redis solo puede almacenar datos de puntos de acceso con alta frecuencia de acceso, pares clave-valor clave-valor, no páginas)
ps: Page static es almacenar estáticamente toda la página html Para Nginx, no un poco de almacenamiento de datos e imágenes

2.3 como lograr la estática

Primero, las páginas estáticas son generadas por el motor de plantillas, y
segundo, las páginas estáticas generadas se guardan en el servidor nginx para su implementación.
Frase de resumen: motor de la plantilla tendrá toda la página HTML para generar páginas estáticas , servidor nginx generará una página estática almacenada y cuando sea necesario.

Motores de plantilla de uso común como: Freemarker, Velocity, Thymeleaf
Para Thymeleaf, usamos Thymeleaf antes para devolver html al usuario. Thymeleaf no solo puede escribir el resultado de la representación en la Respuesta, sino que también puede escribirlo en un archivo local para lograr estática.
Resumen de una oración: Thymeleaf puede escribir el resultado de la representación en Response y devolverlo al front-end; también puede escribir el resultado de la representación en un archivo local para obtener una página estática y almacenarla en el servidor Nginx para lograr la estática.

En tercer lugar, Thymeleaf realiza la estática (escribe los resultados de la representación en un archivo local para obtener una página estática y almacenarla en el servidor Nginx)

3.1 Varios conceptos en Thymeleaf

Permítanme hablar sobre algunos conceptos en Thymeleaf:
Contexto: Ejecutar contexto
TemplateResolver: Resolución de
plantillas TemplateEngine: Motor de plantillas

Contexto
definición : contexto, se utiliza para guardar los datos del modelo, ¿cuál es el uso de los datos del modelo guardadas? Cuando el motor de plantillas TemplateEngine renderiza, puede obtener datos del contexto para renderizar.
Usado en combinación con SpringBoot : cuando se usa en combinación con SpringBoot, los datos colocados en el Modelo se procesarán automáticamente en el Contexto y se usarán como datos para la representación de la plantilla.

Definición de TemplateResolver : resolución de plantilla, que se utiliza para leer la configuración relacionada con la plantilla, como: información de ubicación de almacenamiento de la plantilla, nombre de archivo de plantilla, tipo de archivo de plantilla, etc.
Utilizado junto con SpringBoot : cuando se combina con SpringBoot, TemplateResolver ha sido creado por él, y varias configuraciones también tienen valores predeterminados, como la ubicación de almacenamiento de plantillas. El valor predeterminado es templates. Por ejemplo, el tipo de archivo de plantilla, su valor predeterminado es html.

Definición de TemplateEngine (Thymeleaf es un motor de plantillas) : motor de plantillas, el motor utilizado para analizar plantillas, requiere contexto y analizador de plantillas. Obtenga los datos necesarios en la plantilla (es decir, archivo de plantilla) del contexto y del solucionador de plantillas TemplateResolver. Luego, use las reglas gramaticales integradas para analizar y generar el archivo analizado. Echemos un vistazo a la función de procesamiento del motor de plantillas:
templateEngine.process ("nombre de plantilla", contexto, escritor);
tres parámetros:
(1) nombre de plantilla
(2) objeto de contexto: contiene datos del modelo //
(3) escritor: El flujo del destino de salida // La función de este parámetro: al generar, podemos especificar el destino de la salida, si el destino es el flujo de Respuesta, es la respuesta de la red. Si el destino es un archivo local, será estático.
ps: El motor de plantillas se ha configurado automáticamente en SpringBoot. ¡Cambiamos estáticamente el destino de salida a un archivo local!

3.2 Práctica: En el proyecto SpringBoot, Thymeleaf se da cuenta de estática

Código de servicio:

@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);
            }
        });*/
    }
}

Herramientas de hilo:

public class ThreadUtils {
    
    

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

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

3.2.1 Cuándo crear archivos estáticos

Hemos escrito un servicio para crear archivos estáticos, entonces la pregunta es: cuándo llamarlo

Considere este escenario:

Si la mayoría de los productos tienen páginas estáticas. Entonces, la solicitud del usuario será interceptada por nginx y no llegará a nuestro leyou-goods-webservicio en absoluto. Aquí solo pueden llegar aquellas solicitudes que no tengan página.

Por lo tanto, si la solicitud llega aquí, además de volver a la vista de página, también deberíamos crear una página estática, para no volver a molestarnos la próxima vez.

Entonces, agregamos lógica a GoodsController para generar archivos html estáticos:

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

Nota: El código que genera html no puede afectar las solicitudes de los usuarios, por lo que aquí usamos subprocesos adicionales para la creación asincrónica.

3.2.2 Prueba de reinicio:

Visite el detalle de un producto y luego vea el catálogo de nginx:

3.3 páginas estáticas de proxy nginx

Modificamos nginx para escuchar las solicitudes de productos y apuntar a la página estática local. Si no se encuentra localmente, invertirá el proxy al servidor real.

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

Reinicie la prueba:

Descubrió que la velocidad de solicitud se ha mejorado considerablemente:

Cuatro, entrevista dedo dorado

Durante la entrevista, puedo entender varias preguntas:
1. ¿Por qué usar una página estática?
2. ¿Qué es estático? ¿El principio de estática?
3. ¿Cómo lograr la
estática ? 4. Thymeleaf logra la estática (escribe los resultados de la representación en un archivo local para obtener páginas estáticas y almacenarlas en el servidor Nginx)
4.1 Tres conceptos en Thymeleaf
4.2 Cuándo llama la interfaz del controlador al servicio estático
4.3 Configuración de Nginx: Modifique la configuración de nginx para que escuche las solicitudes de productos y apunte a la página estática local. Si no se encuentra localmente, revertirá el proxy al servidor real.
PD: Principio: El código que genera html no puede afectar las solicitudes de los usuarios, por lo que aquí usamos adicionales Los subprocesos se crean de forma asincrónica.
Escríbalos y hágalo todo de una vez, y el problema de la página estática está bien.

4.1 Conocimientos básicos de la estática de páginas

4.1.1 Por qué utilizar estática

Proceso general: El motor de plantillas Thymeleaf representa la página de inicio y luego la devuelve al navegador. En segundo plano, se requiere una gran cantidad de consultas de datos y luego se representa la página HTML .
Problemas: primero, una gran cantidad de consultas de datos en segundo plano ejercen presión sobre la base de datos; segundo, la respuesta es lenta, el tiempo de respuesta de la solicitud es demasiado largo y la capacidad de concurrencia no es alta .
Opción 1: tecnología de caché, como Redis. Sin embargo, Redis es adecuado para situaciones en las que el tamaño de los datos es relativamente pequeño. Si la cantidad de datos es relativamente grande, como nuestra página de detalles del producto. Si cada página tiene 10 kb y 1 millón de productos, son 10 GB, lo que ocupa mucha memoria. En este momento, ejerce una gran presión sobre el sistema de caché. Si el caché falla, la siguiente mala suerte es la base de datos.

4.1.2 ¿Qué es estático? ¿El principio de estática?

Definición: Convierta la página HTML generada dinámicamente en contenido estático y guárdelo en el servidor Nginx. Después de que llegue la solicitud del usuario, se accederá directamente a la página estática sin que el servicio la preste.
Resumen: las páginas HTML estáticas se pueden implementar en nginx, lo que mejora en gran medida la concurrencia y reduce la presión de Tomcat.
Razón 1: el servidor web y el servidor de aplicaciones web tienen
las ventajas de una gran concurrencia, pero la desventaja es que solo pueden manejar recursos estáticos. Nginx tiene una concurrencia de 50.000 pero solo puede manejar páginas estáticas
. La desventaja de los servidores de aplicaciones web es que la concurrencia es pequeña y la ventaja es que puede manejar dinámicas. Página, el volumen simultáneo de Tomcat es 200, pero puede manejar páginas dinámicas.
Razón 2: Nginx y Redis:
páginas estáticas, se accede con frecuencia a la página de detalles del producto, la cantidad de datos es grande y contiene varias imágenes, simplemente convierta todo el html de la página de detalles del producto en estático La página se almacena en Nginx, y se tomará directamente de Nginx la próxima vez (redis solo puede almacenar datos de puntos de acceso con alta frecuencia de acceso, pares clave-valor clave-valor, no páginas)
ps: Page static es almacenar estáticamente toda la página html Para Nginx, no un poco de almacenamiento de datos e imágenes

4.1.3 Cómo lograr la estática

Primero, las páginas estáticas son generadas por el motor de plantillas, y
segundo, las páginas estáticas generadas se guardan en el servidor nginx para su implementación.
Frase de resumen: motor de la plantilla tendrá toda la página HTML para generar páginas estáticas , servidor nginx generará una página estática almacenada y cuando sea necesario.

Motores de plantilla de uso común como: Freemarker, Velocity, Thymeleaf
Para Thymeleaf, usamos Thymeleaf antes para devolver html al usuario. Thymeleaf no solo puede escribir el resultado de la representación en la Respuesta, sino que también puede escribirlo en un archivo local para lograr estática.
Resumen de una oración: Thymeleaf puede escribir el resultado de la representación en Response y devolverlo al front-end; también puede escribir el resultado de la representación en un archivo local para obtener una página estática y almacenarla en el servidor Nginx para lograr la estática.

4.2 Thymeleaf realiza la estática (escribe los resultados de la representación en un archivo local para que la página estática se almacene en el servidor Nginx)

4.2.1 Varios conceptos en Thymeleaf

Permítanme hablar sobre algunos conceptos en Thymeleaf:
Contexto: Ejecutar contexto
TemplateResolver: Resolución de
plantillas TemplateEngine: Motor de plantillas

Contexto
definición : contexto, se utiliza para guardar los datos del modelo, ¿cuál es el uso de los datos del modelo guardadas? Cuando el motor de plantillas TemplateEngine renderiza, puede obtener datos del contexto para renderizar.
Usado en combinación con SpringBoot : cuando se usa en combinación con SpringBoot, los datos colocados en el Modelo se procesarán automáticamente en el Contexto y se usarán como datos para la representación de la plantilla.

Definición de TemplateResolver : resolución de plantilla, que se utiliza para leer la configuración relacionada con la plantilla, como: información de ubicación de almacenamiento de la plantilla, nombre de archivo de plantilla, tipo de archivo de plantilla, etc.
Utilizado junto con SpringBoot : cuando se combina con SpringBoot, TemplateResolver ha sido creado por él, y varias configuraciones también tienen valores predeterminados, como la ubicación de almacenamiento de plantillas. El valor predeterminado es templates. Por ejemplo, el tipo de archivo de plantilla, su valor predeterminado es html.

Definición de TemplateEngine (Thymeleaf es un motor de plantillas) : motor de plantillas, el motor utilizado para analizar plantillas, requiere contexto y analizador de plantillas. Obtenga los datos necesarios en la plantilla (es decir, archivo de plantilla) del contexto y del solucionador de plantillas TemplateResolver. Luego, use las reglas gramaticales integradas para analizar y generar el archivo analizado. Echemos un vistazo a la función de procesamiento del motor de plantillas:
templateEngine.process ("nombre de plantilla", contexto, escritor);
tres parámetros:
(1) nombre de plantilla
(2) objeto de contexto: contiene datos del modelo //
(3) escritor: El flujo del destino de salida // La función de este parámetro: al generar, podemos especificar el destino de la salida, si el destino es el flujo de Respuesta, es la respuesta de la red. Si el destino es un archivo local, será estático.
ps: El motor de plantillas se ha configurado automáticamente en SpringBoot. ¡Cambiamos estáticamente el destino de salida a un archivo local!

4.2.2 cuándo llamar al servicio de página estática

Primero, el controlador llama al servicio de página estática.
Hemos escrito el servicio que crea los archivos estáticos. Luego, la pregunta es: cuándo llamarlo.
Piense en este escenario:
si la mayoría de los productos tienen páginas estáticas. Entonces, la solicitud del usuario será interceptada por nginx y no llegará a nuestro leyou-goods-webservicio en absoluto. Aquí solo pueden llegar aquellas solicitudes que no tengan página.
Por tanto, si la solicitud llega aquí, además de volver a la vista de página, también deberíamos crear una página estática, para no volver a molestarnos la próxima vez.

En segundo lugar, la configuración de Nginx : modifique la configuración de nginx para permitirle monitorear las solicitudes de productos y apuntar a la página estática local. Si no se encuentra localmente, invertirá el proxy al servidor real.

Nota: El código que genera html no puede afectar las solicitudes de los usuarios, por lo que aquí usamos subprocesos adicionales para la creación asincrónica.

V. Resumen

Página estática (práctica del proyecto: página de detalles del producto, página estática), completada.

¡Codifique todos los días, progrese todos los días! ! !