SpringBoot整合thymeleaf

SpringBoot整合thymeleaf

介绍

使用SpringBoot整合thymeleaf模板引擎，进行Web开发

配置thymeleaf模板引擎

第一步，pom.xml引入thymeleaf依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

第二步，properties或yml文件添加配置

application.properties文件配置格式

spring.port=8080

#html存放的具体路径，可进行自定义，示例：resources/templates
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html
spring.thymeleaf.servlet.content-type=text/html

application.yml文件配置格式

spring:
  thymeleaf:
    prefix:classpath:/templates/
    encoding:UTF-8
    cache:false
    suffix:.html

  application:
    name: springboot-service
  

server:
  port: 8080

第三步，在templates目录下添加html文件，例如： templates/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo HTML</title>
</head>
<body>
Hello World!
</body>
</html>

第四步，在控制器中添加请求地址和页面绑定

@Controller
public class DemoController {
	@RequestMapping("/index")
	public String getDemoHtml(){
        //此处是需要展示的html在templates下的具体路径
		return "index";
	}
}

第五步，运行spring boot

在浏览器地址栏中输入：http://localhost:8080/index
可以看到运行结果的欢迎页面，此处应有掌声。

MyBatis整合

第一步，向pom.xml文件中添加MyBatis依赖

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.3.0</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

第二步，在properties或yml文件添加配置

application.properties文件配置格式

# 5.6
spring.datasource.driver-class-name = com.mysql.jdbc.Driver
# 8.0 spring.datasource.driver-class-name = com.mysql.cj.jdbc.Driver
spring.datasource.url = jdbc:mysql://localhost:3306/studentdb?useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.username = root
spring.datasource.password = x5

application.yml文件配置格式

spring:
  thymeleaf:
    prefix:classpath:/templates/
    encoding:UTF-8
    cache:false
    suffix:.html

  application:
    name: springboot-service
  datasource:
    driverClassName: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/studentdb?useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: x5

server:
  port: 8080

第三步，分别添加实体类，接口定义，以及实现类

实体类：MusicInfo.java

@Data
@NoArgsConstructor
@AllArgsConstructor
public class MusicInfo {
    private int uid;
    private String name;
    private String singer;
}

接口：IMusicDAL.java

@Mapper
@Component
public interface IMusicDAL {

    /**
     * 对音乐表的查询
     */
    @Select("select * from music")
    public List<MusicInfo> getAllMusic();

    /**
     * 根据music_id 查询指定数据
     */
    @Select("select * from music where uid=#{uid}")
    public MusicInfo getMusicInfoById(MusicInfo music);

    /**
     * 对音乐表的更新
     */
    @Update("update music set name=#{name} , singer=#{singer} where uid = #{uid}")
    public int doUpdateMusic(MusicInfo music);

    /**
     * 根据id删除指定数据
     */
    @Delete("delete from music where uid = #{uid} ")
    public int deleteMusicByID(MusicInfo music);
}

实现类：MusicDAL.java

@Service
public class MusicDAL {

    @Autowired
    IMusicDAL imd;

    /**
     * 对音乐表的查询
     */
    public List<MusicInfo> getAllMusic(){
        return imd.getAllMusic();
    }

    /**
     * 根据music_id 查询指定数据
     */
    public MusicInfo getMusicInfoById(MusicInfo music){
        return imd.getMusicInfoById(music);
    }

    /**
     * 对音乐表的更新
     */
    public boolean doUpdateMusic(MusicInfo music){

        if(imd.doUpdateMusic(music)>0){
            return true;
        }else{
            return false;
        }
    }

    /**
     * 根据id删除指定数据
     */
    public boolean deleteMusicByID(MusicInfo music){
        if(imd.deleteMusicByID(music)>0){
            return true;
        }else{
            return false;
        }
    }
}

在控制器类里使用的时候，直接将实现类在需要使用的地方注入使用即可

例如：

    @Autowired
    MusicDAL musicdal;

Thymeleaf模板前端常用示例

显示列表部分：

          <tr th:each="list:${musiclist}">
              <td th:text="${list.uid}"></td>
              <td th:text="${list.name}"></td>
              <td th:text="${list.singer}"></td>
              <td><a th:href="@{updateMusic/{id}(id=${list.uid})}" >更新</a></td>
              <td><a th:href="@{doDeleteMusicById/{id}(id=${list.uid})}" >删除</a></td>
          </tr>

表单部分：

        <form th:action="@{/doUpdateMusicById}" method="post">
            <input type="hidden" name="uid" th:value="${music.uid}">
            <input type="text" name="name" th:value="${music.name}" />
            <input type="text" name="singer" th:value="${music.singer}" />
            <input type="submit" value="提交更新">
        </form>

作者

  1. e4glet
posted @ 2024-04-23 16:54  冰葉丶月  阅读(39)  评论(0)    收藏  举报