從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接口的大致流程,後端就是操作數據庫,寫一些後端的業務邏輯;而前端就是寫一些頁面交互的邏輯,處理數據渲染到頁面上。

筆者往期文章:

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

小程序藍牙開鎖,前端是如何直接和硬件進行數據交互的?

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