iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
永豐金融APIs

30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站系列 第 3

[Day 03] - Spring Boot 前置作業

在寫完文章後,我沒按儲存草稿,而是直接發表文章,為什麼我這麼傻
結果:
https://ithelp.ithome.com.tw/upload/images/20210918/201289731K8LR0GlGZ.png

回上一頁還救不回來,
一直怒按F5,但也沒用,
冷靜......只好趁還有記憶重寫一遍.....

好,大家好,昨天Mongo的環境也建好了
今天就來準備後端,

開發後端程式用的IDE我選擇Visual Studio Code (以下簡稱VS Code)
作為一款免費IDE,上面提供了許多由微軟、紅帽等公司及各路善心人士開發的Extenstion,
只要安裝了適合的Extension,我覺得其功能完全不遜於付費IDE,
之後到前端的部分,我應該也會繼續以Visual Studio Code來開發

安裝好之後
首先打開VS Code
點選右邊工具欄的Extension
https://ithelp.ithome.com.tw/upload/images/20210918/20128973WqciNyb0C6.png

安裝以下幾樣plugin

Extension Pack for Java
Language Support for Java(TM) by Red Hat
Lombok Annotations Support for VS Code
Spring Boot Extension Pack
Visual Studio IntelliCode

其中Language Support for Java(TM) by Red Hat 需要使用jdk11,
可以先java -version確認一下自己電腦裡的jdk是什麼版本

接下來,在VS Code按下快捷鍵ctrl+shift+p
輸入spring
https://ithelp.ithome.com.tw/upload/images/20210918/20128973vLeoZhLyVb.png
選擇 Spring Initializr: Create a Maven Project…
就可以開始準備建立spring boot專案囉

版本我選擇2.5.4
https://ithelp.ithome.com.tw/upload/images/20210918/20128973HlSpIUFOPH.png
語言選java
https://ithelp.ithome.com.tw/upload/images/20210918/20128973809N0AQz5y.png
Group id跟artifact id 就自由發揮
打包方式選jar,之後要包成image比較方便
https://ithelp.ithome.com.tw/upload/images/20210918/20128973Qdrd11xesf.png
java版本就選11
https://ithelp.ithome.com.tw/upload/images/20210918/20128973q0gRHUJhhQ.png

dependency選

Spring Web
Lombok
Spring Boot DevTools
Spring Security
Spring Data MongoDB
https://ithelp.ithome.com.tw/upload/images/20210918/20128973KGLHj1DFSX.png

大概先這樣,我們在這邊的選擇就只是透過工具把dependency自動寫到pom.xml裡面,
所以後面有需要用到別的dependency就再手動在pom.xml補上去就行了

選完enter之後選擇一個你想存放這個專案的目錄
存完檔後右下角會跳出open的按鈕
https://ithelp.ithome.com.tw/upload/images/20210918/20128973qJbnYH00vd.png
按下去會幫你開啟這個專案

總之先執行看看吧!
左上角Terminal點New Terminal
https://ithelp.ithome.com.tw/upload/images/20210918/20128973G34u8yoNK0.png

會在下方新增一個terminal的小視窗
https://ithelp.ithome.com.tw/upload/images/20210918/20128973H9wpNIAxlx.png

輸入

./mvnw spring-boot:run

將spring-boot運行起來
很多人可能會疑問,不是mvn嗎,為什麼是mvnw?

mvnw是springboot自帶的maven-wrapper插件,
https://ithelp.ithome.com.tw/upload/images/20210919/20128973krPweiVu5M.png
有了mvnw 我們就不用再特別在local環境安裝maven了,很方便
當然,如果本來就有裝maven了,也可以輸入

./mvn spring-boot:run

在termnial可看到Spring boot運作的log
https://ithelp.ithome.com.tw/upload/images/20210918/20128973IFLtduZCkW.png
從中我們可以看到,

  1. Spring Boot是以綁定的Tomcat Server(9.0.52)來運作的,預設port是8080
  2. 在我還沒設定連線資訊的情況下,啟動時,就已經會以Mongo DB的預設port 27017做連線
    (當下我有開著Mongo的Container,後來測試,沒開Mongo的話,Spring Boot會因為連不到資料庫啟動失敗)
  3. Spring Security的預設密碼有被印在log裡,等下可以用
  4. LiveReload是Spring Boot DevTools綁定的工具,預設是開啟的,在修改靜態頁面時,可以透過LiveReload Server跟瀏覽器溝通,讓瀏覽器自行刷新頁面(瀏覽器也要安裝LiveReload的plug-in才行),這個我覺得我用不太到,先不理它

在瀏覽器輸入localhost:8080
https://ithelp.ithome.com.tw/upload/images/20210918/20128973U78Nap3mRw.png

出現這個畫面就表示我們Spring Boot的專案已經初步建置成功囉

帳號輸入user
密碼輸入log看到的密碼
就可以成功登入看到Spring Boot預設的白頁
https://ithelp.ithome.com.tw/upload/images/20210918/201289731WMkmnAcui.png

要把spring-boot停下來的話在terminal裡面按ctrl+c終止執行就可以了

另外,也可以透過右下角的spring boot dashboard來啟停spring boot
https://ithelp.ithome.com.tw/upload/images/20210918/20128973ca8Bc6gpXk.png
提供了不習慣下指令的人另一種選擇

另外再補充一點,
按下ctrl+K+S,可以設定VS Code的快捷鍵
我有將Quick Fix改成 alt+/
因為預設的會跟中文輸入法的逗號衝突
https://ithelp.ithome.com.tw/upload/images/20210919/201289734abCKXFK2c.png

好的開始是成功的一半
今天就先到這裡吧!壓線趕上!呼!


上一篇
[Day 02] - Mongo DB環境建置
下一篇
[Day 04] - 用Spring Boot連接Mongo DB
系列文
30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站30

尚未有邦友留言

立即登入留言