Skip to content
Published on

Spring Bootを活用したシンプルなMVC Webアプリの作成

🇰🇷KO🇺🇸EN🇯🇵JA
Authors

Spring Bootを活用してMVC構造を持つWebアプリケーションを作成してみましょう。 以前（JSP時代）には、M（Model）、V（View）、C（Controller）の区分なく、Viewですべてのロジックを処理していた時代がありました。 シンプルなページであればこの構造でも問題ありませんが、複雑なWebの場合、JSP文法で記述されたWebページファイルが数千行を軽く超えてしまい、時間が経つにつれて機能追加やメンテナンスが困難になります。このため、現在では以前のModel1（MV）構造よりも、ViewとControllerを分離したMVCパターンで開発を行います。

今回の投稿では、前回のSimple Spring Boot Application作成で作成したプロジェクトにhello-mvcコントローラを追加し、Spring BootでMVC構造をどのように実装するかを見ていきます。

Hello Webページ

Hello Controllerの修正

HelloController.javaに以下のようなhelloMvc関数を定義します。コントローラがhello-templateという文字列をreturnすると、SpringのviewResolverがテンプレートファイルからその文字列に一致するテンプレートを探してくれます。

HelloController.java
    @GetMapping("hello-mvc")
    public String helloMvc(@RequestParam("name") String name, Model model){
        model.addAttribute("name", name);
        return "hello-template";
    }

hello-template.htmlの修正

hello-template.htmlファイルを以下の内容で作成します。

hello-template.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello template</title>
</head>
<body>
<p th:text="'hello ' + ${name}" >hello! empty</p>
</body>
</html>

hello-mvc Webページの確認

Springを再起動した後、localhost:8080の後にhello-mvc URLにアクセスし、'name'パラメータとして'chaos'を渡すと（例：http://localhost:8080/hello-mvc?name=chaos）、Controllerがこの情報をviewに渡し、予想通り`hello chaosが以下のように出力されることを確認できます。ChromeでF12`キーを押してページソースを確認すると、HTMLが正しく生成されていることがわかります。

hello_mvc_checking

Hello API

Hello Controllerの修正

HTMLファイルをreturnする状況もありますが、HTMLではなくJSONデータのみをReturnするAPIだけを提供する場合はどうすればよいでしょうか？

HelloController.javaに以下のようなHelloオブジェクトを定義します。

HelloController.java
        static class Hello{
        private String name;

        public String getName() {
            return name;
        }

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

そしてhelloApi関数を以下のように定義します。以前は文字列をリターンしましたが、今回はオブジェクトをリターンします。今回は@ResponseBodyを付けてオブジェクトをリターンしたため、viewResolverの代わりにHttpMessageConverterとその内部のJsonConverter（MappingJackson2HttpMessageConverter）が動作します。これにより、HTTP BodyにそのオブジェクトがJSON形式で格納されてユーザーにReturnされます。

HelloController.java
    @GetMapping("hello-api")
    @ResponseBody
    public Hello helloApi(@RequestParam("name") String name){
        Hello hello = new Hello();
        hello.setName(name);
        return hello;
    }

hello-apiの動作確認

localhost:8080の後にhello-api URLにアクセスし、'name'パラメータとして'chaos'を渡すと、今回はHTML形式ではなく、JSONタイプのデータがリターンされたことを確認できます。

hello_api_checking

References

Discuss on Twitter • View on GitHub