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

---

theme: cyanosis

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

背景

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

前置知識

1. 擁有一臺伺服器，這裡我選用阿里雲（後續直接通過阿里雲介面的遠端連線來操作伺服器，按懶得用 SSH 客戶端軟體了）
2. 安裝了 Node 環境（具體操作請自行檢視官網文件 http://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:"http://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 專案暫時跑起來

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

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

``` // index.html