[Spring] 2. Web開発の基礎

15506 ワード

web Spring MVC テキストリンク

󙀸Spring入門-コード学習を使用したSpring Boot、Web MVC、DBアクセス技術⌟(金英漢、インフラストラクチャ)
△カリキュラムの資料をまとめ、抜粋し、金英漢講師の理解を得て編纂した.

Web開発方法

静的コンテンツ

サーバ上の

は、動作しないファイルを提供します.

ウェルカムページ

MVCとテンプレートエンジン

jsp、phpでhtml

を動的に降格

model, template(view), controller -> MVC

サーバhtmlをドロップダウンメニュー

に変換

API

アンドロイドは、iPhoneクライアントとJSONというデータフォーマットで

とコミュニケーションをとる.

VUEは、Reactでデータをダウンロードするだけでクライアントが自分で描画します.

サーバ間で通信する場合と同様にhtmlではなくデータが必要な場合にのみ適用されます.

静的コンテンツ

controller

java/hello/hellospring/controller/HelloController.java

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello"; // resources/templates/"hello" 찾아서 렌더링
    }
}

resources/static

サブエントリのhtmlファイル応答

resources/static/hello-static.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Hello</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>
<body>
정적 컨텐츠 입니다.
<a href="/hello">hello</a>
</body>
</html>

アクション

1.検索ウィンドウでの検索http://localhost:8080/hello-static.html
2.内蔵Tomcatサーバは、要求を受け入れてスプリングに渡します.
3.controllerでhello-staticとマッピングを確認する
4.ない場合は、リソース/静的でチェックして戻ってください

MVCとテンプレートエンジン

MVC

モデル:アプリケーションを表す情報(データ);

ビュー:

ユーザーインタフェース要素(テキスト、チェックボックス項目など)

コントローラ:データとビジネスロジックとの相互作用を管理する

参照)wiki-モデル-ビュー-コントローラ2

Controller

java/hello/hellospring/controller/HelloController.java

@Controller
public class HelloController {

    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello"; // resources/templates/"hello" 찾아서 렌더링
    }

    @GetMapping("hello-mvc")
    public String helloMvc(@RequestParam(value = "name") String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }
    // 단축키: 커맨드 + P -> 파라미터 정보 볼 수 있다.
    // required true 이면 기본으로 값을 넘겨야 한다.
    // http://localhost:8080/hello-mvc?name=spring!!!!!! -> hello spring!!!!!! 출력
}

html

resources/templates/hello-template.html

<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- $ 는 Model 에서 값을 꺼낸다. -->
<p th:text="'hello ' + ${name}">hello! empty</p>
<!-- absolute path 로 검색창에 복사해서 치면 -> html 을 서버 없이 그대로 봐도 결과물을 볼 수 있다. -->
<!-- 서버가 동작하면 값으로 치환된다. -->
</body>
</html>

アクション

1.検索ウィンドウでの検索http://localhost:8080/hello-mvc?name=spring
2.内蔵Tomcatサーバは、要求を受け入れてスプリングに渡します.
3.コントローラでhello-mvcとのマッピングを見つけ、「hello-mtemplate」に戻る
4.viewResolver(テンプレートエンジンを参照して接続)のtemplates/hello-template.html(Thymeleafテンプレートエンジン処理)
5.レンダリングされたhtmlをクライアントに渡します.

API

Controller

java/hello/hellospring/controller/HelloController.java

@Controller
public class HelloController {
    @GetMapping("hello-api")
    @ResponseBody   // 객체 반환하고 응답으로 지정하면 기본이 JSON 형식으로 반환 지정, xml 로 바꾸는 것도 가능하지만 비추
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name);
        return hello;
        // JSON 으로 반환 {"name":"spring!!!"}
    }

    static class Hello {
        private String name;

        // 자바 bean 규약
        // command + N > Getter and Setter 로 자동 생성
        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }
}

アクション

1.検索ウィンドウでの検索http://localhost:8080/hello-api
2.内蔵Tomcatサーバは、要求を受け入れてスプリングに渡します.
3.controllerで@ResponseBodyを確認し、そのままhttp応答に伝えるべきであることを認識する.
4.HttpMessageCoverterによって操作されます.(前のviewResolverではなく)
5.http応答に値を入れて返します.