從0到1學習Node.js系列教程(第一篇):API介面初體驗

語言: CN / TW / HK

前言:

大家好,我是東東吖,從今天開始,我將帶領大家一起學習Node.js,希望大家能夠從一名前端工程師進階成為全棧工程師讓我們一起來解鎖Node.js吧!

一、Nodejs介紹:

1.什麼是Nodejs?

簡單的說 Node.js 就是執行在服務端的 JavaScript。 Node.js 是一個基於Chrome JavaScript 執行時建立的一個平臺。 Node.js是一個事件驅動I/O服務端JavaScript環境,基於Google的V8引擎,V8引擎執行Javascript的速度非常快,效能非常好。

2.誰適合學習本教程?

如果你是一個前端工程師,你不懂得像PHP、Python或Ruby等動態程式語言,然後你想建立自己的服務,那麼Node.js是一個非常好的選擇。 Node.js 是執行在服務端的 JavaScript,如果你熟悉Javascript,那麼你將會很容易的學會Node.js。 當然,如果你是後端程式設計師,想部署一些高效能的服務,那麼學習Node.js也是一個非常好的選擇。

3.學習本教程前你需要了解?

在繼續本教程之前,你應該瞭解一些基本的計算機程式設計術語。如果你學習過Javascript,PHP,Java等程式語言,將有助於你更快的瞭解Node.js程式設計。

二、建立express後端伺服器:

1.什麼是express?

Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架,它提供一系列強大的特性,幫助你建立各種 Web 和移動裝置應用。

2.全域性下載express腳手架:

npm install -g express-generator

3.建立express專案:

express 專案名稱

4.啟動後端伺服器:

①下載依賴:

npm i

②啟動後端伺服器

npm run start

當你能夠看見這個頁面,說明你的node服務已經建立並啟動成功了。

image.png

5.express專案結構認識:

image.png ①bin:啟動配置檔案,在 www 裡修改執行埠號\ ②node_modules:存放所有的專案依賴庫,就像java存放架包\ ③public:用於存放靜態資原始檔 圖片,CSS,JAVASCRIPT檔案..\ ④routers:路由檔案相當於springmvc中的Controller,ssh中的action\ ⑤views:存放頁面的地方\ ⑥package.json:專案依賴配置及開發者資訊。\ ⑦app.js:應用核心配置檔案,專案入口

6.下載nodemon,自動重新啟動:

當我們修改node程式碼後必須重啟node伺服器,這樣十分影響我們的開發效率,我們需要下載一個可以幫我們自動重啟的工具nodemon,當我們修改程式碼之後,他能幫我們自動重啟。

①全域性下載nodemon依賴包:

npm i nodemon -g

②修改為nodemon啟動:

image.png

三、利用express體驗get、post、put、delete四種請求:

1.get請求:

get請求一般用於獲取,如果不設定請求方式,會預設為是get請求,像一些img,字型樣式等利用媒體標籤去請求,都會預設為是get方式,在位址列就可以直接反問,要引數的話,可以直接在ulr的?後面拼接。 我們在user模組寫一個git請求,模擬一個數組傳送給客戶端。 image.png

get請求可以直接在位址列拼接引數,然後就能直接看見伺服器返回的資料。

image.png

2.post請求:

我們繼續在users模組編寫一個post請求,這個請求三個引數必傳,不然就會返回給客戶端引數錯誤,只有當name,age,city這三個引數都傳的時候,這個請求才會返回新增成功。post請求一般用於新增,但是有一些資料,涉及到安全,用get請求是不可取的,所有也會採用post請求。

image.png

post請求我們是不能在瀏覽位址列訪問的。不信你可以嘗試一下,就像下面這樣:

image.png

我們需要利用一個介面測試工具postman,當我們不傳或者少傳必傳引數,就會返回引數錯誤:

image.png

只有當我們把name,age,city三個產生都傳了才會返回成功

image.png

我們在伺服器端列印一下接收的產生

image.png

開啟終端,我們就能看見客戶端傳送來的引數,就能對這些資料做一些處理,考慮到同學們的學習成本,這篇文章我們就暫不講了,大家知道原理就OK了。

image.png

3.put請求:

put請求與post類似,一般用於編輯更新資料,我們把請求方式改一下,再加一個必傳引數id。

image.png

用postman測試一下,返回編輯成功

image.png

開啟終端:

image.png

4.delete請求:

delete請求一般用於刪除,我們設定一個必傳引數id就可以了。

image.png

用postman測試一下,返回刪除成功 image.png

開啟終端:

image.png

四、如何解決跨域的?

我們用一個實際前端專案來調一下這個介面,我們會發現是調不通的,會報這樣一個錯誤

image.png

這個錯誤是什麼呢,原來我們前後端是在不同的伺服器,所以產生了跨域,前端也可以解決跨域,但是這期我們是後端專場,所以這期我們只講後端如何解決跨域的,那麼後端是怎麼解決的呢?後端解決跨域非常簡單,在請求頭中設定跨域的程式碼即可。

image.png

我們再來看請求返回的資料,發現返回成功了。

image.png

前端把資料渲染到頁面上,完美!!!

image.png

以上就是後端工程師和我們對接api介面的大致流程,後端就是操作資料庫,寫一些後端的業務邏輯;而前端就是寫一些頁面互動的邏輯,處理資料渲染到頁面上。

筆者往期文章:

微信支付其實很簡單,沒做過微信支付的你是否有這些疑惑?

小程式藍芽開鎖,前端是如何直接和硬體進行資料互動的?

父子元件的生命週期執行流程是怎麼樣的呢?