商品详情页

商品详情页。。点击商品图片之后。将商品的spuId（也就是88）传到服务器后台中进行处理查询。将需要的数据封装成一个map返回。

Spring官方支持的服务的渲染模板中，并不包含jsp。而是Thymeleaf和Freemarker等

使用页面静态化（乐优14天第2节）：静态化是指把动态生成的HTML页面变为静态内容保存，以后用户的请求到来，直接访问静态页面，不再经过服务的渲染，而静态的HTML页面可以部署在nginx中，从而大大提高并发能力，减小tomcat压力。类似于缓存技术，但是数据量较大，缓存会奔溃。所以用页面静态化。

public class GoodsService {
    @Autowired
    private BrandClient brandClient;
    @Autowired
    private CategoryClient categoryClient;
    @Autowired
    private GoodsClient goodsClient;
    @Autowired
    private SpecificationClient specificationClient;

    public Map loadData(Long spuId){
        Map model = new HashMap<>();

.....
  // 查询规格参数组
        List groups = this.specificationClient.queryGroupsWithParam(spu.getCid3());
        // 查询特殊的规格参数的map
        List params = this.specificationClient.queryParams(null, spu.getCid3(), false, null);

。。。。。。。。
model.put("spu",spu);
        model.put("spuDetail",spuDetail);
        model.put("categories",categories);
        model.put("brand",brand);
        model.put("skus",skus);
        model.put("groups",groups);
        model.put("paramMap",paramMap);
        return model;

　　然后在controller中调用loadData()方法。这里的controller是用来控制视图的跳转的类似于springmvc中的jsp页面跳转，只不过这里跳转的thymeleaf中的html页面。

　

　注意：把html 的名称空间，改成：xmlns:th="http://www.thymeleaf.org" 会有语法提示。Theymeleaf的主要作用是把model中的数据渲染到html中，因此其语法主要是如何解析model中的数据。Model和ModelAndView的区别

@Controller
public class GoodsController {

    @Autowired
    private GoodsService goodsService;
    @GetMapping("item/{id}.html")
    public String toItempage(@PathVariable("id")Long id , Model model){
        Map map = this.goodsService.loadData(id);

        model.addAllAttributes(map);
        return "item";
    }
}

　　在ht在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本，使用Thymeleaf语法来获取model中的值。检查前面的过程是否能正常获取到值。

　　

 注意： 

 

（1） const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ "");//因为在specialSpec在数据库中是json字符串保存的，所以需要将数据转换成json对象。
（2）Object.keys(specialSpec);//取出specialSpec对象中的所有的属性。
(3)Object.values(specialSpec);//取出specialSpec对象中的所有value值。
（4） const index = Object.values(this.indexes).join("_");  //其中join：表示使用“_”进行连接。
　　　　　　而split(",");   //表示用,进行分割。
        return this.skus.find(sku => sku.indexes == index);  //s.index==index这个值返回true的时候，返回相应的对象sku;