首页 文章 精选 留言 我的

精选列表

搜索[鸿蒙课程]，共8042篇文章
优秀的个人博客,低调大师

09.ajax局部渲染---《Beetl视频课程》

本期视频实现分类实时获取； 内容简介：使用了局部渲染技术，实现分类的实时获取 一起学beetl目录：https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者：GK Beetl满足了更加流行的方式，研发了ajax局部渲染技术。 后台处理后返回一个json，浏览器端将json数据拆开，拼成一条一条的行数据，然后生成dom节点，追加到表格里。 作为另外一种可选技术，beetl支持局部渲染技术，允许后台处理返回的是一个完成的html片段，这样，前端浏览器可以直接将这个html片段追加到表格里。在性能测试里，俩种方式性能差别不大(http://bbs.ibeetl.com/ajax//) 在beetl模板中，使用#ajax 局部命名:{ .... }包裹起来的代码，就是ajax需要渲染的局部代码。 如果一个模板返回正常的渲染整个模板文件，将会忽略这一标记，比如：return "index.html" 如果返回的是 模板名称#局部命名，Beetl将会只渲染这一小段的代码。比如return "index.html#局部命名" 举个例子，在项目中layout.html模板中，增加了一段ajax标记 <div class="widewrapper main"> <div class="container"> <div class="row"> <div class="col-md-8 blog-main"> ${layoutContent} </div> <%if(isEmpty(notShow)){%> <aside class="col-md-4 blog-aside" id="tagsDiv"> <%#ajax tags :{%> <div class="aside-widget"> <header> <h3>Tags</h3> </header> <div class="body clearfix"> <ul class="tags"> <%for(tag in categorys!){%> <li><a href="/?category=${tag}">${tag}</a></li> <%}%> </ul> </div> </div> <%} }%> </aside> </div> </div> </div> 大家可以看到有一段使用 #ajax tags{}包裹起来的代码 <%#ajax tags :{%> ..... <%}%> 当controller中直接 return "layout.html"时，将会渲染整个页面。 我们在controller中增加一个方法。 @GetMapping("/tags") public String tags(HttpServletRequest request) { request.setAttribute("categorys", blogService.listCategory()); return "common/layout.html#tags"; } 告诉beetl模板引擎，只渲染tags中间的代码。 可以看到我们渲染的代码为： <div class="aside-widget"> <header> <h3>Tags</h3> </header> <div class="body clearfix"> <ul class="tags"> <li><a href="/?category=beetl">beetl</a></li> <li><a href="/?category=beetlsql">beetlsql</a></li> <li><a href="/?category=java">java</a></li> <li><a href="/?category=一起学Beetl">一起学Beetl</a></li> </ul> </div> </div> 仅仅渲染了我们中间这一段代码，能让我们更加优雅使用。 我们在前端只要使用js加入这段渲染的html代码即可。 <script type="text/javascript"> $(function(){ $.get("${ctxPath}/tags",function (data) { $("#tagsDiv").html(data); console.info(data); }); }); </script> 项目git地址：https://gitee.com/gavink/beetl-blog 视频地址：下载下来会更清晰，视频比较长，可使用倍速看 百度网盘下载: https://pan.baidu.com/s/1LyxAxlKpVXgVjwSXIbzBuA 提取码: 68im 在线播放地址：bilibili (可以调节清晰度): https://www.bilibili.com/video/av36278644/?p=9 博客目录：https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598
2018-12-12

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2026-09-24 大小: 189MB 下载: 9次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-08-21 大小: 1.42GB 下载: 6次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2026-08-21 大小: 9.84MB 下载: 40次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册