商品详情页面静态化thymeleaf

╰+哭是因爲堅強的太久メ 2022-04-03 17:55 252阅读 0赞

每一个商品都有cid 每一个spu 都作为一个 spuId.html 静态化，以减少服务器压力和访问速率、前端转发路径如下：  
1、通过nginx 代理，代理静态化微服务端口8084以及路径 /item  
![1][]

![1][1 1]

商品详情的数据，需要封装在model 中，通过thymeleaf和vue 来动态展示在item.html 上，需要对spu 、skus 、skuDetails 、以及商品对应的specs（通用规格参数、特殊规格参数）等一系列数据进行封装；  
一般封装成map<K，V> 这样进行取值展示；

![3][]

1、创建接口client，在 item-service商品微服务中GoodsController，创建querySpuById 查询spu 的方法、item-interface微服务对外提供api接口、

/** * 通过spuid 查询 * @param id spuid * @return */
        @GetMapping("spu/{spuId}")
        public ResponseEntity<Spu> querySpuById(@PathVariable("spuId") Long id){ 
            Spu spu=this.goodsService.querySpuById(id);
            if (spu != null) { 
                return ResponseEntity.ok(spu);
            }
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        }

2、model中封装数据

/** * @auther SyntacticSugar * @data 2018/12/23 0023上午 11:26 */
    @Service
    public class GoodsService { 
        @Autowired
        private BrandClient brandClient;
        @Autowired
        private CategoryClient categoryClient;
        @Autowired
        private GoodsClient goodsClient;
        @Autowired
        private SpecClient specClient;
    
        //日志
        private static final Logger logger = LoggerFactory.getLogger(GoodsService.class);
    
        public Map<String, Object> loadModel(Long goodsId) { 
            try { 
                Map<String, Object> map = new HashMap<>();
    
                List<Sku> skus = this.goodsClient.querySkuBySpuId(goodsId);
                SpuDetail spuDetail = this.goodsClient.querySpuDetailById(goodsId);
                Spu spu = this.goodsClient.querySpuById(goodsId);
                // 对查询的goods 封装
                map.put("skus", skus);
                map.put("spuDetail", spuDetail);
                map.put("spu", spu);
                     return map;
            } catch (Exception e) { 
                // public void error(String format, Object arg1, Object arg2);
                logger.error("spuId:{}", goodsId,e);
                e.printStackTrace();
            }
            return null;
        }

@Controller
    @RequestMapping("item")
    public class GoodsController { 
    
       @Autowired
        private GoodsService goodsService;
    
        @GetMapping("{id}.html")
        public String get(Model model, @PathVariable("id") Long spuId) { 
            model.addAllAttributes(goodsService.loadModel(spuId));
            return "item";
        }
    }

在item.html中

前端页面console ,可以看到skus、spuDetail、spu 对象，在spuDetail中取值通用规范参数genericSpec，特殊规格参数specialSpec、  
![1][1 2]

通用规范参数genericSpec，特殊规格参数specialSpec、

String genericSpec = spuDetail.getGenericSpec();
                String specialSpec = spuDetail.getSpecialSpec();
                Map<Long, Object> genericMap = JsonUtils.parseMap(genericSpec, Long.class, Object.class);
                Map<Long, List<String>> specMap = JsonUtils.nativeRead(specialSpec, new TypeReference<Map<Long, List<String>>>() { 
                });
                   map.put("genericMap", genericMap);
                map.put("specMap", specMap);

![3][3 1]  
处理规格参数为 k :v 展示在页面，

// 查询特有规格参数、普通规格参数
                List<SpecParam> params = this.specClient.querySpecParam(null, spu.getCid3(), null, false);
    
                // 处理成 kv
                HashMap<Long, String> paramMap = new HashMap<>();
                params.forEach(param->{ 
                    paramMap.put(param.getId(),param.getName());
                });
         		map.put("paramMap", paramMap);

![3][3 2]

//value为每一个sku的规格参数数组
    //key 是param.getId()
    				<dl v-for="(value,key,index) in specMap " :key="index">
    								<dt>
    									<div class="fl title">
    									<i>{
       {key}}</i>
    								</div>
    								</dt>
    								<dd v-for="v in value">
    									<a href="javascript:;" class="selected">
    										{
       {v}}<span title="点击取消选择"> </span>
    									</a>
    								</dd>
    							</dl>

![1][1 3]

{
       {key}}
    更改为{
       {paramMap[key]}}

![2][]

![1][1 4]  
通过计算，计算skus的每一个sku的indexes中的index 等于值的index的话，给其赋值；

computed:{
    
    			sku(){
    				const index = Object.values(this.indexes).join("_");
    				return this.skus.find(s => s.indexes == index);
    			}
    
    		},

![4][]

![3][3 3]  
展示图片，在skus数组中的对象中有images  
计算属性中存在每一个sku 、sku中的images 是字符串，转化为数组展示。  
1、需要判断图片是否存在  
2、需要绑定选择的规格参数 和数组中图片的下标 一致，即  
![zhanshsu][]

这样就能够选择什么机身颜色，对应哪一个图片，默认选择第一张即images\[0\]；

![7][]

查询规格参数，当然这处没有什么问题，但是vue显示规格参数组specGroups:null 然后断点debug发现是有值的，放行以后值展示出来了，有时候代码没错，思路没错，刷新就不出来，就debug跟着走一走；

![2][2 1]

/** * 查规格参数组 * @param cid 分类id * @return */
        @GetMapping("/groups/{cid}")
        public ResponseEntity<List<SpecGroup>> querySpecGroups(@PathVariable("cid")Long cid){ 
            List<SpecGroup> specGroups = this.specService.querySpecGroups(cid);
            if (specGroups != null && 0!=specGroups.size()) { 
                return ResponseEntity.ok(specGroups);
            }
            return ResponseEntity.status(HttpStatus.NO_CONTENT).build();
        }

在service 中封装规格参数组数据进去  
在pojo中SpecGroup，添加业务字段 List< SpecParam>

@Table(name = "tb_spec_group")
    public class SpecGroup { 
    
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id;
    
        private Long cid;
    
        private String name;
    
        //改组下所有的规格参数
        @Transient
        private List<SpecParam> params;
        // getter setter
        }

@Service
    public class SpecService { 
    
        @Autowired
        private SpecGroupMapper specGroupMapper;
        @Autowired
        private SpecParamMapper specParamMapper;
        public List<SpecGroup> querySpecGroups(Long cid) { 
            SpecGroup specGroup = new SpecGroup();
            specGroup.setCid(cid);
            List<SpecGroup> specGroups = this.specGroupMapper.select(specGroup);
            // 把specParams参数规格设置到speGroup中
            specGroups.forEach(speGroup -> { 
                SpecParam specParam = new SpecParam();
                specParam.setGroupId(speGroup.getId());
                specParam.setCid(cid);
                speGroup.setParams(this.specParamMapper.select(specParam));
    
            });
            return specGroups;
        }
        }

const specGroups=/*[[${specGroups}]]*/{}
    	console.log(specGroups)

data中声明属性、
    specGroups

![2][2 2]  
展示在页面

<div class="intro-detail" v-html="spuDetail.description">
    		</div>

![1][1 5]

处理规格预包装、

<div class="Ptable" v-for="group in specGroups">
               <div class="Ptable-item">
                  <h3>主体</h3>
                  <dl v-for="param in group.params">
                         <dt>{
       {param.name}}</dt>
                    <dd>{
       {param.generic?genericMap[param.id]:specMap[param.id]}}</dd>
                   </dl>
                </div>
          </div>

参数组下params中对通用规格做判断，true就在通用规格参数map中取值，false就在特殊规格参数map中取值、  
![2][2 3]  
通用规格参数、  
![3][3 4]  
特有规格参数、  
![4][4 1]  
显然不合适，当展示当前sku的规格属性，在计算属性中存在sku 的特有规格参数、  
![w][]

<dd>
    {
       {param.generic?genericMap[param.id]:JSON.parse(sku.ownSpec)[param.id]}}
    </dd>

![v][]

处理组名字，使用插值表达式取出组名

<h3>{
       {group.name}}</h3>

![1][1 6]  
刷新如下：  
![6][]  
处理剩下的售后保障、商品评价等、  
![1][1 7]

[1]: /images/20220403/c091edba914c45cc889ab97968c5dcc5.png
[1 1]: /images/20220403/13233d9145454fb7b71a35c3a5f39228.png
[3]: /images/20220403/85ba46507ced4434a7fecfa59c6441bb.png
[1 2]: /images/20220403/c54354a11dbd435187cf101888bb35bb.png
[3 1]: /images/20220403/345a9738431241628e9914847f39aad3.png
[3 2]: /images/20220403/24970c94b8b24d48be39cb42ac6982f1.png
[1 3]: /images/20220403/4404fc1e7c534fb1b2635259819c63f3.png
[2]: /images/20220403/929e035eac1841a980cb2e7a1911712e.png
[1 4]: /images/20220403/d964eb9f34f44672bea46b545b8c5e48.png
[4]: /images/20220403/6b9e503f2e894144873ee5d0797a3d9f.png
[3 3]: /images/20220403/db86eab3fdc4426ebd76eb42cf91512c.png
[zhanshsu]: /images/20220403/52deb2649c1c4003b5c386e61ac91ef3.png
[7]: /images/20220403/4a1276a1002b485381e0f7da4445e7c2.png
[2 1]: /images/20220403/ce1af6d7ba0842aaa187a3dc6648e3ca.png
[2 2]: /images/20220403/939ed5ea10be4f1f88c0454b76dd92b5.png
[1 5]: /images/20220403/dfd55b171bb54dc99437e70f412728f1.png
[2 3]: /images/20220403/d22f4684612f41738f118f16954fe836.png
[3 4]: /images/20220403/cc8a1798790f40e1966e59627f88df4d.png
[4 1]: /images/20220403/ab75f409b9db4e5fbc16da093520a1e8.png
[w]: /images/20220403/078a235a2511447394e38df9555a2130.png
[v]: /images/20220403/5d3b14bac93f4daaa45fa7f98ed710b2.png
[1 6]: /images/20220403/df5d9fd5d99644a282ea95260617c475.png
[6]: /images/20220403/0568c6029dca4142814b6d02cf27f4c9.png
[1 7]: /images/20220403/76bb9faf1e3344c599ab6954a56adce4.png