手把手教前端從0到1通過 Node + Express 開發簡易介面,專案開發+部署伺服器(親身痛苦經歷)

語言: CN / TW / HK
ead>

theme: cyanosis

🧨 大家好,我是 Smooth,一名大二的 SCAU 前端er
🙌 如文章有誤,懇請評論區指正,謝謝!
❤ 寫作不易,「點贊」+「收藏」+「轉發」 謝謝支援!

背景

經過網上各種部落格的洗禮與尋找,花了一早上終於解決了這個基本問題,完成了前端到後端從 0 到 1 的第一小步,為了記錄一下痛苦的過程以及幫助後人少走彎路,因此寫下這篇部落格

前置知識

  1. 擁有一臺伺服器,這裡我選用阿里雲(後續直接通過阿里雲介面的遠端連線來操作伺服器,按懶得用 SSH 客戶端軟體了)
  2. 安裝了 Node 環境(具體操作請自行檢視官網文件 https://nodejs.org/zh-cn/download/

準備好後,那麼便開始,爭取十分鐘拿下!

開發階段 建立一個 express 專案

遠端連線伺服器,進入命令列介面,然後開始下面步驟

1. 建立資料夾,初始化專案

  1. mkdir demo // 新建一個資料夾

  2. cd demo // 進入該資料夾

  3. npm init -y // 初始化一個 npm 庫

2. 安裝該專案所需依賴

  1. npm install express // 安裝 express 依賴
  2. npm install body-parser // 安裝 body-parser 依賴

並不需要安裝 cors 這個依賴,我看很多專案都有這個,其實根本沒必要

3. 開始寫介面

此處為了演示,只寫一個簡單的常用的 get 介面,具體程式碼如下:

``` // app.js

const express = require('express'); const app = express(); const bodyParser = require('body-parser');

// 允許跨域訪問 app.all('', function(req, res, next) { res.header("Access-Control-Allow-Origin", ""); // 所有 Origin 來源都允許 res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); next(); });

// 處理http請求,解析 app.use(bodyParser.urlencoded({ extended: false }));

// 定義變數,做為返回資料 let myGet = {method:"get",age:20,name:"Smooth",url:"https://juejin.cn/user/1302297507801358"}

// get 請求 app.get('/getDemo',(req,res)=>{ res.status(200); res.json(myGet); // 返回處理結果,即將一個物件轉換成 JSON 字串返回 });

app.listen(3000, () => console.log('Example app listening on port 3000!')) ```

4. 本地測試

先輸入 node app.js 將 express 專案暫時跑起來

若出現如下提示則表示執行成功

image.png

5. 寫一個簡單的 html 請求一下介面

``` // index.html

痛苦經歷