iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

什麼都略懂一點,生活更多彩一些。從web跑js出發到部屬heroku伺服器撈取API建構線上網站與LineBot系列 第 3

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

用express快速開始你的伺服器

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

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

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

https://ithelp.ithome.com.tw/upload/images/20200917/20130673QJFCUvldk2.jpg

首先第一步在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是你剛剛建立的檔案

然後時間就彷彿靜止了,輸入什麼都沒有反應了...
https://ithelp.ithome.com.tw/upload/images/20200917/20130673MNhIMqp1L3.jpg
請放心這是正常的,因為他正在執行你的伺服器!你的第一個伺服器已經完成囉!

請打開你的遊覽器,輸入網址(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......都可以使用,這邊不用理解沒關係。只要知道你的電腦其實有很多端口被各種程式使用著就好

這邊示範一個跟端口有關的錯誤
https://ithelp.ithome.com.tw/upload/images/20200917/20130673iW4dmt1Lna.jpg
聽過上面的說明應該可以很簡單的知道這個要怎麼處理掉了(笑

好的這邊關閉你的第一個伺服器,回到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

開啟伺服器!
https://ithelp.ithome.com.tw/upload/images/20200917/20130673hAc295lGtF.jpg
看到了,這次多了一個"伺服器已經啟動拉!"的回饋囉!

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

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

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

同時因為觸發了那個路線,所以那個接待人員(callback function)也做事囉,去VScode的terminal看看有什麼東西出現
https://ithelp.ithome.com.tw/upload/images/20200917/20130673bQJCqNUH5o.jpg

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

githubDay2

發現分支日期打錯了呢="=

同步發表到驢形筆記


上一篇
[day02] [環境準備] 首先來建立node的環境
下一篇
[day04][後端][學習] 現在,用express工具建立模版伺服器!(上)
系列文
什麼都略懂一點,生活更多彩一些。從web跑js出發到部屬heroku伺服器撈取API建構線上網站與LineBot30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言