商城搜索页面前端的渲染（包括做出搜索结果集的显示，图片会根据鼠标的移动而显示，标题副标题也会跟着切换，json对象转换为字符串的方法，和字符串转换为json对象的方法）

最新推荐文章于 2024-01-09 16:04:57 发布
最新推荐文章于 2024-01-09 16:04:57 发布
阅读量436 收藏
点赞数
分类专栏： java 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andre_dong/article/details/110196861
版权

我们做好了一个页面后，可以看到我们的这个页面里面有很多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当中。
在这里插入图片描述

重新刷新一下，可以显示了
在这里插入图片描述

Andre_dong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
230427-018shopvue(树型结构数据的前端渲染渲染显示示例)
04-27
<el-table :data="currentPageList" style="width: 100%" row-key="id" default-expand-all :tree-props="{children: 'childrenCollection', hasChildren: 'hasChildren'}"> <el-table-column label="编号" property="id" width="100px" /> <el-table-column label="名称" property="name" /> <el-table-column prop="createdDateTime" label="创建时间" :formatter="dateTimeformat" width="155" /> <el-table-column prop="updatedDateTime" label="最后更新时间" :formatter="dateTime
前端实现小米商城网页2（竖排导航、搜索框的实现）
weixin_44584059的博客
08-25 2274
实现小知识点给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行 小知识点 给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果 z-index:10; 注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行 ...
解决layUI的页面显示不全的问题
10-16
今天小编就为大家分享一篇解决layUI的页面显示不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
WordPress主题不显示中文标题的解决方法
09-29
不少使用WordPress程序的博主们连主题也是用老外的，而这个过程往往会出现一些小问题。当我们在寻找到一份漂亮主题安装后，发现博文标题无法支持中文，原因是老外的主题的标题用了渲染特效，使博客标题无法显示。
a标签中写有文字如何隐藏文字显示图片兼容360模式渲染
09-28
a标签显示一张图片同时写有文字，又想让文字隐藏，通过text-indent可以实现，但在ie7中以及360默认ie模式下，图片就不显示，下面与大家分享下比较不错的解决方法
前端学习（1947）vue之电商管理系统电商系统之使用自定义模板渲染
歌谣的博客
08-14 246
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users from './components/user/Users.vue' i..
商城项目商品列表页的渲染实现(含动图)
tomorrownan的博客
05-20 3248
有了v-for循环，渲染商品列表简直不要太方便了，以前写一个商品列表页要一天，现在只需要几分钟，除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据，它可使前端工程师独立于后端进行开发，在前端可以先行自己测试，之后再与后端对接联调，可以节省不少的时间。 所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。 实现效果动图如下： 商品列表页的实现步骤如下： 1...
前端页面显示图片的多种方法小结
carrots
12-14 8130
对我使用过的前端显示图片的方法进行小总结，作为以后参考的依据。 说在前面的话：关于这几种实现方式，有可能原理是一样的，而且肯定有更优的实现方式。因为时间关系我没有进行深入研究，如果哪里写的不对，请多多指教。 目前，共接触以下几类方法： 1.img标签指向图片地址 &lt;img border="0" src="picture.jpg" alt="picture" width="160" he...
【Vue学习总结】5.Vue绑定属性、Html、class、style
程序猿之洞
08-02 1540
接上篇《4.绑定数据和对象、循环数组渲染数据》 上一篇我们主要讲解了Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据，本篇我们主要来介绍Vue属性、Html、class以及style的操作。 本系列博文使用的Vue版本：2.6.11 一、绑定属性 上一篇我们讲解了Vue如何绑定数据，例如下面msg里面的值： <h2>{{msg}}</h2> 在Vue中就可以使用data()函数来动态绑定msg的值 <script> export default
230309-013shopvue( 头像图片的前端渲染显示)
03-09
; line-height: 40px;" placement="bottom-end"> {{name}} <!-- <img src="../assets/AvatarDemo.png" /> --> <!-- <img :src="assetsAvatarDemo" /> --> <img :src="avatarUrl" />
Vue 导航 点击当前标题变色(太好用了)
HuangZeJunXXX的博客
10-14 1428
(1) html (2) js export default { data(){ return{ current:0, }, methods: { addClass:function(index){ this.current=index; } } (3) css bgColors{ background: #ff5700; }
前端实现搜索功能
最新发布
qq_37635012的博客
01-09 604
为了实现上面的效果，初始数据originList，页面上展示的数据myOriginList，选中的数据selectArr，是否全选中checkAll，实现思路是点击搜索按钮后，触发search方法，先判断输入框是否有搜索词，区别处理，如果有搜索词的话，先拷贝一份源数据originList，也就是先拷贝一份初始数据，然后通过数组的filter+includes方法实现过滤，将过滤后得到的数组回显到页面myOriginList上，然后取消全选checkAll设为false。
前端搜索功能的简单实现
热门推荐
nunumaymax的博客
10-18 1万+
用js完成前端的搜索功能前言js 前言 有的时候，后台并没有提供搜索功能的cgi供前端使用去搜索用户想要查找的内容，这个时候就需要我们前端自己对所有数据进行过滤处理，筛选出与用户搜索内容相匹配的数据进行显示。 js 通常使用原生中的indexOf方法进行数据筛选，代码如下： //search_data:过滤后的数据 //$scope.all_data:从后台获取到的所有数据 //$scope...
5.谷粒商城搜索前端页完整代码
qq_40788998的博客
05-24 3755
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim
点击列表中的哪一项, 那么该项的文字变成红色 Vue小练习
renaway的博客
03-23 1339
看Vue学习视频中看到这个小练习，如title。实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Homework</title> <style> .showRed{ ...
html+css 带图片的搜索框
qq_42782011的博客
08-05 2718
一个带图片样式的搜索框
[ element-ui ] select 开启远程搜索后, 数据量过多的交互优化
付出总会有收获!
05-21 6984
下拉列表的数据如果过多的话, 用户用起来会十分麻烦, 100多条的数据, 总不能让用户一直往下拉去找她要的那条, 所以远程搜索就用上了, 用户一直输入关键字, 一直匹配. 但是如果是第一次点开下拉列表, 数据过多会导致2秒钟的卡顿, 姑且是dom渲染引起的, 笔者下面就用一个比较暴力的方法来解决这个交互. <el-select v-model="form.F_ADDR_LANE...
html网页标题变红,作业变红.html
weixin_33410914的博客
06-15 890
Documentvar div1 = document.createElement("div")document.body.appendChild(div1)var div2 = document.createElement("div")document.body.appendChild(div2)var div3 = document.createElement("div")document.b...
前端页面只有在特殊的页面才会显示某个按钮
06-03
您好，针对您的问题，可以使用条件渲染来实现前端页面在特定情况下显示某个按钮。具体实现方式如下： 1. 在前端页面中，使用条件渲染来判断是否需要显示该按钮，例如： ``` {condition && 特殊按钮</button>} ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值