淄博做企业网站哪家好,南宁小程序制作的公司,手机4g建立网站,网站建设运营服务公司引言#xff1a; 为啥写这篇文章呢#xff1f;我明明就没怎么用过这个Thymeleaf进行web开发#xff0c;用JSP也行#xff0c;三剑客也行#xff0c;或者Vue#xff0c;React#xff0c;PHP等等#xff0c;不好吗#xff1f;
那我为啥写这篇博客呢#xff1f;这个写了…引言 为啥写这篇文章呢我明明就没怎么用过这个Thymeleaf进行web开发用JSP也行三剑客也行或者VueReactPHP等等不好吗
那我为啥写这篇博客呢这个写了估计也没几个人看这是我在写之前就做好心理准备了的毕竟很多东西都需要参照官网案例进行开发主要写这个是因为咱们的Spring Boot官方推荐咱们使用ThymeleafThymeleaf也是有好处的毕竟他是一种基于java的Web应用程序的服务器端模版引擎它的主要目标是将模板和业务逻辑分离使开发人员能够更轻松地开发可维护和可扩展的 Web 应用程序。 ThymeleafThymeleaf 是一种服务器端模板引擎主要用于构建基于 Java 的 Web 应用程序。它的特点是模板语法与 HTML 非常接近易于编写和理解。Thymeleaf与Spring框架紧密集成提供了与Spring的标准特性集成的功能。 VueVue 是一种用于构建现代化、交互式的前端应用程序的 JavaScript 框架。它采用了组件化的开发方式使得前端开发更加模块化和可维护。Vue 提供了响应式数据绑定、组件化开发、虚拟 DOM 等特性使得构建复杂的前端应用变得更加简单和高效。 PHPPHP 是一种服务器端脚本语言主要用于构建动态网页和 Web 应用程序。PHP 具有广泛的应用领域可以与各种数据库和 Web 服务器进行集成。PHP 提供了丰富的函数库和框架使得开发 Web 应用程序变得更加便捷。 ReactReact 是一种用于构建用户界面的 JavaScript 库。它采用了组件化的开发方式使得前端开发更加模块化和可复用。React 使用虚拟 DOM 技术来提高性能并提供了状态管理、组件生命周期等特性使得构建大规模、高性能的前端应用变得更加容易。 Thymeleaf主要用于服务器端模板渲染Vue和React主要用于构建现代化的前端应用程序而PHP是一种服务器端脚本语言用于构建动态网页和 Web 应用程序。
就这么说吧其实不论我们选择哪个进行开发都有他自己的特色根据我们的项目需求和技术团队以及个人爱好进行选择吧。
以下是一些使用 Thymeleaf 的好处 自然的模板语法Thymeleaf 的模板语法非常接近于 HTML使得模板易于编写和理解。这使得前端开发人员可以更轻松地参与到模板的开发中。 强大的表达式功能Thymeleaf 提供了丰富的表达式功能可以在模板中使用这些表达式来动态地生成内容。这些表达式可以用于访问模型数据、迭代集合、条件判断、计算等使模板更加灵活和动态。 与 Spring 框架的集成Thymeleaf 是与 Spring 框架紧密集成的可以无缝地与 Spring MVC、Spring Boot 等框架一起使用。它提供了与 Spring 的标准特性集成的功能如表单绑定、国际化支持、安全性等。 可扩展性Thymeleaf 提供了丰富的扩展机制可以通过自定义标签、方言等来扩展模板的功能。这使得开发人员可以根据项目的需求定制和扩展 Thymeleaf 的功能。 良好的生态系统Thymeleaf 拥有一个活跃的社区和广泛的用户群体提供了大量的文档、教程和示例代码。这使得学习和使用 Thymeleaf 变得更加容易。
Thymeleaf官网 好了写了这么多估计看文章还不如看代码来的轻松这里只提供一个使用哪个Thymeleaf的小案例具体的语法请参照Thymeleaf官网进行开发。
老样子第一步先引入依赖 dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdscopeprovided/scope/dependency!-- Spring Security --dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-security/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency第二步在resources目录下建立一个templates文件夹。之后建立一个login.html文件
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8titleLogin/titlelink relstylesheet th:href{/css/style.css} /
/head
bodyh2Login/h2form th:action{/login} methodpostinput typetext nameusername placeholderUsername required /br/input typepassword namepassword placeholderPassword required /br/button typesubmitLogin/button/form
/body
/html在新建一个主页home.html
!DOCTYPE html
html langen xmlns:thhttp://www.thymeleaf.org
headmeta charsetUTF-8titleHome/title
/head
bodyh2欢迎来到miaow的主页!/h2pLogged in successfully!/p
/body
/html之后我们在src/main/resources/static/css目录下创建一个style.css文件用于自定义登录页面的样式
body {background-color: #f2f2f2;font-family: Arial, sans-serif;text-align: center;
}h2 {color: #333333;
}form {margin-top: 50px;
}input[typetext],
input[typepassword] {width: 200px;padding: 10px;margin-bottom: 10px;
}button {padding: 10px 20px;background-color: #333333;color: #ffffff;border: none;cursor: pointer;
}第三步我们创建一个LoginController类用来处理登录页面和主页的请求
Controller
public class LoginController {GetMapping(/login)public String login() {return login;}GetMapping(/home)public String home() {return home;}
}第四步我们使用Spring security创建一个SecurityConfig类用来配置Spring Security 包括登录页面和验证逻辑
Configuration
EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().antMatchers(/login, /css/**).permitAll().anyRequest().authenticated().and().formLogin().loginPage(/login).defaultSuccessUrl(/home).permitAll().and().logout().permitAll();}Overrideprotected void configure(AuthenticationManagerBuilder auth) throws Exception {auth.inMemoryAuthentication().withUser(admin).password({noop}admin).roles(USER);}
}在上述代码中我们配置了登录页面为/login主页为/home。用户名为admin密码为admin
ok至此我们就简单实现了一个登录页面跳转到主页了可以通过直接访问http://localhost:8080/login,账号密码均为admin,输入后跳转到主页 如果账号密码不对是跳不进去主页的。
关于更多的Thymeleaf语法请参照官网这里给出我们常用的
th:text用于将文本内容设置到元素的文本中。
span th:text${variable}Default Text/spanth:if用于条件性地显示或隐藏元素。
div th:if${condition}Visible if condition is true/divth:each用于迭代集合或数组中的元素并生成相应的HTML。
ulli th:eachitem : ${items} th:text${item}Item/li
/ulth:href用于设置链接的目标URL。
a th:href{/path/to/page}Link/ath:src用于设置图像或脚本的源URL。
img th:src{/path/to/image.jpg} altImageth:style用于设置元素的样式。
div th:stylecolor: red; font-size: 14pxStyled Text/divth:class用于设置元素的CSS类。
div th:class${condition} ? class1 : class2Conditional Class/divth:switch、th:case和th:default用于实现类似于Java的switch-case语句的逻辑。
div th:switch${variable}p th:casevalue1Case 1/pp th:casevalue2Case 2/pp th:defaultDefault Case/p
/div需要更多请参照官方文档
