尝试使用SpringBoot MVC实现一个简单的WEB应用

3 年 ago
雅, 悟
3 minutes

首先

株式会社ピーアールオー（希望能实现！）将迎来2022年的第7天圣诞节日历。
在前一天，由于[AWS]SAM 支持 TypeScript，花了5分钟就可以创建一个 API。

由于之前已经完成了Spring Boot + RemoteContainer的环境配置，并成功显示了HelloWorld，因此接下来将利用SpringMVC的功能来创建一个简单的Web应用程序。

构建.gradle

在 build.gradle 文件的 dependencies 中定义 Thymeleaf 等。
也可以使用 spring initializr 进行设置，没有问题。

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	developmentOnly 'org.springframework.boot:spring-boot-devtools'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
}
spring boot Dependencies説明ThymeleafテンプレートエンジンSpring Webweb表示に必要Spring Boot DevToolsjavaのソースコードが変更された際にspring boot を自動で再起動するための機能lombokコンストラクタ、ゲッター、セッターを自動で作るライブラリ

首页显示

在templates文件夹下创建index.html文件
在html标签中，预先定义Thymeleaf的模式。

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トップページ</title>
</head>
<body>
    <h1>Advent Calendar 2022</h1>
    <ul>
        <li>
            <!-- "@{/issues}" @ はthymeleafでリンクを表す記法 -->
            <!-- springboot 起動せずともhtmlを確認出来る。タイムリーフ挟まないナチュラルテンプレート -->
            <a href="./articles/article_list.html" th:href="@{/articles}">記事一覧</a>
        </li>
    </ul>
</body>
</html>

创建IndexController。

package com.example.its.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {
  
  // GET /
  @GetMapping("/")
  public String index() {
    // 前のパスの拡張子はSpringMVCが補完してくれるので書かなくてよい
    return "index";
  }

}
image.png

使用MVC功能

我在首页的HTML中写了一个链接，可以点击进入文章列表页面，所以需要创建一个跳转到该页面的页面。

实体

package com.example.its.domain.articles;

import lombok.AllArgsConstructor;
import lombok.Data;

//クラスの全てのフィールドを引数にとる。
@AllArgsConstructor
@Data
public class ArticleEntity {
  private long id;
  private String title;
  private String impressions;
}

服务

package com.example.its.domain.articles;

import java.util.List;
import org.springframework.stereotype.Service;

@Service
public class ArticleService {
  
  public List<ArticleEntity> findAll(){
    return List.of(
      new ArticleEntity(1,"Angular フォームボタンの無効について","very good"),
      new ArticleEntity(2,"Wingetで簡単！開発PCセットアップ（Windows）","very good"),
      new ArticleEntity(3,"DirectMLで試す、非NVIDIA系GPUで機械学習","very good"),
      new ArticleEntity(4,"Wingetで簡単！開発PCセットアップ（Windows）","very good"),
      new ArticleEntity(5,"DirectMLでStable Diffusionを動かしてみる","very good"),
      new ArticleEntity(6,"Googleカレンダーの当日予定をSlackに通知する","very good"),
      new ArticleEntity(7,"[AWS]SAMでTypeScriptがサポートされたので5分でAPIを作成する","very good")
    );
  }
}

控制器

package com.example.its.web.article;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.its.domain.articles.ArticleService;
import lombok.RequiredArgsConstructor;

@Controller
@RequiredArgsConstructor

public class ArticleController {
  // GET /issue
  
  private final ArticleService articleService;
  /**
   * 
   * @param model
   * @return 
   */
  @GetMapping("/articles")
  public String showList(Model model){
    model.addAttribute("articleList", articleService.findAll());
    return "articles/article_list";
  }
}

模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>記事一覧</title>
</head>
<body>
    <h1>記事一覧</h1>
    <a href="../index.html" th:href="@{/}">トップページ</a>
    <table>
        <thead>
            <tr>
                <th scope="col">タイトル</th>
                <th scope="col">感想</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="article : ${articleList}">
                <th scope="col" th:text="${article.title}">(title)</th>
                <td th:text="${article.impressions}">(impression)</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
image.png

结束

我能够使用Spring Boot创建一个简单的Web应用程序。因为还有很多我不知道的功能，所以我会继续探索。

我在使用VSCode，不过可能更好的是用IntelliJ吧。无论如何，我很满意最近搭建的环境能够运行。

请参考

Spring Boot + Spring MVC的示例应用实现。
【SpringBoot】创建Web应用
【Java】Thymeleaf基础（SpringBoot）

bannerAds