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

2024-04-15 00:42:29

一、处理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实例：

刷新查看页面效果：

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

刷新页面看看效果：

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

乐优商场项目day13—页面渲染相关推荐

乐优商场项目day13—页面分页效果
一.添加需要的数据分页的话,我们需要知道总页数(totalPage).总条数(total).当前页(page), 所以我们先在data中记录这几个变量: 因为page是搜索条件之一,所以记录在sea ...
乐优商场项目day10—新增商品
先看一下页面新增商品是什么样的: 后台页面,商品列表页面,单击新增商品,弹出个新增商品的窗口. 我们选择商品分类之后,会发送一个请求,查询对应商品分类下的所有品牌,并返回到所属品牌中供选择. 从页 ...
乐优商场项目day07——解决跨域问题
1.跨域相关问题及解决办法. 2.实现虽然cors原理复杂,但实现简单. SpringMVC已经帮我们写好了CORS的跨域过滤器:CorsFilter ,内部已经实现了复杂的判定逻辑,我们直接用就好 ...
乐优商场项目day02——总结
一.架构的演变传统架构 → 水平拆分 → 垂直拆分(最早的分布式) → soa(dubbo) → 微服务(SpringCloud) 二.远程调用技术 rpc协议:自定义数据格式,限定技术,传输速度快 ...
乐优商场开发第五天笔记
学习目标会创建Vue实例,知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控会编写Vue组件掌握组件间通信了解vue-route ...
乐优商场开发第三天笔记
0.学习目标会配置Hystix熔断会使用Feign进行远程调用能独立搭建Zuul网关能编写Zuul的拦截器 1.Hystrix 1.1.简介 Hystix,即熔断器. 主页:https://g ...
品优购项目--登录页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
品优购项目--注册页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
优乐商城05-1 项目环境搭建
0.学习目标了解电商行业了解乐优商城项目结构能独立搭建项目基本框架能参考使用ES6的新语法 1.了解电商行业学习电商项目,自然要先了解这个行业,所以我们首先来聊聊电商行业 1.1.项目分类 ...

最新文章

热门文章