【SpringBoot】MVCモデル

# MVCモデル

ツール：Eclipse

MVCモデルについて説明していきます。

一般的なMVCは以下です。()内はSpring Bootの場合			
|  |    |
| :--: | :--: |
| M	| モデル Model (Entity)	|	
|	| (Repository) |
| V	| ビュー View (thymeleaf) |		
| C	| コントローラ Controller  |	

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/e0848654-8081-4ec3-8389-afec9ba69de8.png)

## 実際に作成してみましょう。

### 1. コントローラを作成します。
com.example.demoを右クリック > 新規 > クラス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/c6acefad-7123-41dd-9c5e-04a2e021ef98.png)

### 2. 続けてモデルを作成します。
com.example.demoを右クリック > 新規 > クラス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/6f4ac3da-d336-4afa-a7f5-e612f941c4c9.png)

### 3.続けてリポジトリを作成します。
com.example.demoを右クリック > 新規 > クラス
※リポジトリの説明は後ほどします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/e7e3d31f-af45-4419-8e0c-ebda39e69719.png)

### 4.ビューを作成します。
/demo/src/main/resources/templatesを右クリック > 新規 > その他 > WEB > HTMLファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/d03726d7-9601-49f6-b91e-8850a4693940.png)

### 5.CSSフォルダを作成します。
/demo/src/main/resources/staticを右クリック > 新規 > フォルダ

### 6.CSSファイルを作成します。
/demo/src/main/resources/static/cssを右クリック > 新規 > その他 > WEB > CSSファイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279952/128d1f2a-4d93-456f-89d0-85fde4ce1afe.png)


それではそれぞれのファイルを編集していきます。

```diff_java:/demo/src/main/java/com/example/demo/DemoApplication.java
	package com.example.demo;
	
	import org.springframework.boot.SpringApplication;
	import org.springframework.boot.autoconfigure.SpringBootApplication;
-	import org.springframework.web.bind.annotation.GetMapping;
-	import org.springframework.web.bind.annotation.RestController;
	
	@SpringBootApplication // Spring Bootのアプリケーションクラス
-	@RestController
	public class DemoApplication {
	
	    public static void main(String[] args) {
// アプリケーション起動メソッド　アプリケーションクラスのインスタンスとパラメータを渡しています。      
	        SpringApplication.run(DemoApplication.class, args);
	    }
-	    
-	    @GetMapping()
-	    String index() {
-	        return "hello world!";
-       }
-	
	}
```

<br>

```diff_java:/demo/src/main/java/com/example/demo/Todo.java
	package com.example.demo;
+	
+	import jakarta.persistence.Column;
+	import jakarta.persistence.Entity;
+	import jakarta.persistence.GeneratedValue;
+	import jakarta.persistence.GenerationType;
+	import jakarta.persistence.Id;
+	import jakarta.persistence.Table;
+	
+	@Entity // エンティティを示すクラスに付けるアノテーション
+	@Table(name = "\"todos\"") // テーブルを指定するアノテーション
	public class Todo {
+	    
+	    @Id // エンティティクラスのフィールドをデータベースのプライマリーキー
+	    @GeneratedValue(strategy = GenerationType.IDENTITY) // 自動でIDを生成
+	    private Long id;
+	    
+	    @Column // DBカラムマッピング
+	    private String title;
+	    
+	    @Column // DBカラムマッピング
+	    private String memo;
+	    
+	    /*
+	     * getter・setter
+	     * getter : フィールドの値を取り出す
+	     * setter　： フィールドに値を設定する
+	     */
+	    
+	    public Long getId() {
+	        return id;
+	    }
+	
+	    public void setId(Long id) {
+	        this.id = id;
+	    }
+	
+	    public String getTitle() {
+	        return title;
+	    }
+	
+	    public void setTitle(String title) {
+	        this.title = title;
+	    }
+	
+	    public String getMemo() {
+	        return memo;
+	    }
+	
+	    public void setMemo(String memo) {
+	        this.memo = memo;
+	    }
+	
	}
	
```

<br>

