張小雄

前面已經完成跟驗證過第一隻 API 了

接著繼續寫,新增員工的 API

EmployeeController.java

// creat employee
@PostMapping("/employees")
public Employee createEmployee(@RequestBody Employee employee) {
return employeeRepository.save(employee);
}

寫完了,還滿簡單的吧

測試方法:

打開 Postman,記得改成 POST http://localhost:8080/api/v1/employees

在 Headers 裡新增一組

KYE:Content-Type

VALUE:application/json

接者在 BODY 裡,填上要新增員工的內容,例如:

{
"firstName": "Chris",
"lastName": "Evans",
"emailId": "Chris_Evans@gmail.com"
}

看到顯示 Status:200 OK

去資料庫看,應該會發現資料已經被新增了

--

--

今天要來建立前端

前置步驟有二

  • 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>

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

--

--

src/main/java/exception 新增檔案 ResourceNotFoundException.java

package exception;import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ResponseStatus;
@ResponseStatus(value = HttpStatus.NOT_FOUND)
public class ResourceNotFoundException extends RuntimeException {
public static final long serialVersionUID = 1L;
public ResourceNotFoundException(String message) {
super(message);
}
}

若數據庫查不到資料的話,就可以使用自定義Exception

返回給客戶端對應的狀態 HttpStatus.NOT_FOUND

--

--

承上篇

若不想把密碼存明文的話,想要把密碼加密的話

(這是個練習專案,不想弄的話可以直接跳過)

可以使用 Jasypt,並添加下面設定

打開 Maven 添加,並重新運行 Maven

<!-- https://mvnrepository.com/artifact/com.github.ulisesbocchio/jasypt-spring-boot-starter -->
<dependency>
<groupId>com.github.ulisesbocchio</groupId>
<artifactId>jasypt-spring-boot-starter</artifactId>
<version>2.0.0</version>
</dependency>

打開 application.properties 添加

spring.datasource.url=jdbc:mysql://localhost:3306/employee_management_system?useSSL=false
spring.datasource.username=數據庫帳號
spring.datasource.password=ENC(加密後密碼)
jasypt.encryptor.password=加密參數
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialectspring.jpa.hibernate.ddl-auto = update

線上取得加密密碼

左邊是加密,右邊是解密,使用左邊

Enter plain text to Encrypt:輸入密碼

Select Type of Encryption:選第二個

Secret Key To Be Used While Encryption:加密參數

輸入完成點 Encrypt

Encrypted String:把這裡出現的字串,複製貼上到 spring.datasource.password=ENC(貼在此處)

打開 SpringbootBackendApplication.java

添加 @EnableEncryptableProperties

@SpringBootApplication
@EnableEncryptableProperties
public class SpringbootBackendApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootBackendApplication.class, args);
}
}

接著運行,若沒出現 bug 就代表加密成功

但這樣其實也沒有百分之百安全

若對方也知道使用的是 Jasypt 的話

用線上網頁右邊即可有機會解密

為了防止其他人用加密參數解密

可以把加密參數那行刪掉

透過 Intellij 來添加至 VM參數

方法:點 Intellij 的右上角,找到運行 RUN鍵

點左邊的長框框,點 Edit Confriguration

找到 VM 那欄填入 -Djasypt.encryptor.password=加密參數

若沒看到 VM 欄位,點選 Modify option 找到 Java 點 Add VM options

密碼加密教學

我爬文還有一種方法是用服務器的環境變量來設定

參考文章(最後一段)

--

--

本章將開始進入實做專案的練習

實做項目:員工管理系統網站

參考項目

前端框架:React

後端框架:Spring Boot

Spring Boot 使用如下依賴

  • Spring Boot DevTools
  • Spring Web
  • MySQL Driver
  • Spring Data JPA

由於我是後端工程師,此次練習將專注在後端的部份

Spring Boot 初始配置設定

我的配置大致與影片相同

不同的地方是:Java 版本跟Spring Boot 版本

Java 版本:Amazon Corretto 11(用習慣了)

Spring boot 版本:Spring boot 2.7版(影片的版本已經選不到了)

建立 MySQL 資料庫:CREATE DATABASE employee_management_system;

打開 application.properties 添加

spring.datasource.url=jdbc:mysql://localhost:3306/employee_management_system?useSSL=false
spring.datasource.username=數據庫帳號
spring.datasource.password=數據庫密碼
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialectspring.jpa.hibernate.ddl-auto = update

--

--