Node.js-Tutorial

這裡是自學Node.js後端技術的小小天地~ 🖥️作品: 記帳本系統

前言

Node.js是一款開發Server後端很重要的應用程式，可以在上面跑JavaScript的程式，此專案設計一個記帳系統，具備以下功能:

WEB端
* 記帳本基礎頁面
* 結合MongoDB數據庫
* 註冊頁面Cookie-Sesssion驗證功能
* 對應網域和HTTPS
API端
* 記帳本Restful API返回JSON
* 結合MongoDB數據庫
* 登錄頁面Token校驗功能

環境建置

Node.js

安裝Node.js
* 默認安裝即可
終端機輸入node -v查看Node.js的版本
終端機輸入npm -v查看npm版本，他是用來管理Node.js的模組工具，通常安裝為Node.js就會自動幫你安裝npm

cd 專案目錄
npm init  //默認就按enter，會根據package.json設定，安裝node module   
npm install express //這裡安裝express npm模塊
code package.json//會看到dependencies多了"express": "^4.18.2"
cd node_modules  //會看到其他模塊因為express模塊也會用到其他模塊，也可觀察不同模塊的package.json
npm uninstall express  //進行卸載

Node.js版本管理工具NVM

安裝Node.js版本管理工具NVM(Node Version Manager)，來對不同版本的Node.js進行管理
* Linux/MacOS NVM
* Windows NVM

nvm version
nvm ls //用來查看nvm中已經安裝的Node.js版本
nvm ls available  //顯示官網上所有Node.js的版本，盡量選擇LTS(Long Term Service)長期維護版本進行安裝   
nvm install 20.4.0
nvm use 20.4.0  //進行Node.js的版本切換

MongoDB

下載地址: https://www.mongodb.com/try/download/community
建議選擇zip檔，適用性更強
配置步驟如下:

將壓縮包移動到C:\Program Files下，然後解壓縮
創建C:\data\db目錄，mongodb會將數據默認保存到這個文件夾
以mongodb中bin目錄作為工作目錄，啟動命令行
運行命令mongod啟動db server，看到最後的waiting for connections，則代表服務已經啟動
可另外開啟命令行測試服務端是否可行

Robo 3T (MongoDB GUI 工具)

下載地址: https://github.com/Studio3T/robomongo/releases

Postman

下載地址: https://www.postman.com/

VSCode Extensiom

vscode安裝以下幾個extension
在vscode中新增程式碼片段的設定

新增以下指令
　

若要多行註解可以ctrl+／

記帳本WEB端

註冊介面

WEB
輸入帳密，點擊註冊
顯示註冊成功提示介面，點擊跳轉可以進入登錄介面
MongoDB
DB: michelin & Collections: users，產生test帳號的資訊

登錄介面

登錄成功
輸入帳密，點擊登錄
顯示登錄成功提示介面，點擊跳轉可以進入記帳本列表
登錄失敗
輸入錯誤帳密，點擊登錄

顯示帳號密碼錯誤提示頁面

記帳本頁面

記帳本列表
顯示所有記帳本列表，點擊右上角紅色退出按鈕可以回到登錄頁面，點擊藍色添加帳單按鈕，開始記帳
添加帳單
(1) WEB端
跳轉至添加紀錄的頁面，可以依序填入事項、發生時間、類型(支出/收入)、金額、備註，最後點擊添加
顯示登入成功喔介面，點擊跳轉可以進入記帳本列表介面

 (2) MongoDB端
DB: michelin & Collections: accounts，產生早餐的資訊
刪除帳單
(1) WEB端
進入記帳本頁面，點擊想要刪除事項的右邊紅色框的地方
顯示是否要刪除的提示訊息，點擊確定
顯示成功喔介面，點擊跳轉可以進入記帳本列表介面


(2) MongoDB端
DB: michelin & Collections: accounts，早餐資訊已被刪除