网络公司 网站建设 小程序,做练习题的网站,上海崇明网站建设,服务器网站建设维护合同学习本技术第一件事#xff1a;你为什么要使用#xff0c;解决什么问题的#xff1f;
1.为什么使用#xff08;使用背景#xff09;#xff1f;
首先应用场景是单体项目#xff0c;如果是前后端分离就不用关注这个了#xff0c;因为单体项目你前后端都是写在一个项目…学习本技术第一件事你为什么要使用解决什么问题的
1.为什么使用使用背景
首先应用场景是单体项目如果是前后端分离就不用关注这个了因为单体项目你前后端都是写在一个项目里面的也就是说你访问的地址都是controller的地址然后controller再通过是解析器ViewResolver去解析视图找到你对应的html文件一般前后端分离项目你浏览器地址一定是前端项目的地址并且基本上后端controller层使用的注解都是RestController是返回的数据不会走视图解析器现在基本上都是前后端分离但是很多小公司还是很多前后端不分离懂得都懂公司穷的一批不愿意花钱后端既担任后端又担任前端还担任运维和测试他奶奶的最恶心的还是前端的框架他喵的混合使用了很多种一点都不规范简直不要太屎山要不是为了这点米我早跑路了。简单画个图看一下。
单体项目的访问 前后端就不介绍了。
接下来说一下为什么使用有这样一种场景我当我访问后端/test/login时返回login字符串实际上会走视图解析器就会转发到login.html但是呢我现在后端无法通过return返回给前端数据吧因为return返回的是一个页面但是呢我想去动态根据一些条件去渲染页面那此时你写的静态html文件就无法解决这个问题对吧因为静态数据就是死的除非你访问后端获取数据去渲染这种一般都是后端方法上加上了Responsebody返回数据不走视图解析器但是我现在就是有这样一种需求你访问后端——转发到前端——前端需要动态渲染页面。这个时候就需要用到我们的thymeleaf了。
总结需求问题你访问后端/test/login——转发到前端login.html——前端需要动态渲染页面
解决通过thymeleaf去解决。它是如何解决这个问题的
其实简单来说我后端在转发login.html的同时我返回给前端一个model也就是键值对数据前端使用${key}的形式取出来就是了这样就实现了。 就这么简单一般比如按条件去动态渲染其实就是在后端在model.addAttibute的时候按条件去添加就可以了。 上面主要是你得理解什么时候才会用thymeleaf单体项目前后端不分离小公司开发周期短任务重需要动态渲染页面。 2.如何在SpringBoot项目中引入Thymeleaf
2.1引入thymeleaf依赖
thymeleaf是一个模板引擎很抽象的名词我一般很烦这种名字简单理解就是将动态数据和模板结合渲染生成最终的页面再形象一点就是这类似于汽车引擎将燃料和空气转化为动力模板引擎将数据和模板转化为网页内容。
首先SpringBoot是支持Thymeleaf的内部已经对Thymeleaf模板的版本进行控制了。此处只需要引入起步依赖即可。可以点开看一下。 dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependency
2.2配置application.yml文件
我们的静态html文件要放到templates目录下面因为它默认访问的路径也就是prefix就是templates后缀是.html所以下面这个配置可以不用配置此处想让大家知道它的配置属性类是哪个ctrl鼠标点击prefix会进入它的属性配置类ThymeleafProperties。
spring:thymeleaf:prefix: classpath:/templates/suffix: .html 可以看到它很多已经有默认值了我们都不用配置但是我们要知道怎么查看其他的查看方式也是如此并且查看它的所有配置属性类更有利于我们去了解这个技术。
2.3创建html文件
我这里直接告诉大家一个简单方法因为我们创建完普通的html文件还要引入thymeleaf你每创建一个文件都要引入比较麻烦所以直接创建一个模板文件这样每次直接创建这个模板文件即可 其实就加了一个东西xmlnshttp://www.thymeleaf.org因为你不引入你就无法使用它的动态属性这样我们再创建文件就可以右键选择我们定制的模板。
类似的还有mapper的映射文件它的头部也需要这样定制一个模板。
2.4如何使用前端和后端
2.4.1前端
此处我只介绍某一个写法其他可以自己去尝试或去b站看相关博主的视频系统的学习。
th:xxx${key}至于这个xxx是什么有很多每种也有不同的用法和意思。
例如th:text${titleName}就是给标签的内容赋值如果你后端的model没有titleName前端也不会报错。容错性也很好不会说没有导致前端页面瘫痪。 2.4.2后端 2.4.3结果展示 可见“默认的title”已经被动态的替换掉了。
3.总结
你可以不熟练毕竟我们是搞后端的而且就算是全栈也是前后端分离的也不会用thymeleaf直接就是返回数据但是呢我们要能看懂别人写的毕竟有的公司项目已经经过了很多人的手了能看懂它写的就行然后慢慢去模仿他们使用就行接下来自己去学习一下thymeleaf的各种常用的属性操作即可。
