Tech Hotoke Blog

IT観音とは私のことです。

Vue×SpringでSPA作成12【MyBatisの導入、Read処理~バックエンド偏~】

f:id:TechHotoke:20220218004406p:plain

まえがき

こちらの記事の続編です。

techhotoke.hatenablog.com

目的

VueとSpringで作成したプロジェクトの構築手順の備忘録。 備忘録のため、詳細な説明を省略している部分があります。

前提

  • 基本的なJavaの知識やSpringの知識があること
  • 基本的なJavaScriptの知識やVueの知識があること

環境

  • Java 11
  • Spring Boot2.5.6
  • Gradle 7.1.1
  • Vue2.6
  • IDE:InteliJ
  • AWS(EC2,RDS,ELBなど)

やること

  • MyBatisを導入する
  • DBの情報を一覧表示する

O/Rマッパー

O/RMapperとは、Object/Relational Mapperの略で、ざっくり言うとJava(Object)と 関係データベース(Relational)を紐付ける機能(Mapper)です。

表形式であるSQLの実行結果をどのようにJavaのクラスに当てはめるか、 またJavaから受け渡されたパラメータをどのようにSQLに反映するかといった設定をしておくことが出来ます。

これによりJavaのプログラムからSQLを発行して、実施結果を取得する際、 Java側はSQL部分を意識せずに処理を記述することができ、 逆にSQL側はJavaを意識せずにSQL文を記述できるのが利点です。

MyBatisとは?

数あるO/Rマッパーの中でもMyBatisはSQLラッパー型と呼ばれるものに分類され、xmlファイルにプレーンに近いSQLを記述することができます。

実装-バックエンド-

  • MyBatisの依存関係をbuild.gradleに追加します

implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0'

  • application.propertiesファイルに下記のような設定を追加します。コンソールに実行されたSQLが表示されるようにすることと、MyBatisのxmlファイルの配置場所を設定しています。
# SQL
logging.level.org.hibernate.SQL=debug
logging.level.org.hibernate.type.descriptor.sql.BasicBinder=trace
logging.level.jp.co.systemd.homeservices.domain.mapper=debug
spring.jpa.properties.hibernate.format_sql=true

#MyBatis
mybatis.mapper-locations=classpath*:/mapper/*.xml
  • DBに檀家の情報を格納するtbl_dankaを作成します(言及していませんでしたが、今作ろうとしているものは寺院向けのシステムです[趣味])

f:id:TechHotoke:20220217233415p:plain

  • 次に添付画像のようなディレクトリ構造でentityクラスを作成します。

f:id:TechHotoke:20220217235449p:plain

public class TblDankaEntity {

    private Integer dnkId;

    private Integer dnkTempleId;

    private String dnkSeshuName;

    private String dnkKoshuName;

    private String dnkKaihi;

    private String dnkKoshuName2;

    private String dnkAddress1;

    private String dnkAddress2;

    private String dnkBikou1;

    private String dnkBikou2;

    private String dnkBikou3;

    private String dnkPhonenumber1;

    private String dnkPhonenumber2;

    private String dnkEmail1;

    private String dnkEmail2;

    private String dnkHasBochi;

    private String createdAt;

    private String createdBy;

    private String updatedBy;

    private String isDeleted;

    private String updatedAt;

  // setter/getterは省略
}
@Mapper
public interface DankaMapper {
    List<TblDankaEntity> findAllDanka();
}
  • 続いて、applications.propertiesに設定したパス(今回はresources直下にmapperというフォルダを作成しその直下にxmlファイルを配置)にMayBatisのSQLを記載する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.tms.domain.mapper.DankaMapper">
    <select id="findOneByDankaId" resultType="jp.co.tms.domain.entity.TblDankaEntity">
        SELECT
            *
        FROM
            tbl_danka
    </select>
</mapper>
  • 続いてServiceクラスを作成します。
@Service
public class DankaService {
    @Autowired
    DankaMapper dankaMapper;

    public List<TblDankaEntity> findAllDankaList(){
        List<TblDankaEntity> dankaList = new ArrayList<>();

        dankaList = dankaMapper.findAllDanka();

        return dankaList;
    }

}
  • 次にControllerクラスを作成します。
@RestController
@RequestMapping("/api")
public class DankaContoller {
    @Autowired
    DankaService dankaService;

    @GetMapping("/danka")
    @ResponseBody
    public List<TblDankaEntity> getAllDanka(){

        return (List<TblDankaEntity>) dankaService.findAllDankaList();
    }
}
  • 最後にMyBatisの設定ファイルをresources直下に作成します。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
</configuration>
  • 上記の設定で、DBのカラム名がdnk_idでEntityクラスの変数名がdnkIdとなっている場合などの差異を自動的に埋めてくれます。他にも設定でいじれる部分は多くあるようですね〜。

MyBatis – MyBatis 3 | 設定

mybatis-spring-boot-starterの使い方 - Qiita

  • application.propertiesファイルに追加したxmlファイルを読み込むように追記
mybatis.config-location=classpath:/mybatis-config.xml

一応起動確認して今回のセットアップが何かしら影響を与えていないか確認してDONE。

今回はここまでです! お付き合いいただきありがとうございました。