我们做好了一个页面后,可以看到我们的这个页面里面有很多null的字段,是空的字段,这些字段我们都不想它能够显示在控制台,这样才会整洁很多,那该怎么样才能把它们去掉呢?
我们可以在search模块的yml配置里面加上这个配置,non_null,表示如果为null的话就不会显示,always代表全部显示。这是spring的特色功能
重启一下,发现都没有了。
打开items一看,我们已经拿到了响应的数据了,但是还没有进行渲染,接下来我们就可以进行渲染了。
我们该如何进行渲染呢?首先可以看到下面这个方法本来是这样的
我们把
因为我们要拿到下面的这个items,我们之前是定义了一个空集合goodsList,就可以用这个goodsList来接收items,如上图所示
然后我们就要找到我们对应的组件进行渲染了,下面的detail就是商品详情表,里面有个goods-list
下面这一块就是上面的selector选择块。
展开list后我们可以看到一个无序列表,这些代表每一个商品
可以看到它的里面有图片有价格集合等等。
我们删掉其他的商品list,然后用这个遍历方法遍历商品,用key方法比较快一点
看我们这里是个json字符串,我们要去渲染它,就要把它进行转换成json对象
用JSON.parse方法就可以实现把字符串转换为Json对象,然后用goods.skus来接收
然后这里的图片可以都删掉
然后加入这些信息,v-for里面的是双重遍历,也就是sku和j都得到遍历,最后传入图片
启动后我们可以发现一个问题,选中一个图片后,其他所有的图片都会被选中,这是为什么呢?
因为这个选择方法规定了你选择一条就等于选择全部了,所以我们要去规定选中一条等于只能选中一条,并且每个goods选中了某一个图片后只能在当前的goods里面生效,所以我们需要在每一个goods里面去写上这个唯一性的方法。
首先我们先来加上这个方法,这个方法代表默认情况下显示哪个图片,我们默认情况下显示第一个图片
这里我们改成样式方法,这个方式方法在“:”后面表示如果符合后面的值,就会执行这个方法,如果不符合则为false,在这里的话,如果我们选择了其他图片就相当于选择了其他sku,sku的id就会不一样,所以它也就不会显示原来的图片了。
效果如下,但是有个缺点,就是红框不会随着鼠标的移动而移动。
添加一个鼠标的移动事件就可以了。
但是我们可以看到,把鼠标放在图片上依然没有红框出现进行显示
因为这个是一开始就赋值了的,有图片还有sku的信息,一开始就已经赋值给了默认值
如果我们把它放在后面,那么它就会等调整好数据后再进行赋值
重新刷新,可以看到它移动了。
然后剩下的价格,标题,副标题我们也可以渲染了。
图片改上这个就会跟着变化了
可以看到价格本来是这样的,要想它产生变化,我们应该改成什么呢?
我们应该改成这样。跟着选择价格
标题和副标题方法也是一样
然后看看别人的网站,鼠标放在标题上会弹出个小框显示全部文字。
所以我们需要做一个判断,也就是如果这个标题长度大于20,就截取0到20个文字,如果小于20则显示,副标题也是同样的做法。
结果遇到问题了,渲染不出来了,是什么错误呢?它说formatPrice是个未定义的属性
要注意的是,在html里面你只能引入vue的实例,ly这个并没有实例化,所以显示失败(这里除了价格外,其他的比如图片等等也没有实例)
所以你要在这里引入实例
那有人可能会问这里之前也是没有实例为什么这个可以去用,因为下面这个是在js当中。
重新刷新一下,可以显示了