SpringBoot融合thymeleaf模板渲染前端Vue数据的带#和动态参数问题

简介: 废话少说上代码 带#参数是第二次更新的 我感觉写代码一定要敢写 因为我在vue请求的时候已经做过#处理了 但是在html中总感觉实现不了 一开始我在网上找了大片的参数中含有#的处理方式 都是驴头不对马尾 最后无奈 加了上去 这个方法就是 encodeURIComponent 莫名其妙还实现了

这里解决一下 前端Vue数据的带参问题和带的参数中含有#的参数


废话少说上代码 带#参数是第二次更新的 我感觉写代码一定要敢写 因为我在vue请求的时候已经做过#处理了 但是在html中总感觉实现不了 一开始我在网上找了大片的参数中含有#的处理方式 都是驴头不对马尾 最后无奈 加了上去 这个方法就是 encodeURIComponent 莫名其妙还实现了

<li class="index_arc_item" v-for="items in dataall">
    <a href="#" class="pic">
        <img class="lazyload" data-original="images/7.jpg" />
    </a>
    <h4 class="title"><a :href="'/acticleshow/'+encodeURIComponent(items.dataname)">{{items.dataname}}</a></h4>
    <div class="date_hits">
        <span>{{items.author}}</span>
        <span>{{items.datatime}}</span>
        <span><a href="">{{items.dataclassify}}</a></span>
        <p class="hits"><i class="Hui-iconfont" title="点击量">&#xe6c1;</i> 276° </p>
        <p class="commonts"><i class="Hui-iconfont" title="点击量">&#xe622;</i> <span
                class="cy_cmt_count">20</span></p>
    </div>
    <div class="desc">{{items.databrief}}</div>
</li>


image.png


我这里的思路就是前端的vue在进行v-for渲染数据的时候 取vue的当前的某一个数据 继续href传参 传给后端  后端进行根据传的参数进行相应的操作我网站的逻辑就不说了  主要还是 href前面的: 因为用thymeleaf模板的时候很容易就把 @href和:href 语法弄混了 这里记录一下 也算是实战经验


推广一个个人学习资料库


相关文章
|
2月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
115 60
|
4天前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
24 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
38 3
|
2月前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
88 2
|
2月前
|
监控 JavaScript 前端开发
Vue 异步渲染
【10月更文挑战第23天】Vue 异步渲染是提高应用性能和用户体验的重要手段。通过理解异步渲染的原理和优化策略,我们可以更好地利用 Vue 的优势,开发出高效、流畅的前端应用。同时,在实际开发中,要注意数据一致性、性能监控和调试等问题,确保应用的稳定性和可靠性。
|
3月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
185 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
3月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
72 4

热门文章

最新文章