尚品汇总结三:商城首页(面试专用)

目录

         首页商品分类实现

1、封装数据接口

2、页面静态化:

什么是页面静态化

为什么要使用静态化


首页商品分类实现

前面做了商品详情,我们现在来做首页分类,我先看看京东的首页分类效果,我们如何实现类似效果:

思路:

  1. 首页属于并发量比较高的访问页面,我看可以采取页面静态化方式实现,或者把数据放在缓存中实现
  2. 我们把生产的静态文件可以放在nginx访问或者放在web-index模块访问

1、封装数据接口

由于商品分类信息在service-product模块,我们在该模块封装数据,数据结构为父子层级,商品分类保存在base_category1、base_category2和base_category3表中,由于需要静态化页面,我们需要一次性加载所有数据,前面我们使用了一个视图base_category_view,所有我从视图里面获取数据,然后封装为父子层级

数据结构如下:

[{"index": 1,"categoryChild": [{"categoryChild": [{"categoryName": "电子书","categoryId": 1},{"categoryName": "网络原创","categoryId": 2},...],"categoryName": "电子书刊","categoryId": 1},...],"categoryName": "图书、音像、电子书刊","categoryId": 1},...]

2、页面静态化:

什么是页面静态化

  • 将动态页面转化成静态的html,降低与数据库的交互次数,提高页面的访问速度
  • 就是服务器在请求来之前把已经固定好的东西先编译好了,等请求来了再动态的填数据,不要等请求来了什么都没做忙得半死
  • 利用第三方提供的模板引擎,生成对应的html
  • 常用的页面静态化技术有thymeleaf、freemarker

为什么要使用静态化

  • 网页静态化技术和缓存技术的共同点都是为了减轻数据库的访问压力
  • 而网页静态化比较适合大规模且相对变化不太频繁的数据。
  • 将网页以纯静态化的形式展现,就可以使用Nginx这样的高性能的web服务器来部署
  • Nginx可以承载5万的并发,而Tomcat只有几百

首页并发怎么解决:

      使用静态化页面,原本需要从后台接口获取数据,静态化就是把数据在页面写死了,后期访问的时候,不需要调用后台接口了,减轻了 后台压力,并且可以使用nginx部署,单太nginx就能抗住几万并发,nginx还可以做集群.

静态化:适合 数据不经常改变的页面,以天为单位的改变 是可以接受的,几分钟 或者 1小时改变一次的 就不建议做静态化了.但是首页 基本上最短都是以天为单位变化.

实现代码:

package com.atguigu.gmall.all.controller;@Controller@RequestMappingpublic class IndexController {@Autowiredprivate ProductFeignClient productFeignClient;@Autowiredprivate SpringTemplateEngine templateEngine;/*** 生成静态页面* @return* @throws IOException*/@GetMapping("/createHtml")
@ResponseBodypublic Result createHtml() throws IOException {Result result = productFeignClient.getBaseCategoryList();Context context = new Context();context.setVariable("list", result.getData());FileWriter write = new FileWriter("D:\\index.html");templateEngine.process("index/index.html", context, write);return Result.ok();}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/53756.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RTT学习笔记12-KConfig 语法学习

KConfig 语法学习 RTT 官方教程 https://www.rt-thread.org/document/site/#/development-tools/build-config-system/Kconfig 我自己写的IIC配置 menuconfig BSP_USING_I2C # I2C 菜单bool "Enable I2C BUS" # 提示I2C 菜单default n # 默认不使能I2C 菜单…

6.s081/6.1810(Fall 2022)Lab3: page tables

文章目录 前言其他篇章参考链接0. 前置环境1. Speed up system calls (easy)1.1 简单分析1.2 映射1.3 页分配1.4 页释放1.5 测试 2. Print a page table (easy)2.1 简单分析2.2 实现2.3 测试 3. Detect which pages have been accessed (hard)3.1 简单分析3.2 实现3.2.1 获取参…

《面试1v1》ElasticSearch 和 Lucene

🍅 作者简介:王哥,CSDN2022博客总榜Top100🏆、博客专家💪 🍅 技术交流:定期更新Java硬核干货,不定期送书活动 🍅 王哥多年工作总结:Java学习路线总结&#xf…

设计模式之模板方法

一、概述 定义一个操作中的算法的骨架,将一些步骤延迟到子类中。 TemplateMethod使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。 二、适用性 1.一次性实现一个算法的不变的部分,并将可变的行为留给子类来实现。 2.各子类中公共…

无涯教程-Perl - Subroutines(子例程)

定义子程序 Perl编程语言中 Subroutine子程序定义的一般形式如下: sub subroutine_name {body of the subroutine } 调用该Perl Subroutine的典型方式如下- subroutine_name( list of arguments ); 在Perl 5.0之前的版本中,调用 Subroutine的语法略有不同&…

@ControllerAdvice注解使用及原理探究 | 京东物流技术团队

最近在新项目的开发过程中,遇到了个问题,需要将一些异常的业务流程返回给前端,需要提供给前端不同的响应码,前端再在次基础上做提示语言的国际化适配。这些异常流程涉及业务层和控制层的各个地方,如果每个地方都写一些…

STM32入门学习之定时器中断

1.STM32的通用定时器是可编程预分频驱动的16位自动装载计数器。 STM32 的通用定时器可以被用于:测量输入信号的脉冲长度 ( 输入捕获 ) 或者产生输出波 形 ( 输出比较和 PWM) 等。 使用定时器预分频器和 RCC 时钟控制器预分频器,脉冲长度和波形 周…

如何下载和编译 Android 源码?

本文为洛奇看世界(guyongqiangx)原创,转载请注明出处。 文章链接:https://blog.csdn.net/guyongqiangx/article/details/132125431 网上关于如何下载 Android 源码和编译的文章很多,其中最常见的就是 Android 官方文档: 下载源代码…

socker套接字

1.打印错误信息 2.socketaddr_in结构体 结构体: (部分库代码) (宏中的##) 3.manual TCP: SOCK_STREAM : 提供有序地,可靠的,全双工的,基于连接的流式服务 UDP: 面向数据报

list交并补差集合

list交并补差集合 工具类依赖 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId><version>3.8.1</version> </dependency><dependency><groupId>commons-collections&…

刷题笔记 day7

力扣 209 长度最小的子数组 解法&#xff1a;滑动指针&#xff08;对同向双指针区间内的数据处理&#xff09; 1&#xff09;先初始化 两个指针 left &#xff0c;right。 2&#xff09;右移指针right的同时使用sum记录指针right处的值&#xff0c;并判断sum的值是否满足要求&…

uniapp封装request请求

在基础文件里面创建一个api文件 在创建两个 js文件 http.js 里面封装 request 请求 let baseUrl https://white.51.toponet.cn; //基地址 export const request (options {}) > {//异步封装接口&#xff0c;使用Promise处理异步请求return new Promise((resolve, reject…