這篇主要做了兩個專案：

1. 第一個是使用Express建立後端
2. 第二個則是使用React建立前端
   並利用前後端的架構測試GET/POST

JavaScript Express Demo

使用Express作為後端

建立專案、選擇架構

1. 建立一個專案命名為javascript-express
   

2. 進到專案裡，在terminal安裝套件：npx express-generator
   

3. 選擇模板：express --view=pug .

4. 執行npm install安裝相依套件
5. 執行$env:DEBUG='javascript-express:*'; npm start查看port是否listening(各環境語法不同：https://expressjs.com/en/starter/generator.html)

如果上述都成功的話，進入http://localhost:3000可以看到以下畫面

要停止的話只需要按ctrl+C
下次要再開啟的話也只需要輸入npm start就好

等同於執行node ./bin/www

建立API

1. 在javascript/routes/index.js裡新增一個GET API
   

   router.get('/api/sayHi', function(req, res, next) {
     res.send('hi');
   });

2. 執行伺服器：npm start
   

3. 瀏覽器上右鍵-檢查，可以看到發出了一個GET的Http request
   

也可以使用線上工具POSTMAN)來測試(需要下載到本地才能對local端的伺服器發request)，他顯示的結果會與瀏覽器上看到的一樣：

使用React作為前端

使用前端套件 - React

1. 安裝套件：npm install -g create-react-app
2. 建立專案：mkdir react-web
3. 進入專案：cd react-web
4. 建立react專案：create-react-app .
   
5. 開啟伺服器：npm satrt
   

更改Port

因為現在前端(專案react-web)占用port 3000，所以要把後端(專案javascript-express)的port改成3001

1. 將javascript-express/package.json裡的script改成set PORT=3001 && node ./bin/www (不同系統有差異)
   
2. 在javascript-express/app.js裡放入

   var cors = require('cors'); //放最前面
   app.use(cors());  //放在var app = express();後

3. 最後可以得到前端為http://localhost:3000/，後端則為http://localhost:3001/

4. 使用POSTMAN測試前後端有沒有通訊成功
   

   我們之前在後端那邊設了一個

   router.get('/api/sayHi', function(req, res, next) {
     res.send('hi');
   });

   因此在「前端(3001)」使用「後端(3000)」的API的情況下送了一個request出去，也可以看到從後端response回了一個response回來