Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序

.Ptable-item dt {

width: 160px;

float: left;

text-align: right;

padding-right: 5px;

}

.Ptable-item dd {

margin-left: 210px;

}

dd {

display: block;

-webkit-margin-start: 40px;

}

.package-list {

padding: 12px 0;

line-height: 220%;

color: #999;

font-size: 12px;

margin-top: -1px;

}

.package-list h3 {

width: 130px;

text-align: right;

}

.package-list p {

margin-left: 155px;

padding-right: 50px;

}

    • 手机

    • Apple

    • Apple iPhone 6s
      • Apple iPhone 6s 4GB 128GB 土豪金
        价  格

        ¥降价通知

        累计评价 612188

        促  销

        加价购

        满999.00另加20.00元,或满1999.00另加30.00元,或满2999.00另加40.00元,即可在购物车换

        购热销商品

        支  持

        以旧换新,闲置手机回收 4G套餐超值抢 礼品购

        配 送 至

        上海

        {{o}} 

        <input autocomplete=“off” type=“text” disabled v-model=“num” minnum=“1”

        class=“itxt”/>

        <a href=“javascript:void(0)” class=“increment plus” @click=“increment”>+

        <a href=“javascript:void(0)” class=“increment mins” @click=“decrement”>-

        • <a href=“#” @click.prevent=“addCart” target=“_blank”

          class=“sui-btn btn-danger addshopcar”>加入购物车

        • 相关分类

        • 推荐品牌

          • 手机
          • 手机壳
          • 内存卡
          • Iphone配件
          • 贴膜
          • 手机耳机
          • 移动电源
          • 平板电脑
            • Apple苹果iPhone 6s (A1699)

              ¥

              6088.00

              加入购物车

            • Apple苹果iPhone 6s (A1699)

              ¥

              6088.00

              加入购物车

            • Apple苹果iPhone 6s (A1699)

              ¥

              6088.00

              加入购物车

              Apple苹果iPhone 6s (A1699)

              ¥

              6088.00

              加入购物车

              Apple苹果iPhone 6s (A1699)

              ¥

              6088.00

              加入购物车

              推荐品牌

              选择搭配

              ¥5299

              +

              • Feless费勒斯VR

                39

              • Feless费勒斯VR

                50

              • Feless费勒斯VR

                59

              • Feless费勒斯VR

                99

                已选购0件商品
                套餐价
                ¥5299

                加入购物车

              • 商品介绍

              • 规格与包装

              • 售后保障

              • 商品评价

              • 手机社区

                • 分辨率:1920*1080(FHD)
                • 后置摄像头:1200万像素
                • 前置摄像头:500万像素
                • 核 数:其他
                • 频 率:以官网信息为准
                • 品牌: Apple
                • 商品名称:APPLEiPhone 6s Plus
                • 商品编号:1861098
                • 商品毛重:0.51kg
                • 商品产地:中国大陆
                • 热点:指纹识别,Apple Pay,金属机身,拍照神器
                • 系统:苹果(IOS)
                • 像素:1000-1600万
                • 机身内存:64GB
                • 包装清单

                  手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C

                  数字耳机X1、Type-C 数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1(备注:最终以实物为准)

                  售后保障

                  商品评价

                  手机社区

                  猜你喜欢
                  • DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

                    ¥

                    3699.00

                    已有6人评价

                  • Apple苹果iPhone 6s/6s Plus 16G 64G 128G

                    ¥

                    4388.00

                    已有700人评价

                  • DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

                    ¥

                    4088.00

                    已有700人评价

                  • DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

                    ¥

                    4088.00

                    已有700人评价

                  • DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

                    ¥

                    4088.00

                    已有700人评价

                  • DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本

                    ¥

                    4088.00

                    已有700人评价

                    4、删除刚刚创建的一些测试内容

                    在这里插入图片描述

                    4、在resources下创建配置文件application.yml

                    在这里插入图片描述

                    在这里插入图片描述

                    server:

                    port: 8086

                    spring:

                    application:

                    name: page-service

                    thymeleaf:

                    cache: false #设置缓存关闭

                    eureka:

                    client:

                    service-url:

                    defaultZone: http://127.0.0.1:10086/eureka

                    instance:

                    lease-renewal-interval-in-seconds: 5 # 每隔5秒发送一次心跳

                    lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期

                    5、nginx反向代理

                    在这里插入图片描述

                    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 {

                    proxy_pass http://192.168.58.2:8086; #主机地址 下的8086端口

                    proxy_connect_timeout 600;

                    proxy_read_timeout 600;

                    }

                    location / {

                    proxy_pass http://192.168.58.2:9002; #主机地址 下的9001端口

                    proxy_connect_timeout 600;

                    proxy_read_timeout 600;

                    }

                    }

                    重新加载nginx

                    在这里插入图片描述

                    6、完善启动类

                    在这里插入图片描述

                    package com.leyou;

                    import org.springframework.boot.SpringApplication;

                    import org.springframework.boot.autoconfigure.SpringBootApplication;

                    import org.springframework.cloud.client.discovery.EnableDiscoveryClient;

                    import org.springframework.cloud.openfeign.EnableFeignClients;

                    @SpringBootApplication

                    @EnableDiscoveryClient

                    @EnableFeignClients

                    public class LyPageApplication {

                    public static void main(String[] args) {

                    SpringApplication.run(LyPageApplication.class);

                    }

                    }

                    6、完善search.html页面实现对应点击商品查看详情功能

                    在这里插入图片描述

                    7、创建PageController

                    在这里插入图片描述

                    在这里插入图片描述

                    package com.leyou.page.web;

                    import org.springframework.stereotype.Controller;

                    import org.springframework.ui.Model;

                    import org.springframework.ui.ModelMap;

                    import org.springframework.web.bind.annotation.GetMapping;

                    import org.springframework.web.bind.annotation.PathVariable;

                    @Controller

                    public class PageController {

                    @GetMapping(“item/{id}.html”)

                    public String toItemPage(@PathVariable(“id”) Long spuId, Model model){

                    //准备模型数据

                    //返回视图

                    return “/item”;

                    }

                    }

                    重新运行

                    在这里插入图片描述

                    点击实现页面跳转

                    在这里插入图片描述

                    在这里插入图片描述

                    8、封装模型数据

                    首先我们一起来分析一下,在这个页面中需要哪些数据

                    我们已知的条件是传递来的spu的id,我们需要根据spu的id查询到下面的数据:

                    • spu信息

                    • spu的详情

                    • spu下的所有sku

                    • 品牌

                    • 商品三级分类

                    • 商品规格参数、规格参数组

                    (1)商品微服务提供接口
                    1)查询spu,根据页面id查询对应的sup的信息
                    a、完善GoodsApi

                    在这里插入图片描述

                    /*

                    根据spu的id查询spu

                    */

                    @GetMapping(“/spu/{id}”)

                    Spu querySpuById(@PathVariable(“id”) Long id);

                    b、完善GoodsController

                    在这里插入图片描述

                    /*

                    根据spu的id查询spu

                    */

                    @GetMapping(“/spu/{id}”)

                    public ResponseEntity querySpuById(@PathVariable(“id”) Long id){

                    return ResponseEntity.ok(goodsService.querySpuById(id));

                    }

                    c、完善goodsService

                    在这里插入图片描述

                    在这里插入图片描述

                    public Spu querySpuById(Long id) {

                    Spu spu = spuMapper.selectByPrimaryKey(id);

                    if(spu == null){

                    throw new LyException(ExceptionEnum.GOODS_NOT_FOND);

                    }

                    //查询sku

                    List skus = querySkuBySpuId(spu.getId());

                    //查询详情detail

                    SpuDetail spuDetail = queryDetailById(spu.getId());

                    spu.setSkus(skus);

                    spu.setSpuDetail(spuDetail);

                    return spu;

                    }

                    2)查询规格参数组

                    在这里插入图片描述

                    a、拓展SpecGroup

                    在这里插入图片描述

                    package com.leyou.item.pojo;

                    import lombok.Data;

                    import tk.mybatis.mapper.annotation.KeySql;

                    import javax.persistence.Id;

                    import javax.persistence.Table;

                    import javax.persistence.Transient;

                    import java.util.List;

                    @Table(name = “tb_spec_group”)

                    @Data

                    public class SpecGroup {

                    @Id

                    @KeySql(useGeneratedKeys = true)

                    private Long id;

                    private Long cid;

                    private String name;

                    @Transient

                    private List params;

                    }

                    b、完善SpecificationApi

                    在这里插入图片描述

                    @GetMapping(“spec/group”)

                    List queryGroupByCid(@RequestParam(“cid”) Long cid);

                    c、完善SpecificationController,这里的方法名可以与api当中的方法名不一致,因为调用是通过路径去调用的

                    在这里插入图片描述

                    /*

                    根据父类查询规格组以及组内参数

                    */

                    @GetMapping(“group”)

                    public ResponseEntity<List> queryListByCid(@RequestParam(“cid”) Long cid){

                    return ResponseEntity.ok(specificationService.queryListByCid(cid));

                    }

                    d、完善specificationService

                    在这里插入图片描述

                    在这里插入图片描述

                    public List queryListByCid(Long cid) {

                    //查询规格参数组

                    List specGroups = queryGroupByCid(cid);

                    //查询当前分类下的参数

                    List specParams = queryParamList(null, cid, null);

                    /*

                    下拉代码的目的是将specParams集合放入specGroups当中,一一对应

                    如果通过双层for循环性能太低

                    在specParams集合当中的SpecParam对应拥有SpecGroup的id

                    所以将SpecParam对应拥有SpecGroup的id作为键而 List做为值组合为map集合

                    遍历specGroups集合获取其specGroup的id到map当中查询到对应的specParams集合,然后放入到specGroup.setParams当中

                    */

                    //先把规格参数变为map,map的key是规格组id,map的值是组下的所有参数

                    Map<Long,List> map = new HashMap<>();

                    for (SpecParam param : specParams) {

                    if(!map.containsKey(param.getGroupId())){//判断map当中是否已经存在param.getGroupId(),如果存在

                    //这一组id在map当中不存在

                    //新增一个list

                    map.put(param.getGroupId(),new ArrayList<>());

                    }

                    map.get(param.getGroupId()).add(param);//将集合添加到map当中

                    }

                    //填充param到Group当中

                    for (SpecGroup specGroup : specGroups) {

                    specGroup.setParams(map.get(specGroup.getId()));

                    }

                    return specGroups;

                    }

                    (2)实现页面数据的封装
                    1)在ly-page创建对应的包结构,复制之前在ly-search创建的client

                    在这里插入图片描述

                    在这里插入图片描述

                    2)分析页面所需要的数据

                    在这里插入图片描述

                    在这里插入图片描述

                    3)创建对应的Service

                    在这里插入图片描述

                    在这里插入图片描述

                    package com.leyou.page.service;

                    import org.springframework.stereotype.Service;

                    @Service

                    public class PageService {

                    }

                    4)将上述对应的数据在添加到PageController的Model当中
                    a、完善PageController

                    在这里插入图片描述

                    package com.leyou.page.web;

                    import com.leyou.page.service.PageService;

                    import org.springframework.beans.factory.annotation.Autowired;

                    import org.springframework.stereotype.Controller;

                    import org.springframework.ui.Model;

                    import org.springframework.ui.ModelMap;

                    import org.springframework.web.bind.annotation.GetMapping;

                    import org.springframework.web.bind.annotation.PathVariable;

                    import org.springframework.web.bind.annotation.RequestMapping;

                    import java.util.Map;

                    @Controller

                    @RequestMapping(“item”)

                    public class PageController {

                    @Autowired

                    private PageService pageService;

                    @GetMapping(“{id}.html”)

                    public String toItemPage(@PathVariable(“id”) Long spuId, Model model){

                    //查询数据

                    Map<String,Object> attributes = pageService.loadModel(spuId);

                    //准备模型数据

                    model.addAllAttributes(attributes);

                    //返回视图

                    return “item”;

                    }

                    }

                    b、完善service

                    在这里插入图片描述

                    在这里插入图片描述

                    package com.leyou.page.service;

                    import com.leyou.item.pojo.*;

                    import com.leyou.page.client.BrandClient;

                    import com.leyou.page.client.CategoryClient;

                    import com.leyou.page.client.GoodsClient;

                    import com.leyou.page.client.SpecificationClient;

                    import org.springframework.beans.factory.annotation.Autowired;

                    import org.springframework.stereotype.Service;

                    import java.util.*;

                    @Service

                    public class PageService {

                    @Autowired

                    private BrandClient brandClient;

                    @Autowired

                    private CategoryClient categoryClient;

                    @Autowired

                    private GoodsClient goodsClient;

                    @Autowired

                    private SpecificationClient specificationClient;

                    public Map<String, Object> loadModel(Long spuId) {

                    Map<String, Object> model = new HashMap<>();

                    //查询spu

                    Spu spu = goodsClient.querySpuById(spuId);

                    //查询skus

                    List skus = spu.getSkus();

                    //查询spuDetail

                    SpuDetail spuDetail = spu.getSpuDetail();

                    //查询brand

                    Brand brand = brandClient.queryBrandById(spu.getBrandId());

                    //查询商品的分类

                    List categories = categoryClient.queryCategoryByIds(Arrays.asList(spu.getCid1(), spu.getCid2(), spu.getCid3()));

                    //查询规格参数

                    List groups = specificationClient.queryGroupByCid(spu.getCid3());

                    // 查询特殊的规格参数

                    List params = specificationClient.queryParamList(null, spu.getCid3(), false);

                    Map<Long, String> paramMap = new HashMap<>();

                    params.forEach(param -> {

                    paramMap.put(param.getId(), param.getName());

                    });

                    model.put(“spu”,spu);

                    model.put(“skus”,skus);

                    model.put(“spuDetail”,spuDetail);

                    model.put(“detail”,spuDetail);

                    model.put(“brand”,brand);

                    model.put(“categories”,categories);

                    model.put(“groups”,groups);

                    model.put(“specs”,groups);

                    model.put(“paramMap”,paramMap);

                    return model;

                    }

                    }

                    在这里插入图片描述

                    在这里插入图片描述

                    在这里插入图片描述

                    在这里插入图片描述

                    三、页面静态化


                    1、简介

                    (1)问题分析

                    现在,我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端。在后台需要大量的数据查询,而后渲染得到HTML页面。会对数据库造成压力,并且请求的响应时间过长,并发能力不高。

                    大家能想到什么办法来解决这个问题?

                    首先我们能想到的就是缓存技术,比如之前学习过的Redis。不过Redis适合数据规模比较小的情况。假如数据量比较大,例如我们的商品详情页。每个页面如果10kb,100万商品,就是10GB空间,对内存占用比较大。此时就给缓存系统带来极大压力,如果缓存崩溃,接下来倒霉的就是数据库了。

                    文末

                    js前端的重头戏,值得花大部分时间学习。

                    JavaScript知识

                    推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。

                    前端电子书

                    另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。

                    学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。

                    面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。

                    这是288页的前端面试题

                    288页面试题

                  • 5
                    点赞
                  • 9
                    收藏
                    觉得还不错? 一键收藏
                  • 1
                    评论
                  评论 1
                  添加红包

                  请填写红包祝福语或标题

                  红包个数最小为10个

                  红包金额最低5元

                  当前余额3.43前往充值 >
                  需支付:10.00
                  成就一亿技术人!
                  领取后你会自动成为博主和红包主的粉丝 规则
                  hope_wisdom
                  发出的红包
                  实付
                  使用余额支付
                  点击重新获取
                  扫码支付
                  钱包余额 0

                  抵扣说明:

                  1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
                  2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

                  余额充值