初次學習Thymeleaf所遇到的問題——只返回了字符串到瀏覽器

以前一直用jsp和Vue。現在新項目決定使用thymeleaf模板引擎,所以花點時間學下thymeleaf。沒成想一開始就給自己挖了個坑。在這裏記錄一下,用以警示後人。

SpringBoot並不推薦使用jsp,但是支持一些模板引擎技術:

通過讀取源碼可知使用thymeleaf的第一步是要在resources目錄下新建templates文件夾,再在該文件夾下面新建一個html文件。如下圖所示。

 

廢話不多說,

我的項目結構如下:

userList.html文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px; width: 80%; margin: auto}
        table, th, td {border: 1px solid darkslategray;padding: 10px}
    </style>
</head>
<body>
<div style="text-align: center">
    <span style="color: darkslategray; font-size: 30px">歡迎光臨!</span>
    <hr/>
    <table class="list">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>用戶名</th>
            <th>年齡</th>
            <th>性別</th>
            <th>生日</th>
        </tr>
        <tr th:each="user : ${userList}">
            <td th:text="${user.id}">1</td>
            <td th:text="${user.name}">張三</td>
            <td th:text="${user.userName}">zhangsan</td>
            <td th:text="${user.age}">20</td>
            <td th:text="${user.sex}">男</td>
            <td th:text="${user.birthday}">1980-02-30</td>
        </tr>
    </table>
</div>
</body>
</html>

User類:

package cn.chao.user.pojo;

import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;

/**
 * @author
 * @create 2020-02-10 22:00
 **/
@Table(name = "tb_user")
public class User {
   
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String userName;

    private String password;

    private String name;

    private Integer age;

    private Integer sex;

    private Date birthday;

    private Date created;

    private Date updated;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public Date getCreated() {
        return created;
    }

    public void setCreated(Date created) {
        this.created = created;
    }

    public Date getUpdated() {
        return updated;
    }

    public void setUpdated(Date updated) {
        this.updated = updated;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", userName='" + userName + '\'' +
                ", password='" + password + '\'' +
                ", name='" + name + '\'' +
                ", age=" + age +
                ", sex=" + sex +
                ", birthday=" + birthday +
                ", created=" + created +
                ", updated=" + updated +
                '}';
    }
}

UserController類:

package cn.chao.user.controller;

import cn.chao.user.pojo.User;
import cn.chao.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

/**
 * @author
 * @create 2020-02-10 19:12
 **/
@RestController
@RequestMapping("user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("{id}")
    public User queryUserById(@PathVariable("id") Long id){
        return userService.queryById(id);
    }

    @GetMapping("all")
    public String all(Model model) {
        // 查詢用戶
        List<User> userList = this.userService.queryAll();
        // 放入模型
        model.addAttribute("userList", userList);
        // 返回模板名稱(就是classpath:/templates/目錄下的html文件名)
        return "userList";
    }
}

啓動項目,在瀏覽器中輸入localhost/user/all

結果頁面並沒有加載我的靜態頁面,而是顯示“userList”字符串。

這是爲何?

經過一番苦苦查看,終於發現罪魁禍首居然是UserController類上的@RestController註解。

分析:

@RestController註解 = @Controller + @ResponseBody。加上@RestController,返回的內容是你return中的內容,如果是return "userList",頁面顯示的就是userList。只加上@Controller註解,返回的是return中對應的頁面,比如return “userList”,頁面的名稱是userList。

解決方法:

把UserController類中的@RestController註解改爲@Controller註解。重啓項目後,如下所示:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章