在Eclipse中使用Spring Boot和Thymeleaf。（第一部分）

3 年 ago
清, 扬
3 minutes

首先

让我们在Eclipse中创建一个使用Spring Boot + Thymeleaf的样例程序。

开发环境

Windows 10专业版 1709（16299.192）
Eclipse pleiades-4.7.3
Java 1.8.0_162
Spring Boot 2.0.2.RELEASE
Thymeleaf 3.0.9.RELEASE

操作步骤

1. 在安装Eclipse Pleiades All in One时，选择完整版本，以便以后可以在其他语言中使用。
“Ultimate”：可进行非Java语言的开发（如C/C++、Python…）。
“Full Edition”：包含编译器和执行环境。

２．请进行STS软件的安装。

创建项目

创建名为“员工显示”的示例程序
M（Model）: 表单（Java类）
C（Controller）：控制器（Java类）
V（View）：html（模板）

5. 验证操作

1. 安装Eclipse Pleiades All in One。

链接

http://mergedoc.osdn.jp/

安裝步驟

点击「Eclipse 4.7 Oxygen」。

image.png

如果在第3步出现超时的情况，更改镜像服务器。

image.png

点击 Windows 64位的「Ultimate」版本和「完整版」。

image.png

将下载文件解压到工作文件夹中。

image.png

2. 安装 STS

双击「eclipse.exe」进行运行。

image.png

点击”启动”按钮

image.png

由于不使用Python，因此请点击“取消选择”按钮，并点击“应用所选更改”按钮。

image.png

4. 选择 “帮助”，再选择 “Eclipse市场” 菜单。

image.png

在搜索栏中输入”STS”，按下回车键后，点击”安装”按钮。

image.png

点击「确认」按钮。

image.png

选择“同意使用条款”并点击“完成”按钮

image.png

点击「安装」按钮

image.png

立即点击“立即重启”按钮。

image.png

创建项目。

打开3-1. Spring透视图

1. 选择菜单中的「窗口」、「透视图」、「打开透视图」和「其他」选项。

image.png

选择”春天”，然后点击”打开”按钮。

image.png

关闭”欢迎”，并且也关闭”C/C++”、”PHP”、”Python”、”Perl”、”Ruby”。

image.png

点击Spring，并打开Spring视图

image.png

创建一个名为Spring的项目，版本为3.2。

1. 在包含浏览器插件的右侧菜单上选择”新建”，然后选择”Spring启动器项目”。

image.png

请在项目名称、其他信息中输入，并点击“下一步”按钮。

image.png

选择依赖关系 “DevTools”、”Lombok”、”Thymeleaf”、”Web”，然后点击 “完成” （”JPA”、”PostgreSql” 将在稍后的数据库示例程序创建中使用）。

image.png

如果选择了「JPA」和「PostgreSql」，则需要在application.properties中添加以下内容。

spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=admin
spring.datasource.driverClassName=org.postgresql.Driver

# disable driver's feature detection
spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false

# without detection you have to set the dialect by hand
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect

创建名为”员工信息展示”的示例程序。

创建模型（表单）

在中文中，将以下内容进行同义转述：

1. 「ファイル」->「新規」->「クラス」メニュ選択

转述为：选择「文件」->「新建」->「类」菜单

image.png

输入“Java包”和“类名”，然后点击“完成”按钮。

image.png

3. 编写代码

package com.example.demo;

import lombok.Data;

@Data
public class EmployeeForm {

    private String id            = "";
    private String name          = "";
    private String email         = "";

}

创建一个控制器4-2。

1. 在「文件」中选择「新建」->「类」菜单

image.png

请输入”Java包名”和”类名”，然后点击”完成”按钮。

image.png

3. 编写代码

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EmployeeController {

    @RequestMapping("/show")
    public ModelAndView show(ModelAndView mav) {
        EmployeeForm form = new EmployeeForm();
        form.setId("1");
        form.setName("Ken");
        form.setEmail("ken@mail.coml");

        mav.addObject("employeeForm", form);
        mav.setViewName("employee");

        return mav;
    }

}

创建View（HTML）

1. 选择「文件」->「新建」->「其他」菜单

image.png

请选择”HTML文件”，然后点击”下一步”按钮。

image.png

在「文件夹」和「文件名」框内输入，点击“完成”按钮。

image.png

生成代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>
<h1>Hello, Spring Boot!</h1>

<form th:action="@{/show}" th:object="${employeeForm}" method="post">
    <table>
        <caption>
            <strong>従業員検索</strong>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td th:text="*{id}"></td>
                <td th:text="*{name}"></td>
                <td th:text="*{email}"></td>
            </tr>
        </tbody>
    </table>

    <p>Name (optional): <input type="text" th:field="*{name}" />
       <em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
    <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>

５．执行验证

使用快捷键“Alt+Shift+X” + B 来运行Spring Boot应用程序。

image.png

在浏览器的URL栏中输入http://localhost:8080/show

image.png
bannerAds