Successfully reported this slideshow.

Spring bootでweb 基本編

5

Share

1 of 25
1 of 25

Spring bootでweb 基本編

5

Share

Download to read offline

Description

Spring bootを使ったウェブシステム構築の基本

Transcript

  1. 1. 基本編
  2. 2. アジェンダ  はじめに  階層構造  Repositoryの実装  Serviceの実装  Controllerの実装  まとめ
  3. 3. はじめに  Spring Bootを使って、 実際に簡単なWebページを作成する。
  4. 4. 階層構造  下記の階層構造でシステムを構築する Controller ブラウザ Service Repository Database TemplateModel Entity Entity Entity Entity Model1.入力値を受け取る 2.ビジネスロジックを書く 3.データの取得・更新をする 4.データを返す 5.データを返す 6.HTMLに変換 実際に下の階層から 実装してみる
  5. 5. Repositoryの実装  Serviceから処理要求を受け取り、 Databaseに対してデータの取得・更新を行う Service Repository Database Entity Entity 3.データの取得・更新をする 4.データを返す
  6. 6. Repositoryの実装  商品のデータ(productテーブル)を制御するRepositoryと データの入れ物のEntityを作成 package sample.springbootweb.repository; /** productテーブルのRepository */ public interface ProductRepository { } package sample.springbootweb.model; /** productテーブルのEntity */ public class Product { } 「repository」パッケージに productテーブルの Repositoryを作成 「model」パッケージに productテーブルの Entityを作成
  7. 7. Repositoryの実装  ただのクラスをEntityに仕立てる /** productテーブルのEntity */ @Entity @Table(name="product") public class Product { /** 商品コード */ @Id public Integer productCode; /** 商品名 */ public String productName; /** 価格 */ public Integer price; } クラス宣言に@Entityを付けて、 Entityであることを明記 「product」テーブルの Entityであることを明記 それぞれのカラムに対応した フィールドを宣言 フィールド宣言に「@Id」を付けて、 このフィールドがPKであることを明記 ※便宜上、フィールドをpublic宣言している。 本来、フィールドはprivateであるべき。
  8. 8. Repositoryの実装  Productテーブルとサンプルデータ -- DDL create table product ( product_code int(5), product_name varchar(50), price int(10), primary key ( product_code ) ); --DML insert into product values( 1, 'ガム', 100 ); insert into product values( 2, 'アメ', 120 ); insert into product values( 3, 'チョコ', 150 );
  9. 9. Repositoryの実装  ただのクラスをRepositoryに仕立てる /** productテーブルのRepository */ public interface ProductRepository extends JpaRepository <Product, Integer> { } JpaRepositoryを拡張した インターフェースであることを明記 「product」テーブルの Repositoryであることを明記 PKはInteger(数値フィールド) であることを明記 JpaRepositoryには基本的なデータベース操作は宣言されていて、 カスタマイズの必要がなければ特に中身のないインターフェース宣言で良い(そんなケースは稀な気が・・・)
  10. 10. Serviceの実装  Controllerから処理要求を受け取り、 Repositoryに対してデータの取得・更新を行う Controller Service Repository Entity Entity Entity Entity 2.ビジネスロジックを書く 5.データを返す
  11. 11. Serviceの実装  商品関連のビジネスロジックを実行するServiceを作成 package sample.springbootweb.service.product; /** 商品関連のビジネスロジックを実行するService */ public class ProductService { } 「service」パッケージに 商品関連のパッケージ 「product」を作成
  12. 12. Serviceの実装  ただのクラスをServiceに仕立てる /** 商品関連のビジネスロジックを実行するService */ @Service public class ProductService { } クラス宣言に@Serviceを付けて、 Serviceであることを明記
  13. 13. Serviceの実装  Repositoryを呼び出す /** 商品関連のビジネスロジックを実行するService */ @Service public class ProductService { @Autowired ProductRepository productRepository; /** 商品一覧を返す */ public List<Product> getProductList() { List<Product> list = productRepository.findAll(); return list; } } 使用するRepositoryを宣言 Repositoryのメソッドを 呼び出してデータを取得 取得したデータを返却
  14. 14. Controllerの実装  ブラウザからの入力値を受け取り、 Serviceへ処理要求を出し、 結果をテンプレートに渡してHTMLをレンダリングさせる Controller ブラウザ Service TemplateModel Entity Entity Model1.入力値を受け取る 6.HTMLに変換
  15. 15. Controllerの実装  商品関連のページを制御するControllerを作成 package sample.springbootweb.app.product; /** 商品関連のページを制御するController */ public class ProductController { } 「app」パッケージに 商品関連のパッケージ 「product」を作成
  16. 16. Controllerの実装  ただのクラスをControllerに仕立てる /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { } クラス宣言に@Controllerを 付けて、Controllerであることを明記 URL「product」に対する Controllerとして関連付ける http://someserver/someapp/product/
  17. 17. Controllerの実装  リクエストとメソッドを関連付ける /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list() { return "product/list“; } } value値でURL「product」の ルート(/) Controllerとして関連付ける method値でHTTPメソッド「GET」に 関連付ける テンプレート「product/list.html」を 表示する
  18. 18. Controllerの実装  Serviceを呼び出す /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { @Autowired private ProductService productService; /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list() { return "product/list"; } } 使用するServiceを宣言
  19. 19. Controllerの実装  Serviceを呼び出す /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { @Autowired private ProductService productService; /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list(Model model) { List<Product> list = productService.getProductList(); model.addAttribute("productList", list); return "product/list"; } } 引数にModelを受け取る (ControllerとTemplateの架け橋) Serviceを呼び出す Serviceの実行結果を Modelに詰める
  20. 20. Controllerの実装  TemplateのHTMLを記述する <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>商品一覧</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> 商品一覧 </body> </html> テンプレートエンジン「Thymeleaf」で 使用するネームスペースの宣言 src¥main¥resources¥templates¥product¥list.html
  21. 21. Controllerの実装  テンプレートを作成する <body> 商品一覧 <table border="1"> <tr> <th style="background-color:#CCCCCC">Code</th> <th style="background-color:#CCCCCC">商品名</th> <th style="background-color:#CCCCCC">金額</th> </tr> <tr> <td>1</td> <td>ダミー商品</td> <td>50</td> </tr> </table> </body> 素のHTMLで見た目の確認をする HTMLをブラウザで開いて見た目の確認をする (デザイナーさんの仕事)
  22. 22. Controllerの実装  テンプレートを作成する HTMLをブラウザで開いてみる
  23. 23. Controllerの実装  動的部分を作成する <body> 商品一覧 <table border="1"> <tr> <th style="background-color:#CCCCCC">Code</th> <th style="background-color:#CCCCCC">商品名</th> <th style="background-color:#CCCCCC">金額</th> </tr> <tr th:each="product: ${productList}"> <td th:text="${product.productCode}">1</td> <td th:text="${product.productName}">ダミー商品</td> <td th:text="${product.price}">50</td> </tr> </table> </body> Modelに詰めたproductListを取り出し、 for-eachでループさせる Thymeleafで動的部分を実装する (エンジニアさんの仕事) 必要なEntityの要素を出力する
  24. 24. Controllerの実装  実行する Webサーバにアクセスする http://localhost:8080/product/
  25. 25. まとめ  各階層に応じた役割を意識し実装する Repository → データベース操作 Service → ビジネスロジックの実装 Controller → 画面制御  テンプレートはエンジニアは触らずデザイナーに任せる  入力値チェック、セッション管理、トランザクション制御 ・・・などなど、まだ触れていないことは色々

Description

Spring bootを使ったウェブシステム構築の基本

Transcript

  1. 1. 基本編
  2. 2. アジェンダ  はじめに  階層構造  Repositoryの実装  Serviceの実装  Controllerの実装  まとめ
  3. 3. はじめに  Spring Bootを使って、 実際に簡単なWebページを作成する。
  4. 4. 階層構造  下記の階層構造でシステムを構築する Controller ブラウザ Service Repository Database TemplateModel Entity Entity Entity Entity Model1.入力値を受け取る 2.ビジネスロジックを書く 3.データの取得・更新をする 4.データを返す 5.データを返す 6.HTMLに変換 実際に下の階層から 実装してみる
  5. 5. Repositoryの実装  Serviceから処理要求を受け取り、 Databaseに対してデータの取得・更新を行う Service Repository Database Entity Entity 3.データの取得・更新をする 4.データを返す
  6. 6. Repositoryの実装  商品のデータ(productテーブル)を制御するRepositoryと データの入れ物のEntityを作成 package sample.springbootweb.repository; /** productテーブルのRepository */ public interface ProductRepository { } package sample.springbootweb.model; /** productテーブルのEntity */ public class Product { } 「repository」パッケージに productテーブルの Repositoryを作成 「model」パッケージに productテーブルの Entityを作成
  7. 7. Repositoryの実装  ただのクラスをEntityに仕立てる /** productテーブルのEntity */ @Entity @Table(name="product") public class Product { /** 商品コード */ @Id public Integer productCode; /** 商品名 */ public String productName; /** 価格 */ public Integer price; } クラス宣言に@Entityを付けて、 Entityであることを明記 「product」テーブルの Entityであることを明記 それぞれのカラムに対応した フィールドを宣言 フィールド宣言に「@Id」を付けて、 このフィールドがPKであることを明記 ※便宜上、フィールドをpublic宣言している。 本来、フィールドはprivateであるべき。
  8. 8. Repositoryの実装  Productテーブルとサンプルデータ -- DDL create table product ( product_code int(5), product_name varchar(50), price int(10), primary key ( product_code ) ); --DML insert into product values( 1, 'ガム', 100 ); insert into product values( 2, 'アメ', 120 ); insert into product values( 3, 'チョコ', 150 );
  9. 9. Repositoryの実装  ただのクラスをRepositoryに仕立てる /** productテーブルのRepository */ public interface ProductRepository extends JpaRepository <Product, Integer> { } JpaRepositoryを拡張した インターフェースであることを明記 「product」テーブルの Repositoryであることを明記 PKはInteger(数値フィールド) であることを明記 JpaRepositoryには基本的なデータベース操作は宣言されていて、 カスタマイズの必要がなければ特に中身のないインターフェース宣言で良い(そんなケースは稀な気が・・・)
  10. 10. Serviceの実装  Controllerから処理要求を受け取り、 Repositoryに対してデータの取得・更新を行う Controller Service Repository Entity Entity Entity Entity 2.ビジネスロジックを書く 5.データを返す
  11. 11. Serviceの実装  商品関連のビジネスロジックを実行するServiceを作成 package sample.springbootweb.service.product; /** 商品関連のビジネスロジックを実行するService */ public class ProductService { } 「service」パッケージに 商品関連のパッケージ 「product」を作成
  12. 12. Serviceの実装  ただのクラスをServiceに仕立てる /** 商品関連のビジネスロジックを実行するService */ @Service public class ProductService { } クラス宣言に@Serviceを付けて、 Serviceであることを明記
  13. 13. Serviceの実装  Repositoryを呼び出す /** 商品関連のビジネスロジックを実行するService */ @Service public class ProductService { @Autowired ProductRepository productRepository; /** 商品一覧を返す */ public List<Product> getProductList() { List<Product> list = productRepository.findAll(); return list; } } 使用するRepositoryを宣言 Repositoryのメソッドを 呼び出してデータを取得 取得したデータを返却
  14. 14. Controllerの実装  ブラウザからの入力値を受け取り、 Serviceへ処理要求を出し、 結果をテンプレートに渡してHTMLをレンダリングさせる Controller ブラウザ Service TemplateModel Entity Entity Model1.入力値を受け取る 6.HTMLに変換
  15. 15. Controllerの実装  商品関連のページを制御するControllerを作成 package sample.springbootweb.app.product; /** 商品関連のページを制御するController */ public class ProductController { } 「app」パッケージに 商品関連のパッケージ 「product」を作成
  16. 16. Controllerの実装  ただのクラスをControllerに仕立てる /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { } クラス宣言に@Controllerを 付けて、Controllerであることを明記 URL「product」に対する Controllerとして関連付ける http://someserver/someapp/product/
  17. 17. Controllerの実装  リクエストとメソッドを関連付ける /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list() { return "product/list“; } } value値でURL「product」の ルート(/) Controllerとして関連付ける method値でHTTPメソッド「GET」に 関連付ける テンプレート「product/list.html」を 表示する
  18. 18. Controllerの実装  Serviceを呼び出す /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { @Autowired private ProductService productService; /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list() { return "product/list"; } } 使用するServiceを宣言
  19. 19. Controllerの実装  Serviceを呼び出す /** 商品関連のページを制御するController */ @Controller @RequestMapping("product") public class ProductController { @Autowired private ProductService productService; /** 商品一覧を表示する */ @RequestMapping(value = "/", method=RequestMethod.GET) public String list(Model model) { List<Product> list = productService.getProductList(); model.addAttribute("productList", list); return "product/list"; } } 引数にModelを受け取る (ControllerとTemplateの架け橋) Serviceを呼び出す Serviceの実行結果を Modelに詰める
  20. 20. Controllerの実装  TemplateのHTMLを記述する <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>商品一覧</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> 商品一覧 </body> </html> テンプレートエンジン「Thymeleaf」で 使用するネームスペースの宣言 src¥main¥resources¥templates¥product¥list.html
  21. 21. Controllerの実装  テンプレートを作成する <body> 商品一覧 <table border="1"> <tr> <th style="background-color:#CCCCCC">Code</th> <th style="background-color:#CCCCCC">商品名</th> <th style="background-color:#CCCCCC">金額</th> </tr> <tr> <td>1</td> <td>ダミー商品</td> <td>50</td> </tr> </table> </body> 素のHTMLで見た目の確認をする HTMLをブラウザで開いて見た目の確認をする (デザイナーさんの仕事)
  22. 22. Controllerの実装  テンプレートを作成する HTMLをブラウザで開いてみる
  23. 23. Controllerの実装  動的部分を作成する <body> 商品一覧 <table border="1"> <tr> <th style="background-color:#CCCCCC">Code</th> <th style="background-color:#CCCCCC">商品名</th> <th style="background-color:#CCCCCC">金額</th> </tr> <tr th:each="product: ${productList}"> <td th:text="${product.productCode}">1</td> <td th:text="${product.productName}">ダミー商品</td> <td th:text="${product.price}">50</td> </tr> </table> </body> Modelに詰めたproductListを取り出し、 for-eachでループさせる Thymeleafで動的部分を実装する (エンジニアさんの仕事) 必要なEntityの要素を出力する
  24. 24. Controllerの実装  実行する Webサーバにアクセスする http://localhost:8080/product/
  25. 25. まとめ  各階層に応じた役割を意識し実装する Repository → データベース操作 Service → ビジネスロジックの実装 Controller → 画面制御  テンプレートはエンジニアは触らずデザイナーに任せる  入力値チェック、セッション管理、トランザクション制御 ・・・などなど、まだ触れていないことは色々

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

×