npm start代表在正式環境
npm run dev代表在測試環境
ctrl+c 離開環境
登入測試
帳號:jack_body_parser_5
密碼:123
帳號:jacktestaccount 密碼:jack1234
帳號:我測試 密碼:jack1234
開啟mermaid: ctrl + shift + v
sequenceDiagram
participant U as User
participant F as Frontend
participant B as Backend
participant DB as Database
alt 註冊register
U->>F: 登入頁面點選註冊register<BR>在register頁面填寫完data後送出表單
F->>B:使用post方法http://localhost:3000/users
B->>DB: 確認無重複資料後建立資料
DB->>B:新建DATA到mongodb atlas,回傳
B->>F: 回傳JSON
F->>U: 成功註冊POP UP提示,導入回登入頁面
end
alt 登入login
U->>F: 用戶輸入帳號密碼
F->>B: 點選登入判斷帳號是否有存在資料庫<br>post方法http://localhost:3000/users/login
B->>DB: 去資料庫撈取對應的帳號進行比對
else 登錄成功
DB->>B: 發送用戶數據,<br>返回JSON格式{name,password,user_id}
B->>F: 身份驗證成功,<br>透過user/login 的回傳api,將_id,auth_token<br>儲存在使用者前端的localStorage
F->>U: 前台返回登入成功,<br>並跳轉到首頁並<br>自動請求api http://localhost:3000/users/user_id<br>透過抓取json裡面的name來顯示用戶名稱
else 登錄失敗
DB->>B: 無效憑據
B->>F: 身份驗證失敗
F->>U: 顯示錯誤消息
end