チュートリアルの春BOOT2シリーズ（XII）|統合thymeleaf

序文

その場合は、今日はThymeleafを導入し、学生情報管理システムの基本的なバージョンを開発Thymeleafを統合します。

SpringBootは、テンプレートエンジンの数を提供Freemarkerの、Groovyの、Thymeleaf、速度と口ひげが含まれ、SpringBootはThymeleafは完璧SpringMVCのサポートを提供しているため、テンプレートエンジンThymeleafとして使用することをお勧めします。Thymeleafは、Javaのテンプレートエンジンの新世代ですが、それは春の4の後に推奨されます。

テンプレートエンジンとは何ですか？

Thymeleafはテンプレート言語です。テンプレート言語やテンプレートエンジンとは何ですか？データ（データ）、テンプレート（テンプレート）、テンプレートエンジン（テンプレートエンジン）と結果の文書（結果文書）：共通言語テンプレートは、以下の概念が含まれています。

• データ
  データは、表現やベクトル情報シンボル、言葉、図形、音声、画像や動画もあります。データや情報が不可分である、発現データ情報は、データ情報が含蓄あります。センスデータ自体、実際の行動への影響は情報となるデータのみを行いません。
• テンプレート
  テンプレート、クラスのタイプとは何の関係もありません青写真。型固有のクラスを取得するために、テンプレートに従ってテンプレート引数をインスタンス化するテンプレートコンパイラを使用している場合。
• テンプレートエンジン
  テンプレートエンジンは（ここでは特にWeb開発テンプレートエンジン用）の分離に起因するユーザーインターフェースとビジネスデータ（コンテンツ）を作ることです、それはサイトのドキュメント固有のフォーマットを生成することができますテンプレートエンジンを生成します。標準のHTML文書。
• 結果は文書化し
  、そのようなテンプレートエンジンのためのサイトとして特定の形式の文書は、標準的なHTML文書を生成します。

用途のテンプレート言語幅広い次のように、一般的な用途は以下のとおりです。

• ページのレンダリング
• ドキュメント生成
• コード生成
• すべての「データ+テキストテンプレート=」アプリケーションのシナリオ

Thymeleafプロフィール

Thymeleafは、それは、それはMVC Webアプリケーションのビュー層として用いることができるXML / XHTML / HTML5テンプレートエンジンで、Javaクラスライブラリです。

ThymeleafもSpringMVCと統合する追加モジュールを提供していますので、我々は完全にJSPを置き換えるThymeleafを使用することができます。

Thymeleaf文法

ブログ情報：のhttp：//www.cnblogs.com/nuoyiamy/p/5591559.html
公式ドキュメントします。http：//www.thymeleaf.org/documentation.html

SpringBoot統合Thymeleaf

以下の統合Thymeleafは、学生情報管理システムSpringBootの初歩的なバージョンを開発しています。

仕事への準備ができて1、

• 考え
• JDK1.8
• SpringBoot2.1.3

2、のpom.xmlに依存します

<dependencies>
        <!-- JPA 数据访问 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- thymeleaf 模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- web 启动类 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- mysql 数据库连接类 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
</dependencies>

3、application.yaml設定ファイル

spring:
  # 数据库相关
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC&useSSL=true
    username: root
    password: 123456
  # jpa 相关
  jpa:
    hibernate:
      ddl-auto: update   # ddl-auto: 第一次启动项目设为 create 表示每次都重新建表，之后设置为 update
    show-sql: true

4、エンティティ・クラス

@Data
@Entity
@AllArgsConstructor
@NoArgsConstructor
public class Student {

    @Id
    @GeneratedValue
    /**
     * 主键
     */
    private Long id;

    /**
     * 主键
     */
    private Long studentId;

    /**
     * 姓名
     */
    private String name;

    /**
     * 年龄
     */
    private Integer age;

    /**
     * 专业
     */
    private String major;

    /**
     * 宿舍
     */
    private String dormitory;

    /**
     * 籍贯
     */
    private String city;

    /*@Temporal(TemporalType.TIMESTAMP)//将时间戳，转换成年月日时分秒的日期格式
    @Column(name = "create_time",insertable = false, updatable=false, columnDefinition = "timestamp default current_timestamp comment '注册时间'")
    private Date createDate;

    @Temporal(TemporalType.TIMESTAMP)//将时间戳，转换成年月日时分秒的日期格式
    @Column(name = "update_time",insertable = false, updatable=true, columnDefinition = "timestamp default current_timestamp comment '修改时间'")
    private Date updateDate;*/

}

5、dao 层

@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
}

6、サービス層

public interface StudentService {

    List<Student> findStudentList();

    Student findStudentById(Long id);

    Student saveStudent(Student student);

    Student updateStudent(Student student);

    void deleteStudentById(Long id);

}

クラスの実装：

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentRepository studentRepository;

    /**
     * 查询所有学生信息列表
     * @return
     */
    @Override
    public List<Student> findStudentList() {
        Sort sort = new Sort(Direction.ASC,"id");
        return studentRepository.findAll(sort);
    }

    /**
     * 根据 id 查询单个学生信息
     * @param id
     * @return
     */
    @Override
    public Student findStudentById(Long id) {
        return studentRepository.findById(id).get();
    }

    /**
     * 保存学生信息
     * @param student
     * @return
     */
    @Override
    public Student saveStudent(Student student) {
        return studentRepository.save(student);
    }

    /**
     * 更新学生信息
     * @param student
     * @return
     */
    @Override
    public Student updateStudent(Student student) {
        return studentRepository.save(student);
    }

    /**
     * 根据 id 删除学生信息
     * @param id
     * @return
     */
    @Override
    public void deleteStudentById(Long id) {
        studentRepository.deleteById(id);
    }
}

