Thymeleaf + Springboot + Mybatis + MySQL + VSCodeーMyBatis

### MyBatis
##### MyBatisとは
　MyBatis はJavaならびに.NET Frameworkで利用可能な、XMLまたはアノテーションを用いてストアドプロシージャやSQL文をオブジェクトと紐付ける永続性フレームワークである。

---
##### MyBatisとMyBatis-Springを使用したDB Access Architecture
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/6a8e692c-07a5-4d81-233a-cdf1f56d5daa.png)

---
##### MyBatisを使用したData Access Layer
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/53b14b74-80dd-0d1f-4e60-918fc738b0db.png)

---
##### 実装＆動作確認
###### MyBatis使うための最小限の設定
　1\. application.propertiesまたはapplication.ymlにデータベースへのアクセス情報を追記する。

<table>
  <caption>データベースへのアクセス情報</caption>
  <thead>
    <tr>
      <th>No.</th> <th>設定項目</th> <th>説明</th> <th>例</th>
    </tr>
  </thead>
  <tr>
    <td> 1 </td> <td>spring.datasource.driver-class-name</td> <td>JDBC ドライバのクラス名</td> <td>postgreSQL: org.postgresql.Driver<br>h2: org.h2.Driver<br>MySQL: com.mysql.cj.jdbc.Driver<br>Oracle: oracle.jdbc.driver.OracleDriver</td>
  </tr>
  <tr>
    <td> 2 </td> <td>spring.datasource.url</td> <td>データベースの接続 URL</td> <td>jdbc:mysql://localhost:3306/testdb</td>
  </tr>
  <tr>
    <td> 3 </td> <td>spring.datasource.username</td> <td>データベースにアクセスするためのユーザー名</td> <td>root</td>
  </tr>
  <tr>
    <td> 4 </td> <td>spring.datasource.password</td> <td>データベースにアクセスするユーザーのパスワード</td> <td>root</td>
  </tr>
</table>

---
###### DTO、Mapperインターフェース、Mapper XML、ServiceとControllerの作成
　1\. DTOの作成
　　アプリケーションの下記パッケージに下記のようなMySQLのシステム時刻格納DTO（SystemDate.java）を作成する。
　　パッケージ：<strong>java:</strong>jp.co.picasoft.training.common.bean
```java:SystemDate.java
package jp.co.picasoft.training.common.bean;

import java.sql.Timestamp;

import com.fasterxml.jackson.annotation.JsonFormat;

import lombok.Data;

@Data
public class SystemDate {
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" ,timezone = "Asia/Tokyo")
    private Timestamp systemDate;
}
```

---
　2\. Mapperインターフェースの作成
　　アプリケーションの下記パッケージに下記のようなMySQLのシステム時刻取得用Mapperインタフェース（SystemDateMapper.java）を作成する。
　　パッケージ：<strong>java:</strong>jp.co.picasoft.training.common.mapper
```java:SystemDateMapper.java
package jp.co.picasoft.training.common.mapper;

import org.apache.ibatis.annotations.Mapper;

import jp.co.picasoft.training.common.bean.SystemDate;

@Mapper
public interface SystemDateMapper {
    public SystemDate getSystemDate();
}
```

---
　3\. MapperXMLの作成
　　アプリケーションの下記フォルダーに下記のようなMySQLのシステム時刻取得用Mapper XML（SystemDateMapper.xml）を作成する。
　　フォルダー：<strong>resources:</strong>jp/co/picasoft/training/common/mapper
```xml:SystemDateMapper.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="jp.co.picasoft.training.common.mapper.SystemDateMapper">
    <select id="getSystemDate" resultType="jp.co.picasoft.training.common.bean.SystemDate">
        SELECT SYSDATE() as system_date;
    </select>
</mapper>
```

---
　4\. Serviceの作成
　　アプリケーションの下記パッケージに下記のようなMySQLのシステム時刻取得用Mapperインタフェース（SystemDateService.java）を作成する。
　　パッケージ：<strong>java:</strong>jp.co.picasoft.training.common.service
```java:SystemDateService.java
package jp.co.picasoft.training.common.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import jp.co.picasoft.training.common.bean.SystemDate;
import jp.co.picasoft.training.common.mapper.SystemDateMapper;

@Service
public class SystemDateService {

    @Autowired
    private SystemDateMapper systemDateMapper;
    
    public SystemDate getSystemDate() {
        return systemDateMapper.getSystemDate();
    }
}
```

---
　5\. Controllerの作成
　　アプリケーションの下記パッケージに下記のようなMySQLのシステム時刻取得用Mapperインタフェース（SystemDateAPIController.java）を作成する。
　　パッケージ：<strong>java:</strong>jp.co.picasoft.training.common.service
```java:SystemDateAPIController.java
package jp.co.picasoft.training.api.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import jp.co.picasoft.training.common.bean.SystemDate;
import jp.co.picasoft.training.common.service.SystemDateService;

@RestController
@RequestMapping("/systemdate")
public class SystemDateAPIController {
    
    @Autowired
    private SystemDateService systemDateService;
    
    @GetMapping("/getsystemdate")
    public SystemDate getsSystemDate() {
        return systemDateService.getSystemDate();
    }
}
```

---
　6\. HTMLの修正
　　[Thymeleaf + Springboot + Mybatis + MySQL + VSCodeーThymeleafとVuejs V2の統合](https://qiita.com/training_zhang/items/84f5f0190e233459092e)で作成したHTML「vueinthymeleaf.html」のVUEのメソッド「setNameWithDateTime」を下記のように修正する。
```javascript:setNameWithDateTime
                setNameWithDateTime: function() {
                    axios.get('/systemdate/getsystemdate').then((res) => {this.name = res.data.systemDate});
                }
```

---
###### 動作確認
　ブラウザのアドレスバーに下記URLを入力して、Enterをクリックして、画面を表示される。ボタンをクリックして、テキストボックスにデータベースから取得したシステム時刻を設定される。
　URL：http://127.0.0.1:8080/greeting/vueinthymeleaf
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480807/84107607-dc78-b32d-9d76-0e2b4c2ce641.png)

---
##### まとめ
　本書では、結構シンプルを実装しました。皆さん参照して、自分のケースに活用してください。
　今回はSQL文をXMLファイルに記載されている。実は「annotation 」でも定義できる。
```java:例
package jp.co.picasoft.training.common.mapper;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import jp.co.picasoft.training.common.bean.SystemDate;

@Mapper
public interface SystemDateMapper {
    @Select("SELECT SYSDATE() as system_date")
    public SystemDate getSystemDate();
}
```