Day410&411.商品系统首页 -谷粒商城

二、商城系统首页

不使用前后端分离开发了,管理后台用vue nginx发给网关集群,网关再路由到微服务

静态资源放到nginx中

Day410&411.商品系统首页 -谷粒商城_第1张图片

  • 依赖

导入thymeleaf依赖、热部署依赖devtools使页面实时生效

achangmall-product/pom.xml

<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-devtoolsartifactId>
    <optional>trueoptional>
dependency>
<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

html\首页资源\index放到achangmall-product下的static文件夹

把index.html放到templates中

Day410&411.商品系统首页 -谷粒商城_第2张图片

  • 关闭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】

Day410&411.商品系统首页 -谷粒商城_第3张图片

  • 渲染一级分类菜单 刚导入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名称空间

Day410&411.商品系统首页 -谷粒商城_第4张图片

xmlns:th="http://www.thymeleaf.org"
  • 因为我们上面引用了热部署的pom

更新页面后,在当前页面按Ctrl+Shift+F9,进行刷新热部署页面

Day410&411.商品系统首页 -谷粒商城_第5张图片

  • 页面遍历菜单数据
<li th:each="category : ${categorys}">
    <a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}"><b th:text="${category.name}">家用电器111b>a>
li>

Day410&411.商品系统首页 -谷粒商城_第6张图片

  • 渲染三级分类菜单

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配置文件

Day410&411.商品系统首页 -谷粒商城_第7张图片

  • 新增本地DNS映射

C:\Windows\System32\drivers\etc\hosts

192.168.109.101 achangmall.com

测试访问之前的9200端口

Day410&411.商品系统首页 -谷粒商城_第8张图片

  • nginx配置文件

Day410&411.商品系统首页 -谷粒商城_第9张图片

	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/

Day410&411.商品系统首页 -谷粒商城_第10张图片


2、Nginx+网关

Day410&411.商品系统首页 -谷粒商城_第11张图片

  • 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/

Day410&411.商品系统首页 -谷粒商城_第12张图片

nginx转发会丢失掉host中的信息

  • 设置nginx在转发的时候保留host信息

Day410&411.商品系统首页 -谷粒商城_第13张图片

proxy_set_header Host $host;
  • 再次测试访问,http://achangmall.com,测试成功

Day410&411.商品系统首页 -谷粒商城_第14张图片

  • 将nginx路由的网关配置放置在yaml配置最后

Day410&411.商品系统首页 -谷粒商城_第15张图片

  • 最终转发流程

Day410&411.商品系统首页 -谷粒商城_第16张图片


3、 压力测试

  • Jmeter下载:https://jmeter.apache.org/download_jmeter.cgi

创建测试计划,添加线程组

线程数==用户

ramp-up 多长时间内发送完

Day410&411.商品系统首页 -谷粒商城_第17张图片

添加-取样器-HTTP请求

添加-监听器-查看结果树

添加-监听器-汇总报告

  • 优化

SQL耗时越小越好,一般情况下微秒级别

命中率越高越好,一般情况下不能低于95%

锁等待次数越低越好,等待时间越短越好

中间件越多,性能损失越大,大多都损失在网络交互

Day410&411.商品系统首页 -谷粒商城_第18张图片


4、Nginx动静分离

由于动态资源和静态资源目前都处于服务端,所以为了减轻服务器压力,我们将 js、css、img等静态资源放置在Nginx端,以减轻服务器压力

Day410&411.商品系统首页 -谷粒商城_第19张图片

  • 项目静态资源搬家

静态文件上传到 mydata/nginx/html/static/index/css,这种格式

mkdir static

Day410&411.商品系统首页 -谷粒商城_第20张图片

修改index.html的静态资源路径,加上static前缀src="/static/index/img/img_09.png"

Day410&411.商品系统首页 -谷粒商城_第21张图片

Day410&411.商品系统首页 -谷粒商城_第22张图片

Day410&411.商品系统首页 -谷粒商城_第23张图片

等等等,给index.html页面中的路径都加上/static/

修改/mydata/nginx/conf/conf.d/gulimall.conf

如果遇到有/static为前缀的请求,转发至html文件夹

 location /static/ {
     
     root   /usr/share/nginx/html;
 }

Day410&411.商品系统首页 -谷粒商城_第24张图片

再次测试访问achangmall.com,成功将静态资源由nginx返回

Day410&411.商品系统首页 -谷粒商城_第25张图片


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().eq("parent_cid", v.getCatId()));
}

你可能感兴趣的