乐优商场项目day13—页面渲染

一、处理null值

查询结果中有null值，如下：

这样的空值既不好看，还占用带宽。
我们可以将空值过滤掉，
在搜索微服务的配置中配置一下：

然后重启搜索微服务之后再看看:

null值字段就被过滤掉了。

 

二、保存搜索结果

先在data中定义属性，保存搜索结果；
然后在loadData的异步查询中，将结果赋值给goodList：

刷新一下搜索页面，看看效果：

有保存了搜索结果之后，我们就可以将搜索结果放到页面上了。

 

三、循环展示商品

 

四、多sku展示

1.初始化sku
我们查询出来的sku结果集skus，是一个json类型的字符串，我们需要转换成json对象：
(顺便加个默认选中的属性。)

刷新页面，看看效果：

 

2.多sku图片列表

展示多图片，以及鼠标选中状态

因为vue只监控一开始有值的属性的变化，后续添加的值的变化检测不到。
所以要先给items赋值，后面再给goodsList赋值，修改代码如下：

 

刷新查看页面效果：

 

3.展示sku其他属性：

我们现在既然可以通过goods.selected获取用户选中的sku，那我们就可以在页面展示sku的其他属性了。

刷新看看页面效果：

 

貌似还行，但其实还有几个小问题：价格显示不对，标题过长。我们去解决一下。

① 价格显示，数据库中寸的是分，页面是元，所以要格式化一下，
通过之前common.js中定义的工具类，可以帮我们转换，记得要把变量记录到Vue实例：

刷新查看页面效果：

 

②标题显示过长，我们可以截取一下：

刷新页面看看效果：

 

页面查询结果的渲染我们就完成了。