2024-01-25|閱讀時間 ‧ 約 11 分鐘

後端框架與API 開發(一)

    ※ Express 專案初始化標準動作:

    Node.js 環境建置核對

    1. 安裝node.js, npm(Node.js的套件管理系統):

    安裝 Node.js 的方式除了可以直接從 Node.js 的官方網站 https://nodejs.org 下載安裝外,在實務開發上更常使用的是 Node Version Manager (nvm)。

    使用 nvm 的好處在於,它讓開發者可以在電腦上同時安裝並切換不同版本的 Node.js。這對於處理多個專案時非常有用,因為不同專案可能需要不同的 Node.js 版本。使用 nvm,你可以方便地切換版本,避免因版本不一致導致的錯誤。而如果不使用 nvm,而是直接從官網下載 Node.js,你將無法輕鬆切換版本,處理不同專案時可能會遇到許多麻煩。nvm 可以減少重複安裝和移除的麻煩,使開發更順利。

    1. 安裝Visual studio code

    ※ Windows 安裝 nvm

    • nvm 可至 nvm-windows 的 github 下載。點擊「Download Now」後就到了下載頁面。

    在這裡,選擇最新版本的nvm-setup.zip 檔案,下載解壓縮後安裝即可。安裝時,請注意路徑中不能有空白或中文,也就是說,如果安裝在 C:\Users\AC Genie 或 C:\Users\AC精靈 底下,執行時就會出問題。(如果你的電腦名稱中包含空白或中文,預設路徑就會發生問題,請另外新增一個資料夾擺放你所下載的資料)。

    安裝完成後,打開終端機。如果原本終端機已經打開了,記得關掉重新開啟。打開後輸入下述指令以確定安裝成功:

    nvm version//確認是否安裝nvm
    1.1.11

    ※ 以 nvm 安裝 Node.js

    nvm install node //安裝最新的穩定版本的 Node.js

    在終端機中輸入 node -v 來檢查看看是不是當前的 Node.js 版本:

    node -v //確認是否安裝node.js或版本資訊
    v14.16.0

    在終端機中輸入 npm -v來檢查看看是不是當前的npm 版本:

    npm -v //確認是否安裝npm或版本資訊
    6.14.11


    ※ Windows 安裝程式碼編輯器 (text editor) - Visual Studio Code

    ※ Visual Studio Code – 客製化編輯設定

    在這裡我們要開啟設定檔再做四個編輯設定:

    • tab size:按下 TAB 鍵時空兩格。
    • word wrap:程式碼長度超過視窗時,可以自動換行。
    • format on save:按下存檔時,自動校訂程式碼格式。
    • format on paste:貼上程式碼時,自動校訂貼進來的程式碼的格式。

    ※ Visual Studio Code – 常用安裝相應的套件設定

    ※ Express 專案步驟筆記清單

    • 在C槽新增空白專案資料夾:
    1. 打開終端機(Terminal),建立一個新資料夾,然後進入這個資料夾中。
     mkdir {資料夾名稱}//建立一個新資料夾
    1. 進入這個資料夾,使用 cd 指令再加上目錄名稱。
    cd {資料夾名稱}
    • 安裝 Experss 到專案中:
    1. 設定 package.json。
    npm init -y //建立 package.json 檔,用來登記所有的外部套件。
    1. 安裝 Experss:
    • 專案資料夾中多了一個 node_modules 的資料夾,npm 會把所有安裝下來的套件放在這個資料夾中。
    • 資料夾中還多了一支名字與 package.json 相似,名為 package-lock.json 的檔案。這支檔案會詳細記錄每一次我們使用 npm 安裝了什麼。
    npm install express // npm i express 都可以
    npm install 套件名稱@版本號//下載指定版本@[4.17.1]
    1. 在 Express 專案資料夾中建立一支名為 app.js 的檔案。
    1. 設定程式入口為 app.js。

    在設定檔裡有一個 main 屬性,這個是指程式的入口檔案,預設叫做 index.js,但我們習慣上會把這支入口檔案命名為 app.js。所以現在手動更改一下:

    1. 設定主程式 app.js:
    // 載入 express 並建構應用程式伺服器
    const express = require('express')
    const app = express()

    // 設定首頁路由
    app.get('/', (req, res) => {
    res.send('hello world')
    })

    // 設定 port 3000
    app.listen(3000, () => {
    console.log('express app listen on port 3000')
    })
    1. 啟動應用程式伺服器:
    node app.js
    express app listen on port 3000//印出
    1. 用瀏覽器打開網址 localhost:3000/
    1. 安裝 nodemon:會自動重啟伺服器,重新整理瀏覽器後,就可以看到修改後的畫面。
    npm install -g nodemon //-g表示把 nodemon 這個套件安裝在電腦的全域(global)。
    1. 使用 nodemon來啟動 Express 的專案:
    $ nodemon app.js
    [nodemon] 3.1.4
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching path(s): *.*
    [nodemon] watching extensions: js,mjs,cjs,json
    [nodemon] starting `node app.js`
    express app listen on port 3000
    1. 定義開發用腳本:
    // 修改 package.json
    "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    • 只要用 npm run 加上腳本,就可以執行內容,例如:
    1. npm run start →取代 node app.js
    2. npm run dev → 取代nodemon app.js
    $ npm run dev

    > express-app@1.0.0 dev C:\Users\user\express-app
    > nodemon app.js

    [nodemon] 3.1.4
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching path(s): *.*
    [nodemon] watching extensions: js,mjs,cjs,json
    [nodemon] starting `node app.js`
    express app listen on port 3000
    1. 設定版本控制:
    2. 初始化 Git,把專案登錄到版本控制系統裡。
    $ git init
    1. 設定 .gitignore:
    # OS X
    .DS_Store*
    Icon?
    ._*

    # Windows
    Thumbs.db
    ehthumbs.db
    Desktop.ini

    # npm
    node_modules
    *.log
    *.gz
    1. 建立第一筆 commit:
    git init //專案初始化
    git add .
    git commit -m "feat: project init"
    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.