Java 學習記錄136 — 員工管理系統專案練習-Creating React App

今天要來建立前端

前置步驟有二

• NodeJs 官網下載 nodejs（安裝過程中，那個額外的工具應該不用打勾，幫我下載一堆東西，煩死）
• 老師的Github 下載 react-frondend 資料夾

照著老師的位置放進 react-frondend 後

我用 Intellij 內建的 Terminal（在下方）下指令

cd ..（退回上一層，因為我打開的時候是在 springboot-backend 的資料夾裡）

cd react-frondend（進到這資料夾）

npm start（啟動程序，我遇到的兩個 bug，解法在下方）

npm WARN config global --global, --local are deprecated. Use --location=global instead

‘react-scripts’ 不是內部或外部命令，也不是可執行的程式 或批處理檔案

接著瀏覽器跳出畫面就成功啦，會看到老師弄好的畫面

我此次只會專注在後端，前端就直接用老師現成的

到 EmployeeController.java

新增 @CrossOrigin(origins = "http://localhost:3000")

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/api/v1/")
public class EmployeeController {

看你瀏覽器跳出的前端畫面，上面 url 是多少就照填

剛剛只有畫面，現在應該出現了資料

網頁最下方的 footer 會看到 All Rights Reserved 2020 @JavaGuides

若是想要改成自己名子的話，可以到 src/components 的 FooterComponent.jsx

找到這行 <span className="text-muted">All Rights Reserved 2020 @JavaGuides</span>

把字改成自己想要的內容即可

參考項目來源