[day03][後端][學習] 來拉，利用express快速建立node伺服器吧

 

用express快速開始你的伺服器

express是node的一個框架，可以簡單的利用他極為快速的架好後端伺服器。甚至只要簡單的 express init 就全部完成了！所以這邊就讓我們開始吧～

第一步前往express的套件網站(https://www.npmjs.com/package/express )

在這邊他有示範最簡單建置express網站的方法

首先第一步在terminal輸入

npm i express

此時應該就會出現 node_modules 資料夾了，裡面放著npm抓回來的express囉

const express = require('express')這邊是會去抓 node_modules 裡面的express套件，沒先安裝等下node啟動的時候就會壞

接下來建立一個檔案 app.js 或是 aaa.js 都可以

然後複製範例檔案的程式碼這個伺服器就算完成了

接下來在terminal

node app.js

app.js是你剛剛建立的檔案

然後時間就彷彿靜止了，輸入什麼都沒有反應了...

請放心這是正常的，因為他正在執行你的伺服器！你的第一個伺服器已經完成囉！

請打開你的遊覽器，輸入網址(http://localhost:3000/ )就可以看到Hello World

進行簡單說明

app.get('/', function (req, res) {
  res.send('Hello World');
})

看到這邊有撈過API的應該能很快的理解，這個就是後端開了一個get的方法讓你前端可以去撈取資料。完全沒有撈取過API的朋友也不用擔心，秉持能用就好原則，現在只要理解get就是用網頁去連接該網址會做的事情。在遊覽器輸入該網址就是對該伺服器發出get的請求，目前理解到這邊就可以了！（有興趣的請google"AJAX"）

app.get('/' <= 這邊的意思是你的網站的根網址喔，如(https://www.google.com/ )他的根目錄就是(https://www.google.com/ )

res.send('Hello World'); 就是對前端發出'Hello World'的文字，在這裏面的括號中間就是當get發生的時候會執行的事件喔。（記得這邊如果沒有給予前端回應那個請求就會一直處於padding喔...但這個也可以先不用管沒關係）

app.listen(3000)

這邊的意思是選用你電腦的3000port當作端口，基本上3001、3002......都可以使用，這邊不用理解沒關係。只要知道你的電腦其實有很多端口被各種程式使用著就好

這邊示範一個跟端口有關的錯誤

聽過上面的說明應該可以很簡單的知道這個要怎麼處理掉了（笑

好的這邊關閉你的第一個伺服器，回到VScode在terminal使用快捷鍵 ctrl + c 關掉目前執行的程序吧

然後你就又可以在裡面輸入文字拉～！

好啦，讓我們修改一下檔案來熟悉get發生之後會發生什麼事情吧

const express = require('express')
const app = express()
console.log('伺服器已經啟動拉！');

app.get('/hello', function (req, res) {
  console.log('ㄚㄚㄚ，我被get到了！！')
  res.send('不要get我啊！！');
})
app.listen(3000)

如果你已經知道會發生什麼事情那你今天的學習就算是完成了～！

接下來讓我們再次在Terminal輸入

node app.js

開啟伺服器！

看到了，這次多了一個"伺服器已經啟動拉！"的回饋囉！

然後利用遊覽器去觸發get(http://localhost:3000/ )

是不是看到畫面壞掉了？是不是出現 Cannot GET / 了呢？

因為現在我們的路由的根部沒東西了阿，是不是不知道什麼是路由？沒關係，先理解成他是道路與路線就好！我們建立的路線從剛剛的'/'變成了'/hello'對吧，所以原本的路線就不見啦，為了走到原本這條路上，只要輸入(http://localhost:3000/hello )就可以走對路的看到"不要get我啊！！"的文字！

同時因為觸發了那個路線，所以那個接待人員（callback function）也做事囉，去VScode的terminal看看有什麼東西出現

好的，這邊就可以大概理解什麼是express和基本伺服器觀念拉～！

githubDay2