--- lang: zh tags: js,web,backend,express --- # Express 網頁後端建立 :::success 因為是運行在 node.js 環境下，因此先至 [官網](https://nodejs.org/en/) 下載安裝 node.js ::: ## NPM (Node Package Manager) :::info 首先 node.js 的專案管理大多依賴 npm 運行，因此先來了解一些 npm 的知識 ::: Node Package Manager 如其名是 node.js 的套件管理工具，可以用來安裝各種 node.js 的 套件、專案管理、開發工具、script 都包含在內 ### 建立專案 ``` $ npm init ``` 而從 npm 建立起來的專案中都會有下面三個內容 1. node_modules : 各種套件存放的地方 2. package.json : npm 環境下的各種設定 3. package-lock.json : 詳細記錄套件版本確保相容性問題 [詳細來由](https://ithelp.ithome.com.tw/articles/10191888) ### 推上 git 若將 npm 的專案推上 git，須設定 `.gitignore` 只將必要的文件推上去，`node_modules` 是不需要上去的，下次拉下來要重建專案時只需要在目錄下輸入 ``` $ npm install ``` 就會根據 `package-lock.json` 的內容去做套件安裝 ### 安裝套件: ``` $ npm install <package-name> --save ``` `npm install` 會到 [npm-registry](https://www.npmjs.com/) 上找符合 `<package-name>` 的套件下載下來安裝，而常會加入 `--save` 的參數，目的是可以讓其他相依的依賴套件一並寫入 `package-lock.json` 之中，方便之後恢復專案環境 ## Express [官方文件](https://expressjs.com/zh-tw/) :::info 靈活輕便的 node.js Web API 建置套件，個人認為很適合用來作為 RESTful API 的開發 ::: --- ### 安裝 + 首先建立一個 node.js 的專案 ``` $ npm init ``` + 安裝 express 的套件 ``` $ npm install express --save ``` + 基本範例 `index.js` ```javascript var express = require('express'); var app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000,() => { console.log('Example app listening on port 3000!'); }); ``` + 啟動程式 ``` $ node index.js ``` ### CORS 問題 ``` $ npm install cors --save ``` ```javascript var cors = require('cors'); app.use(cors()); ``` [expressjs/cors](https://github.com/expressjs/cors) 預設是允許全部，記得部屬上去正式機器要加入限制 IP，不要全部允許 #### 額外工具推薦 ==nodemon== ``` $ node install -g nodemon ``` > -g 是全域安裝，因此只要裝過一次，這台機器的所有專案都可以使用 每次更改程式碼都要重新 `node app.js` 一次實在有點麻煩，安裝這個之後用 `nodemon app.js` 來執行，每次更新存檔就會自動重啟一次 server 方便許多。 ==eslint== 用工具幫你統一程式碼風格 ``` $ npm install -g eslint ``` 安裝完之後輸入下面指令 ``` $ eslint --init ``` 回答一連串問題決定你的程式碼要遵循的風格，之後會幫你創建 `.eslintrc` 的檔案裏面就寫著剛剛回答的選項，也可以隨時更改。[更多規則參考](https://eslint.org/docs/rules/) > 建議搭配 vscode extendsion [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 來做使用 個人偏好規則 ```javascript= { "rules": { "indent": ["error", 4], "quotes": ["error", "double"], "semi": ["error", "always"], "space-infix-ops": ["error", { "int32Hint": false }], "key-spacing": ["error", { "beforeColon": false }], "curly": "error", "object-curly-spacing": ["error", "always"], "comma-spacing": ["error", { "before": false, "after": true }] } } ``` ==dotenv== 建立專案環境變數 ``` $ npm install dotenv --save ``` 安裝完之後，在專案底下建立 `.env` ``` NODE_ENV = 'development' PROJECT_NAME = 'express_test' ``` 然後在 js 裡使用 ```javascript require('dotenv').config(); // 調用這行就可以載入環境變數 console.log(process.env.NODE_ENV); console.log(process.env.PROJECT_NAME); ``` ==moment== 方便針對 datetime 的各種操作 --- ### 專案結構 額外加上幾個資料夾之後，結構上目前長這樣 + config: 設定檔 + helper: 各種小工具 + log: 就 log + model: 跟資料庫溝通 + routes: 路由分發以及初步資料驗證 + service: 共用的各種服務 + controller: 商業邏輯 ``` ├── config/ ├── controller/ ├── helper/ ├── log/ ├── models/ ├── node_modules/ ├── routes/ ├── service/ ├── .env ├── .eslintrc.json ├── .gitignore ├── index.js ├── package-lock.json └── package.json ``` ### Logger ==pino== 第三方打包好的 logger ==express-pino-logger== 針對 express 內容進行 pino log 的封裝，包含 request 跟 response 內容都完整包裝在內 ==pino-pretty== 美化 `pino` log 訊息內容，順便 format 時間資訊 ### 部署 + 這部分須再多加研究 [正式作業最佳作法：效能和可靠性](https://expressjs.com/zh-tw/advanced/best-practice-performance.html) ``` NODE_ENV = 'production' // 務必更改 LOG_LEVEL = 'info' // 不一定改成 info 視需要更改，至少不應在 debug level ``` ### Router #### 取得參數 ```javascript function(req, res){ req.query; // url: /passrecord/?page=1&rowsPerPage=15 可選參數 req.params; // url: /passrecord/:rowPerPage/:page 必選參數 req.body; // request-body 夾帶資料內容 } ``` ### 資料驗證 ==express-validator== [官方文件](https://express-validator.github.io/docs/) ### Authentication [[譯]您閱讀的 Nodejs/Express.js 驗證機制教學(很可能)錯了](https://andyyou.github.io/2017/09/06/your-nodejs-authentication-probably-wrong/) ※沒太多時間研究 ### RESTful API 設計 [API 實作(一)：規劃 RESTful API 要注意什麼](https://noob.tw/restful-api/) [簡明RESTful API設計要點](https://tw.twincl.com/programming/*641y) [HTTP 狀態碼](https://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81) ### 資料庫溝通請看: [Sequelize 初學](https://hackmd.io/sB3qYzLrS1qOUVAWwmg0IA)