我尝试了Spring Boot + Angular + MongoDB Rest API教程

2 年 ago

新, 韵

1 minute

首先

在我加入IT企业的第六个年头，虽然我没有惊人的开发经验，但我想尝试自己创作点什么。我向各个方面咨询时（遗憾的是没有得到任何想法），有位朋友告诉我：“你觉得这个怎么样？”

Spring Boot + Angular + MongoDB Rest API教程

在一個有點陳舊的英文網站上，我大概了解了前端、後端和資料庫這個應用程式的基礎。因為我從未嘗試過製作網頁應用程式，所以逐漸明白「原來需要進行這樣的工作」是一件有趣的事情（雖然在大規模的情況下可能又會有所不同）。

如果有人（是否会有人呢？）在备忘录下尝试做同样的事情，我觉得这可能会有用，所以我把它留下来。

环境 –

Eclipse Version: 2020-09 (4.17.0)

步骤1. 创建项目

我使用Spring Initialzr创建了一个Spring Boot应用程序的模板。尽管界面稍有变化，但我认为按照步骤进行操作应该没有问题。

使用 Spring Initializr 创建应用程序的模板。

步骤2. 配置MongoDB

我已经在本地设置了MongoDB。
您可以按照MongoDB官方的步骤进行设置。
由于我使用的是macOS，所以我使用brew进行设置。

我本来想在AWS的EC2上安装MongoDB并连接，但安装成功后却无法连接…请问有谁能帮忙教一下？（哭）
官方步骤：https://docs.mongodb.com/manual/tutorial/install-mongodb-on-amazon/

第三步。创建ToDo模型。

在注释（@NotBlunk、@Size）中出现错误。
经调查，将以下内容放入pox.xml中可以解决问题。

@Sizeの場合：
        <dependency>
           <groupId>javax.validation</groupId>
          <artifactId>validation-api</artifactId>
          <version>1.1.0.Final</version>
        </dependency>


@NotBlankの場合：
        <dependency>
          <groupId>org.glassfish</groupId>
          <artifactId>javax.el</artifactId>
          <version>3.0.1-b09</version>
        </dependency>

步骤四：创建控制器

为了解决@GetMapping中的错误，将”sortByCreatedAtDesc”的排序方式更改为按”createdAt”降序排列的方式，在代码中修改为Sort sortByCreatedAtDesc = Sort.by(Sort.Direction.DESC, “createdAt”)。

使用Maven按照步骤构建Java项目。
由于已安装Homebrew，可以使用brew install maven命令进行安装。
但是构建过程中遇到了BUILD FAILURE错误，根据参考资料对PATH等进行了修正。
Maven入门教程：https://qiita.com/tarosa0001/items/e5667cfa857529900216

步骤5. 创建控制器。

由于Angular使用了node.js，所以需要安装node.js。
按照手册使用Homebrew安装。
（参考）Angular CLI环境搭建方法（Mac环境）
如果遇到错误，请参考下面的Qiita协助解决。
（参考）使用Homebrew安装Node.js + 解决错误方法

步骤六：各种修正。

以下是上述内容的中文翻译：

1. 运行应用程序
2. 更改 AppComponent 的模板
3. 创建 Todo 类（todo.ts）
4. 创建 TodoListComponent（todo-list.component.ts）
· 使用 HttpModule（在最新版本中推荐使用 HttpClientModule）
5. 创建 TodoListComponent 的模板
6. 添加到 styles.css 中

只发生了一个情况，当我在Angular中遇到“Can’t resolve ‘rxjs/add/operator/toPromise’”时的应对方法。

第七步骤，终于来了！

步骤8. 结束

起初，在第7步骤时没有顺利地运行，经过各种调查最终也找不出原因，于是我决定停止所有操作，重新启动MongoDB、SpringBoot和Angular，结果顺利地进行了。

在某种程度上，我明白使用框架的意义，以及前端、后端和数据库之间的连接方式，所以我认为这次制作是成功的。我希望未来能多做一些实践，通过实践来熟悉这些知识。

#技术文章