Day410&411.商品系统首页 -谷粒商城
Posted 阿昌喜欢吃黄桃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Day410&411.商品系统首页 -谷粒商城相关的知识，希望对你有一定的参考价值。
二、商城系统首页
不使用前后端分离开发了，管理后台用vue nginx发给网关集群，网关再路由到微服务
静态资源放到nginx中
- 依赖
导入thymeleaf依赖、热部署依赖devtools使页面实时生效
achangmall-product/pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
html\\首页资源\\index放到achangmall-product下的static文件夹
把index.html放到templates中
- 关闭thymeleaf缓存，方便开发实时看到更新
thymeleaf:
cache: false
suffix: .html
prefix: classpath:/templates/
- web开发放到web包下，原来的controller是前后分离对接手机等访问的，所以可以改成app，对接app应用
com.achang.achangmall.product.web【存放专门用于页面跳转的controller】
com.achang.achangmall.product.app【存放前后端奶粉里的rest风格接口controller】
- 渲染一级分类菜单 刚导入index.html时，里面的分类菜单都是写死的，我们要访问数据库拿到放到model中，然后在页面foreach填入
@Controller
public class IndexController {
@Autowired
private CategoryService categoryService;
//进入商品首页
@GetMapping({"/","/index.html"})
public String indexPage(Model model){
//查出一级分类
List<CategoryEntity> categoryEntityList = categoryService.getLevel1Categorys();
//放入域中
model.addAttribute("categorys",categoryEntityList);
return "index";
}
}
@Override
public List<CategoryEntity> getLevel1Categorys() {
//查询一级分类
return baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("cat_level",1));
}
- 页面引入thymeleft名称空间
xmlns:th="http://www.thymeleaf.org"
- 因为我们上面引用了热部署的pom
更新页面后，在当前页面按Ctrl+Shift+F9，进行刷新热部署页面
- 页面遍历菜单数据
<li th:each="category : ${categorys}">
<a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}"><b th:text="${category.name}">家用电器111</b></a>
</li>
- 渲染三级分类菜单
com.achang.achangmall.product.vo.Catelog2Vo
//二级分类vo
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Catelog2Vo {
private String catalog1Id; //一级父分类id
private List<Catelog3Vo> catalog3List; //三级子分类
private String id;//二级分类id
private String name;
//三级分类vo 静态内部类
@NoArgsConstructor
@AllArgsConstructor
@Data
public static class Catelog3Vo{
private String catalog2Id;//二级分类id
private String id;//三级分类id
private String name;
}
}
com.achang.achangmall.product.web.IndexController
//index/catalog.json
@ResponseBody
@GetMapping("/index/catalog.json")
public Map<Long, List<Catelog2Vo>> getCatalogJson(){
Map<Long, List<Catelog2Vo>> resultMap = categoryService.getCatelogJson();
return resultMap;
}
com.achang.achangmall.product.service.impl.CategoryServiceImpl
@Override
public Map<Long, List<Catelog2Vo>> getCatelogJson() {
//查出所有分类
List<CategoryEntity> level1Categorys = getLevel1Categorys();
//分装数据
Map<Long, List<Catelog2Vo>> resultMap = level1Categorys.stream().collect(Collectors.toMap(CategoryEntity::getCatId, v -> {
//每一个的一级分类，查到这个一级分类的二级分类
List<CategoryEntity> list = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", v.getCatId()));
List<Catelog2Vo> catelog2VoList = null;
if (!StringUtils.isEmpty(list)) {
catelog2VoList = list.stream().map(item -> {
Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, item.getCatId().toString(), item.getName());
//封装二级分类的三级分类
List<CategoryEntity> entityList = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", item.getCatId()));
if (!StringUtils.isEmpty(entityList)){
List<Catelog2Vo.Catelog3Vo> catelog3Vos = entityList.stream().map(m -> {
Catelog2Vo.Catelog3Vo catelog3Vo = new Catelog2Vo.Catelog3Vo(item.getCatId().toString(),m.getCatId().toString(),m.getName());
return catelog3Vo;
}).collect(Collectors.toList());
catelog2Vo.setCatalog3List(catelog3Vos);
}
return catelog2Vo;
}).collect(Collectors.toList());
return catelog2VoList;
}
return catelog2VoList;
}));
return resultMap;
}
1、Nginx配置文件
- 新增本地DNS映射
C:\\Windows\\System32\\drivers\\etc\\hosts
192.168.109.101 achangmall.com
测试访问之前的9200端口
- nginx配置文件
server {
listen 80;
server_name achangmall.com;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
#又转回到本机
proxy_pass http://192.168.153.1:10000;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the php scripts to Apache listening on 127.0.0.1:80
#
#location ~ \\.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \\.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\\.ht {
# deny all;
#}
}
- 测试访问http://achangmall.com/
2、Nginx+网关
- nginx配置
upstream achangmall{
server 192.168.153.1:88;
}
location / {
#又转回到本机
# proxy_pass http://192.168.153.1:10000;
proxy_pass http://achangmall;
}
- 但是我们测试访问http://achangmall.com/
nginx转发会丢失掉host中的信息
- 设置nginx在转发的时候
保留host信息
proxy_set_header Host $host;
- 再次测试访问，http://achangmall.com，测试成功
- 将nginx路由的网关配置放置在yaml配置最后
- 最终转发流程
3、 压力测试
- Jmeter下载：https://jmeter.apache.org/download_jmeter.cgi
创建测试计划，添加线程组
线程数==用户
ramp-up 多长时间内发送完
添加-取样器-HTTP请求
添加-监听器-查看结果树
添加-监听器-汇总报告
- 优化
SQL耗时越小越好，一般情况下微秒级别
命中率越高越好，一般情况下不能低于95%
锁等待次数越低越好，等待时间越短越好
中间件越多，性能损失越大，大多都损失在网络交互
4、Nginx动静分离
由于动态资源和静态资源目前都处于服务端，所以为了减轻服务器压力，我们将 js、css、img等静态资源放置在Nginx端，以减轻服务器压力
- 项目
静态资源搬家
静态文件上传到 mydata/nginx/html/static/index/css，这种格式
mkdir static
修改index.html的静态资源路径，加上static前缀src="/static/index/img/img_09.png"
等等等，给index.html页面中的路径都加上/static/
修改/mydata/nginx/conf/conf.d/gulimall.conf
如果遇到有/static为前缀的请求，转发至html文件夹
location /static/ {
root /usr/share/nginx/html;
}
再次测试访问achangmall.com，成功将静态资源由nginx返回
5、优化三级分类查询
之前是循环查询数据库，导致有多少跟数据库进行io交互；
这里我们减少数据库的交互，一次性查询所有的数据，减少io资源消耗
com.achang.achangmall.product.service.impl.CategoryServiceImpl
@Override
public Map<Long, List<Catelog2Vo>> getCatelogJson() {
//将数据库的多次交互，转为一次，一次性查询所有数据
List<CategoryEntity> allList = baseMapper.selectList(null);
//查出所有分类
List<CategoryEntity> level1Categorys = getParent_cid(allList,0L);
//分装数据
Map<Long, List<Catelog2Vo>> resultMap = level1Categorys.stream().collect(Collectors.toMap(CategoryEntity::getCatId, v -> {
//每一个的一级分类，查到这个一级分类的二级分类
List<CategoryEntity> list = getParent_cid(allList,v.getCatId());
List<Catelog2Vo> catelog2VoList = null;
if (!StringUtils.isEmpty(list)) {
catelog2VoList = list.stream().map(item -> {
Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, item.getCatId().toString(), item.getName());
//封装二级分类的三级分类
List<CategoryEntity> entityList = getParent_cid(allList,item.getCatId());
if (!StringUtils.isEmpty(entityList)){
List<Catelog2Vo.Catelog3Vo> catelog3Vos = entityList.stream().map(m -> {
Catelog2Vo.Catelog3Vo catelog3Vo = new Catelog2Vo.Catelog3Vo(item.getCatId().toString(),m.getCatId().toString(),m.getName());
return catelog3Vo;
}).collect(Collectors.toList());
catelog2Vo.setCatalog3List(catelog3Vos);
}
return catelog2Vo;
}).collect(Collectors.toList());
return catelog2VoList;
}
return catelog2VoList;
}));
return resultMap;
}
private List<CategoryEntity> getParent_cid(List<CategoryEntity> allList,Long parent_cid) {
List<CategoryEntity> collect = allList.stream().filter(item -> {
return item.getParentCid().equals(parent_cid);
}).collect(Collectors.toList());
return collect;
// return baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", v.getCatId()));
}
以上是关于Day410&411.商品系统首页 -谷粒商城的主要内容，如果未能解决你的问题，请参考以下文章