SpringBoot(Thymeleaf）
Thymeleaf初体验
一、导入配置
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
二、一个小例子
viewTestController.java
@Controller
public class ViewTestController {
@GetMapping("/atguigu")
public String atguigu(Model model){
model.addAttribute("msg","你好 guigu");
model.addAttribute("link","http://www.baidu.com");
return "success";//这里是返回重定向
}
}
success.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
//这里使用thymeleaf模板，需要导入上面的东西，这样输入就会有提示
<head>
<meta charset="UTF-8">
<title >Title</title>
</head>
<body>
<h1 th:text="${msg}">哈哈</h1>
<h2>
<a href="http://github.com" th:href="${link}">超链接</a>
//这里如果${link}失效则默认为前面href定义的
<a href="http://github.com" th:href="@{link}">超链e接</a>
</h2>
</body>
</html>
@和$的区别
前者是超链接，后者只会显示为 路径+link
三、第二个完善的例子(实现一个登陆的界面效果）
https://gitee.com/leifengyang/springboot2/repository/archive/master.zip
需要用到的资源
首先思考我们需要用到，前端html文件+Controller文件+User一个类文件
User.java
package com.example.springtxiangmu.bean;
import lombok.Data;
@Data //这里其实就是get set方法
public class User {
private String userName;
private String password;
}
IndexController.java
@Controller
public class IndexController {
@GetMapping(value = {"/","/login"})
public String loginPage(){
return "login";//访问 / /login返回登陆界面
}
@PostMapping("/login")
public String main(User user, HttpSession session, Model model){
//这个 User user,其实就是我们上面定义的User类，然后获取username password
//这里的username passwrod是从前端输入获得的
if(!StringUtils.isEmpty(user.getUserName())&&"200377".equals(user.getPassword())){
session.setAttribute("loginUser",user);
//存入了session中
return "redirect:/main.html";//这里是转发
}
else{
model.addAttribute("msg","账号或密码错误");//添加错误信息罢了
return "login";
}
// return "main";
}
@GetMapping("/main.html")
public String mainPage(HttpSession session,Model modle){
Object loginUser = session.getAttribute("loginUser");
if(loginUser!=null){//简单的对访问后端进行了分身份验证
return "main";
}else{
modle.addAttribute("msg","请重新登陆");
return "login";
}
}
}
login.html
<form class="form-signin" action="index.html" method="post"
th:action="@{/login}">
//post 请求 转发到login路由
<div class="form-signin-heading text-center">
<h1 class="sign-title">Sign In</h1>
<img src="images/login-logo.png" alt=""/>
</div>
<label style="color:red" th:text="${msg}"/>
//自己定义的报错标签
<div class="login-wrap">
<input type="text" name="userName" class="form-control" placeholder="User ID" autofocus>
//这里的userName、password要和User类中字段一致因为要赋值
<input type="password" name="password" class="form-control" placeholder="Password">
main.html
[[${session.loginUser.userName}]]
这是thymeleaf的行内写法，上面的都需要标签包含
通过我们存入session的名字来显示
示例图片
###总结
```text
之前找过一个cms存入账号密码的东西，现在想想应该也就是前端直接存入了后端，这里可以通过查找有没有一个例如User类的东西。
学到了thymeleaf写法
[[${session.loginUser.userName}]]
@GetMapping(value = {"/","/login"}) 多个路径可以这样写
<label style="color:red" th:text="${msg}"/>
ps:希望自己可以每天坚持下去，加油~
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！