当前位置: 首页 > news >正文

入门概念|Thymeleaf与Vue

理解thymeleaf是什么?

​ thymeleaf和vue的区别
​ th是渲染html模板的引擎,vue是前端框架,虽然这么说,但是在这里得先弄明白一件事,即什么是前后端分离?

前后端分离是什么?

​ 原始的时候,使用的是JSP渲染页面,也就是说用户点开网址,看到的其实是JSP渲染的页面;这样做有个毛病,就是页面交互和页面渲染的工作都交付个了JSP去做,导致后台压力很大。

​ 当前后端进行分离后,前端使用前端框架与Vue等对页面进行渲染,后端则专注于提供前端渲染所需的接口。这样后端就不负责页面展示及交互的工作内容了,回归到了提供服务本身。

我刚开始接触前后端分离的时候,正值它开始慢慢扩散的时候,也还没有意识到它带来的好处。觉得它甚是麻烦,当我改一个接口的时候,我需要同时修改两部分的代码,以及对应的测试。反而,还不如直接修改原有的模板来得简单。

可是当我去使用这个,由前后端分离做成的单页面应用时,我开始觉得这些是值得。当页面加载完后,每打开一个新的链接时,不再需要等网络返回给我结果;我也能快速的回到上一个页面,像一个 APP 一样的体现这样的应用。整个过程里,我们只是不断地从后台去获取数据,不需要重复地请求页面——因为这些页面的模板已经存在本地了,我们所缺少的只是实时的数据。

一篇优秀的博文,关于前后端分离https://segmentfault.com/a/1190000009329474?_ea=2038402,将前后端分离从技术角度上升到思想高度。

回归–> thymeleaf和vue的区别是什么?

​ th是模板引擎,什么是模板引擎?就是生成html模板的软件,依靠th,调用th里面的各种写好的函数库,可以在html文件里动态的输出数据,类似于jsp的功能。

​ 而vue是js的框架,js是基于v8引擎实现的一个脚本语言,可以实现很多函数功能,让网页动态呈现。

如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优。

​ 如果一定要比较的话,th是强化版html,vue是强化版的jq。

关于th的一些搜索及阅读文档的结论:

​ th是Java写的,有点类似于JSP的东西,支持数据的实时渲染功能,而它是如何实现渲染功能的呢?即th的数据哪里来的?

​ 这不得不从Java是如何实现网络通信说起,也就是说不从Java.socket这么底层说起了(我也没去细了解,大概是最底层的网络api);

Java可以实现服务器功能的底层是sun提供了servlet包,让Java程序可以根据不同请求作出相应,这就有了服务器的基础。

(这个包是作为JavaEE的扩展包而存在的,理论上是要收费的)

​ Java是通过servlet实现的服务器功能,这个servlet是基于http协议的,即只要是基于http协议的请求过来了,我就能给你一个基于http协议的respond。当一个请求过来的时候,可以根据servlet这个包的设计,我们可以在域对象(request,application( ServletContext ),session)里面添加 各种数据,然后当这个请求前往相应的网页时,网页就从这些域对象里面取数据,然后实现交互的功能。
​ 讲到这里差不多servlet的通信流程就大致清晰了,在撤回到刚开始的问题,th的数据哪里来呢?刚才说到servlet会重新进入一个网页,而不进入一个普通的网页,而是进入一个整合了th框架的网页,这个网页需要的数据被th框架标记出来,当有数据需要显示的时候,th就去就域对象里找,根据key去找value,找到了就放上去。—在这一过程,和JSP几乎是一模一样的,而取数据用的标记,也非常相似,因此说th是JSP风格和功能的延展。

​ 综上所述,th可以用来在SpringBoot框架上搭建单体项目使用,但是不适合前后端分离的项目。

其实也就是因为SpringBoot不给用JSP了,只给用th了,所以我学了这个,本质上就是SpringBoot框架上的JSP。

servlet与servlet域对象

​ 尚硅谷王振国讲的JavaWeb缺少对servlet和域对象的整体讲解,这里我整理一下。

​ servlet是Java实现服务器功能的重要组件,servlet中含有三个域对象,都是用来存放数据的,不过用途不同;这三个域对象分别是request、session、application,分别是在请求时创建,会话开始时创建,服务器部署时创建,初次之外还有cookie,session的底层是依靠cookie实现的。

​ 这里面有很多可以去了解的东西,涉及到了http协议,我觉得以后有时间了可以去详细的看一看。

http://www.dtcms.com/a/354348.html

相关文章:

  • 企业微信对接 代理 WXJava Ngnix映射 weixin-java-cp
  • Vue 登录页高低分辨率背景图优化实现
  • mathtype公式存在乱码
  • SqlHelper类的方法详细解读和使用示例
  • Libvio访问异常排查指南
  • sql server 取起始日期到结束日期中自然月最后一天,与日期维度行转列
  • 数据治理:AI健康血液的生命线
  • Elasticsearch数据迁移快照方案初探(一):多节点集群配置踩坑记
  • Anaconda的安装与使用
  • 文本分块的优化策略-语义完整性、控制长度、重叠切分、结合模型,考虑大模型输入限制
  • matlab的app中传递数据
  • 林墨2025全新个人EP《嘻嘻呵呵嘿嘿哈哈》 第三支单曲解锁
  • 【数据分享】安徽省安庆市地理基础数据(道路、水系、铁路、行政边界(含乡镇)、DEM等)
  • 企业分支上云的常见误区与纠正方案
  • LeetCode - 反转链表 / K 个一组翻转链表
  • HSA35NV001美光固态闪存NQ482NQ470
  • CT03-215.数组中第k大的元素
  • 面试之微服务架构
  • 美团面试手撕:手动实现开方函数math.sqrt(x)
  • Spring Security 深度学习(一): 基础入门与默认行为分析
  • 【Vue2 ✨】Vue2 入门之旅(一):初识 Vue2
  • 详细梳理 MyBatis-Plus 的 QueryWrapper 和 LambdaQueryWrapper的入门到精通
  • App中分发中的防盗链开发是做什么的?防盗链有什么作用?什么是防盗链?
  • vscode 如何调试 python 2.7
  • 【PyTorch】基于YOLO的多目标检测项目(一)
  • 免费开源图片压缩工具|绿色版本地运行,支持批量压缩+格式转换,不上传数据,隐私安全有保障!
  • 解决delphi label 在timer下闪烁的问题
  • 字节面试手撕题:神经网络模型损失函数与梯度推导
  • CSS(面试)
  • Mojomox-在线 AI logo 设计工具