美文网首页
SpringBoot整合thymeleaf

SpringBoot整合thymeleaf

作者: 煗NUAN | 来源:发表于2020-04-09 20:58 被阅读0次

SpringBoot整合thymeleaf

1.向导构建SpringBoot项目

01.jpg 02.jpg

2.pom.xml文件中添加依赖

<!--SpringBoot整合mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.15</version>
        </dependency>

        <!--整合thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
  • 完整的pom.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ym</groupId>
    <artifactId>springboot_thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>springboot_thymeleaf</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!--SpringBoot整合mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.15</version>
        </dependency>

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

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3.在resource包下添加application.yml文件

server:
  port: 8080
  # 指定端口,默认就是8080,可以不指定
spring:
  # 配置数据源
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3307/datatest?useSSL=false&serverTimezone=UTC&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
  #配置thymeleaf
  thymeleaf:
    cache: false        # 开发时关闭缓存,否则无法实时看到页面效果
    mode: LEGACYHTML5   #使用非严格的HTML标准
    encoding: utf-8
# 配置mybatis
mybatis:
  type-aliases-package: com.ym.pojo
  mapper-locations: classpath*:mapper/*Mapper.xml

4.pojo层User

package com.ym.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;


@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private int uid;
    private String name;
    private String sex;
    private int age;
    private String address;
}

5.dao层接口

  • 接口上需要@Mapper注解
package com.ym.dao;

import com.ym.pojo.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface IUserDao {
    List<User> getAllUsers();

    User getUserByUid(int uid);

    int editUser(User user);

    int deleteUserByUid(int uid);

    int saveUser(User user);
}

6.resource包下新建mapper包,并新建与接口对应的xml文件

  • UsersMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- 整个映射文件为mapper节点,里面包含namespace属性 -->
<mapper namespace="com.ym.dao.IUserDao">

    <sql id="all">
        select * from users
    </sql>

    <select id="getAllUsers" resultType="user">
        <include refid="all" />
    </select>


    <select id="getUserByUid" resultType="user">
        select * from users where uid=#{uid}
    </select>

    <update id="editUser">
        update users
        <set>
            <if test="name != null and name != ''">
                name = #{name},
            </if>
            <if test="sex != null and sex != ''">
                sex = #{sex},
            </if>
            <if test="age != 0">
                age = #{age},
            </if>
            <if test="address != null and address != ''">
                address = #{address},
            </if>
        </set>
        where uid = #{uid}
    </update>

    <delete id="deleteUserByUid">
        delete from users where uid=#{uid}
    </delete>

    <insert id="saveUser">
        insert into users values (default ,#{name},#{sex},#{age},#{address})
    </insert>
</mapper>

7.service层接口IUserService.java

package com.ym.service;

import com.ym.pojo.User;

import java.util.List;

public interface IUserService {
    List<User> getAllUsers();

    User getUserByUid(int uid);

    int editUser(User user);

    int deleteUserByUid(int uid);

    int saveUser(User user);
}

8.service层接口的实现类UserService.java

package com.ym.service.impl;

import com.ym.dao.IUserDao;
import com.ym.pojo.User;
import com.ym.service.IUserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class UserService implements IUserService {

    @Resource
    private IUserDao userDao;

    @Override
    public List<User> getAllUsers() {
        return userDao.getAllUsers();
    }

    @Override
    public User getUserByUid(int uid) {
        return userDao.getUserByUid(uid);
    }

    @Override
    public int editUser(User user) {
        return userDao.editUser(user);
    }

    @Override
    public int deleteUserByUid(int uid) {
        return userDao.deleteUserByUid(uid);
    }

    @Override
    public int saveUser(User user) {
        return userDao.saveUser(user);
    }
}

9.controller层的项目的启动主页indexController.java

  • 项目启动后,页面直接显示hello , spring boot
package com.ym.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class IndexController {

    @GetMapping("/")
    public String index(){
        return "hello , spring boot";
    }
}

10.controller层查询报错的信息ErrorController.java

package com.ym.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ErrorController {
    @GetMapping ("/errorPage")
    public String errorPage(){
        return "抱歉,页面跑丢了";
    }
}

11.controller层的UserController.java

package com.ym.controller;

import com.sun.org.apache.xpath.internal.operations.Mod;
import com.ym.pojo.User;
import com.ym.service.IUserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;


@Controller
public class UserController {

    @Resource
    private IUserService userService;

    @GetMapping("/getAllUser")
    @ResponseBody
    public List<User> getAllUser(){
        List<User> users = userService.getAllUsers();
        return users;
    }


    @GetMapping("/allUser")
    public String queryAllUser(Model model){
        List<User> users = userService.getAllUsers();
        model.addAttribute("users",users);
        return "user";
    }


    @GetMapping("/updateUsers/{uid}")
    public String queryUserByUid(@PathVariable int uid, Model model){
        User user = userService.getUserByUid(uid);
        model.addAttribute("user",user);
        return "userInfo";
    }

    @PostMapping("/editUser")
    public String editUser(User user){
        int i = userService.editUser(user);
        if (i>0){
            return "redirect:/allUser";
        }else {
            return "redirect:/errorPage";
        }
    }


    @GetMapping("/deleteUser/{uid}")
    public String deleteUser(@PathVariable int uid){
        int i = userService.deleteUserByUid(uid);
        if (i>0){
            return "redirect:/allUser";
        }else {
            return "redirect:/errorPage";
        }
    }

    @GetMapping("/toAdduser")
    public String toAdduser(){
        return "adduser";
    }

    @PostMapping("/saveUser")
    public String saveUser(User user){
        int i = userService.saveUser(user);
        if (i>0){
            return "redirect:/allUser";
        }else {
            return "redirect:/errorPage";
        }
    }
}

12.resource包下,templates包下HTML文件

  • html需要添加头文件

    • <html lang="en" xmlns:th="http://www.thymeleaf.org">
      
  • user.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>this is thymeleaf page</h1>

    <table width="80%" align="center" border="1">

        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>性别</th>
            <th>年龄</th>
            <th>地址</th>
            <th>修改 <a href="/toAdduser" th:href="@{/toAdduser}">ADD</a></th>
        </tr>
        <tbody>
            <tr th:each="u:${users}">
                <td th:text="${u.uid}">默认值</td>
                <td th:text="${u.name}">默认值</td>
                <td th:text="${u.sex}">默认值</td>
                <td th:text="${u.age}">默认值</td>
                <td th:text="${u.address}">默认值</td>
                <td>
                    <a href="/updateUsers/1" th:href="@{'/updateUsers/'+${u.uid}}">update</a>
                    <a href="/deleteUser/1" th:href="@{'/deleteUser/'+${u.uid}}">delete</a>
                </td>
            </tr>
        </tbody>
    </table>

</body>
</html>
  • userInfo.html
<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>this is userInfo page</h1>

<form th:action="@{/editUser}" th:method="post" th:object="${user}">
    编号: <input type="text" name="uid" readonly="readonly" value="" th:value="*{uid}" > <br>
    姓名: <input type="text" name="name" value="" th:value="*{name}" > <br>
    性别: <input type="text" name="sex" value="" th:value="*{sex}" > <br>
    年龄: <input type="number" name="age" value="" th:value="*{age}" > <br>
    地址: <input type="text" name="address" value="" th:value="*{address}" > <br>
    <input type="submit" value="update">
</form>
</body>
</html>
  • adduser.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ADD</title>
</head>
<body>
<form th:action="@{/saveUser}" th:method="post" >
    姓名: <input type="text" name="name"> <br>
    性别: <input type="text" name="sex" > <br>
    年龄: <input type="number" name="age"> <br>
    地址: <input type="text" name="address"> <br>
    <input type="submit" value="ADD">
</form>
</body>
</html>

13.目录结构

目录结构.jpg

相关文章

网友评论

      本文标题:SpringBoot整合thymeleaf

      本文链接:https://www.haomeiwen.com/subject/uxihmhtx.html