```diff_java:/demo/src/main/java/com/example/demo/TodoRepository.java
	package com.example.demo;
+	
+	import org.springframework.data.jpa.repository.JpaRepository;
+	
-	public class TodoRepository {
+	//DBにアクセスするインターフェースを継承
+	public interface TodoRepository extends JpaRepository<Todo, Long> {
+	    //　カスタムクエリをここに追加することも可能
	}

```

Repository（リポジトリー）とは？ データベースの操作をするオブジェクトを保存するクラス


<br>

``` diff_java:/demo/src/main/java/com/example/demo/TodoController.java		
	package com.example.demo;	
+		
+	import org.springframework.stereotype.Controller;	
+	import org.springframework.web.bind.annotation.GetMapping;	
+	import org.springframework.web.bind.annotation.PostMapping;	
+	import org.springframework.web.servlet.ModelAndView;	
+		
+	@Controller	
	public class TodoController {	
+	    	
+	    private final TodoRepository repository; // final修飾子のフィールド変数	
+	    	
+	    //　コンストラクタ	
+	    public TodoController(TodoRepository repository) { 	
+	        this.repository = repository;	
+	    }	
+	    	
+	    @GetMapping() // GETリクエスト処理	
+	    public ModelAndView index () {	
+	        //  テンプレートで利用するデータと、Viewに関する情報を管理するオブジェクト	
+	        ModelAndView mav = new ModelAndView();	
+	        //　keyがtodosのViewで使用できるデータを追加       	
+	        mav.addObject("todos", repository.findAll());	
+	        // Viewファイル名を設定     	
+	        mav.setViewName("index");	
+	        return mav;	
+	    }	
+	    	
+	    @PostMapping() // POSTリクエスト処理	
+	    public String store (Todo todo) {	
+	        // 送られてきたtodoデータを保存	
+	        repository.save(todo);	
+	        // indexにリダイレクト	
+	        return "redirect:/";	
+	    }	
	}	
```

<br>

```diff_html:/demo/src/main/java/com/example/demo/TodoController.java			
	<!DOCTYPE html>		
	<html>		
	<head>		
+	    <meta charset="UTF-8">		
+	    <meta name="viewport" content="width=device-width, initial-scale=1.0">		
+	    <title>一覧画面</title>		
+	    <link th:href="@{/css/style.css}" rel="stylesheet">		
	</head>		
	<body>		
+	    <div class="container">		
+	        <h2>一覧画面</h2>		
+	        <form method="post" action="/">		
+	            <input type="text" name="title" placeholder="タイトルを入力...">		
+	            <br>		
+	            <textarea name="memo" rows="4" placeholder="メモを入力..."></textarea>		
+	            <br>		
+	            <button type="submit">追加</button>		
+	        </form>		
+	        <table>		
+	            <thead>		
+	                <tr>		
+	                    <th>#</th>		
+	                    <th>タイトル</th>		
+	                    <th>メモ</th>		
+	                </tr>		
+	            </thead>		
+	            <tbody>		
+	                <tr th:each="todo : ${todos}">		
+	                    <td th:text="${todo.id}"></td>		
+	                    <td th:text="${todo.title}"></td>		
+	                    <td th:text="${todo.memo}"></td>		
+	                </tr>		
+	            </tbody>		
+	        </table>		
+	    </div>		
	</body>		
	</html>		

```
<br>

```diff_css:/demo/src/main/resources/static/css/style.css
	@charset "UTF-8";	
+	 body {	
+	     font-family: Arial, sans-serif;	
+	     margin: 20px;	
+	     text-align: center;	
+	 }	
+	 .container {	
+	     max-width: 400px;	
+	     margin: 0 auto;	
+	 }	
+	 input[type="text"], textarea {	
+	     width: 80%;	
+	     padding: 8px;	
+	     margin: 10px 0;	
+	 }	
+	 button {	
+	     padding: 8px 12px;	
+	     cursor: pointer;	
+	 }	
+	 table {	
+	     width: 100%;	
+	     border-collapse: collapse;	
+	     margin-top: 20px;	
+	 }	
+	 th, td {	
+	     border: 1px solid #ddd;	
+	     padding: 8px;	
+	     text-align: left;	
+	 }	
+	 th {	
+	     background-color: #f4f4f4;	
+	 }	
```

アプリケーションを実行します。

http://localhost:8080/

で動作を確認して終了です。

次回はCRUDについてです。