図7に示すように、制御層（Thymeleaf）を使用し

コントローラ層視点Thymeleaf。

@Controller
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private StudentService studentService;

    /**
     * 获取学生信息列表
     * @param map
     * @return
     */
    @GetMapping("/list")
    public String findStudentList(ModelMap map) {
        map.addAttribute("studentList",studentService.findStudentList());
        return "studentList";
    }

    /**
     * 获取保存 student 表单
     */
    @GetMapping(value = "/create")
    public String createStudentForm(ModelMap map) {
        map.addAttribute("student", new Student());
        map.addAttribute("action", "create");
        return "studentForm";
    }

    /**
     * 保存学生信息
     * @param student
     * @return
     */
    @PostMapping(value = "/create")
    public String saveStudent(@ModelAttribute Student student) {
        studentService.saveStudent(student);
        return "redirect:/student/list";
    }

    /**
     * 根据 id 获取 student 表单，编辑后提交更新
     * @param id
     * @param map
     * @return
     */
    @GetMapping(value = "/update/{id}")
    public String edit(@PathVariable Long id, ModelMap map) {
        map.addAttribute("student", studentService.findStudentById(id));
        map.addAttribute("action", "update");
        return "studentForm";
    }

    /**
     * 更新学生信息
     * @param student
     * @return
     */
    @PostMapping(value = "/update")
    public String updateStudent(@ModelAttribute Student student) {
        studentService.updateStudent(student);
        return "redirect:/student/list";
    }

    /**
     * 删除学生信息
     * @param id
     * @return
     */
    @GetMapping(value = "/delete/{id}")
    public String deleteStudentById(@PathVariable Long id) {
        studentService.deleteStudentById(id);
        return "redirect:/student/list";
    }
}

下では単にビューにバインドデータに、ModelMapオブジェクトを置きます。のリソース/テンプレート内の文字列に対応するテンプレートディレクトリ名を返します。@ModelAttribute注釈は、データ・ページのフォームフォームの送信を取得するために使用され、学生のデータへのバインドがオブジェクトです。

8、studentForm形

これは、フォームが生徒の情報を登録または変更するために使用されるフォームを定義します。

<form th:action="@{/student/{action}(action=${action})}" method="post" class="form-horizontal">

        <div class="form-group">
            <label for="student_Id" class="col-sm-2 control-label">学号:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_Id" name="name" th:value="${student.studentId}"
                       th:field="*{student.studentId}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_name" class="col-sm-2 control-label">姓名:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_name" name="name" th:value="${student.name}"
                       th:field="*{student.name}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_age" class="col-sm-2 control-label">年龄:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_age" name="name" th:value="${student.age}"
                       th:field="*{student.age}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_major" class="col-sm-2 control-label">专业:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_major" name="name" th:value="${student.major}"
                       th:field="*{student.major}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_dormitory" class="col-sm-2 control-label">宿舍:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_dormitory" name="name" th:value="${student.dormitory}"
                       th:field="*{student.dormitory}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="student_city" class="col-sm-2 control-label">籍贯:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="student_city" name="writer" th:value="${student.city}"
                       th:field="*{student.city}"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-10">
                <input class="btn btn-primary" type="submit" value="提交"/>&nbsp;&nbsp;
                <input class="btn" type="button" value="返回" onclick="history.back()"/>
            </div>
        </div>
    </form>

9、studentList学生一覧

生徒の情報を表示します：

<table class="table table-hover table-condensed">
        <legend>
            <strong>学生信息列表</strong>
        </legend>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>宿舍</th>
            <th>籍贯</th>
            <th>管理</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="student : ${studentList}">
            <th scope="row" th:text="${student.studentId}"></th>
            <td><a th:href="@{/student/update/{studentId}(studentId=${student.id})}" th:text="${student.name}"></a></td>
            <td th:text="${student.age}"></td>
            <td th:text="${student.major}"></td>
            <td th:text="${student.dormitory}"></td>
            <td th:text="${student.city}"></td>
            <td><a class="btn btn-danger" th:href="@{/student/delete/{studentId}(studentId=${student.id})}">删除</a></td>
        </tr>
        </tbody>
    </table>

結果ページ

リストページ：学生情報を登録する]ボタンをクリックしてください

登録/変更学生情報ページ：データベースへの学生情報のポイントを保存するために提出したページのリストを返します

データリストページがあります。削除生徒の情報への削除をクリックし、学生情報ページを変更することがあり、登録/変更にジャンプするには、名前をクリックしてください

ソースのダウンロード

githubのアドレスします。https：//github.com/turoDog/Demo/tree/master/springboot_thymeleaf_demo

遂に

あなたがここに表示された場合、あなたはこの記事を気に入って、前方に、親指ください。マイクロチャンネルサーチ「良いバスケットケース」、懸念は「返信した後、1024年には、」あなたのJavaチュートリアルの完全なセットを提供します。