Vue 練習作品 - 飲食紀錄網站 Healthy Journey

主要功能：計算TDEE並且記錄一天所攝取的熱量

Demo: https://my-healthy-journey.netlify.app/

• 測試帳號如下，也可以自行註冊一個帳號

  • 帳號: user01@test.com
  • 密碼: pwd123 （請勿更改密碼）

• 伺服器使用Render免費方案，因此第一次發送請求要等比較久，請見諒

使用技術

前端

• Vue3
• Vue-router
• Pinia
• Element UI
• axios
• sass

後端 https://github.com/kay1040/food-diary-backend

• Express.js
• MongoDB

頁面展示

首頁

首頁打字效果

註冊 / 登入

身體資料表單

註冊完成需填寫身體資料，以計算TDEE

使用者菜單

資料填寫完畢會跳轉到 User Information，可以點擊右上角 user icon 開啟使用者菜單跳轉頁面

飲食紀錄

計算一天所攝取的總熱量，再用TDEE扣除總熱量得到剩餘熱量

新增食物

串接USDA美國農業部API，可以點擊搜尋按鈕查詢食物的熱量

也可以自行輸入食物和熱量

編輯食物

刪除食物

每當切換月份就會從伺服器獲取資料

使用者資料

點擊編輯按鈕可以修改使用者資料，修改後會重新計算BMR及TDEE

變更密碼

登出

登出後清除local storage，並跳轉回首頁