【譯】如何連線 React 和 Node,Express

joking_zhang發表於2019-07-15
原文:How to create a React frontend and a Node/Express backend and connect them
作者:João Henrique
譯者:博軒

圖片描述

在本文中,我將引導你建立一個簡單的 React 應用,以及一個簡單的 Node/Express API,並將兩者相互連線。

我不會詳細介紹本文中提到的任何技術,但是我會留下連結,以便你想了解更多資訊。

您可以在我為本教程製作的程式碼庫中找到原始碼。

譯註:嚶嚶嚶,我也寫了Demo的... client-react-001api-node-001

這裡的目標是為您提供有關如何設定和連線前端客戶端後端API的實用指南。

在我們開始之前,確保您的機器上已經安裝了 Node.js

建立專案主目錄

在終端,導航到你要儲存專案的目錄。現在為您的專案建立一個新目錄並導航到它:

mkdir my_awesome_project
cd my_awesome_project

建立一個 React 應用

這個過程非常簡單。

我們將使用 Facebook 的 create-react-app 來... 你猜對了,簡單的建立一個名為 client 的應用程式:

npx create-react-app client
cd client
npm start

讓我們看看這裡做了什麼:

1.使用 npm 的 npx 建立一個 React 應用,並將其命名為 client
2.cd (更改目錄)到客戶端目錄中。
3.啟動了應用程式。

在瀏覽器中,訪問:http://localhost:3000/

如果一切正常,您將看到 React 歡迎頁面。恭喜!這意味著您現在在本地計算機上執行了一個基本的 React 應用程式。是不是很簡單?

要停止您的 React 應用程式,只需在終端按下 Ctrl + c 即可。

建立一個 Express 應用

好的,這將與前一個示例同樣簡單。不要忘記回到專案的根資料夾。

我們將使用 Express Application Generator 快速生成應用的框架,並將其命名為 api

npx express-generator api
cd api
npm install
npm start

讓我們看看這裡做了什麼:

1.使用 npm 的 npx 在全域性安裝 express-generator
2.使用 express-generator 快速建立一個 express 應用,並將其命名為 : api
3.進入 API 目錄。
4.安裝所有依賴項。
5.啟動應用。

在瀏覽器中,訪問:http://localhost:3000/

如果一切正常,您將看到 Express 歡迎頁面。恭喜!這意味著您現在在本地計算機上執行了一個基本的 Express 應用程式。是不是很簡單?

要停止您的 Express 應用程式,只需在終端按下 Ctrl + c 即可。

在 Express 中配置新的路由

好啦,接下來就是動手時間。是時候開啟你最喜歡的程式碼編輯器(我正在使用 VS Code)並導航到你的專案資料夾。

如果您將 React應用 命名為 client,Express應用 命名為 api,你講找到兩個主要資料夾:clientapi

1.在 api 目錄中,開啟 bin/www 並將第15行的埠號由 3000 改為 9000。我們將同時執行兩個應用程式,這樣做可以避免問題。修改結果如下:

// my_awesome_project/api/bin/www
var port = normalizePort(process.env.PORT || '9000');

2.在 api/routes 上,建立一個 testAPI.js 檔案並貼上如下程式碼:

var express = require(“express”);
var router = express.Router();

router.get(“/”, function(req, res, next) {
    res.send(“API is working properly”);
});

module.exports = router;

3.在 api/app.js 檔案中,在第24行插入新路由:

app.use("/testAPI", testAPIRouter);

4.並在第9行引入新的路由檔案

var testAPIRouter = require("./routes/testAPI");

5.恭喜您!您已經建立了新的路由

如果您啟動 api 應用程式(在終端中,導航到 api 目錄,輸入 npm start),並在瀏覽器中訪問 http://localhost:9000/testAPI ,您將看到以下訊息:API is working properly

譯註:可以使用 npm 模組 forever來守護你的程式,方便你之後在其他機器上部署服務。

React Client 連線到 Express API

1.讓我們使用程式碼編輯器開啟 client 目錄,編輯 app.js

2.我將會使用 Fetch APIapi 模組獲取資料。在 Class 宣告之後,render 方法之前貼上如下程式碼:

constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

3.在 render 方法中,你會找到一個 <p> 標籤。讓我們用它來展示 API 的內容。

<p className="App-intro">;{this.state.apiResponse}</p>

這是,該檔案展示如下:

圖片描述

讓我們看看這裡做了什麼:
1.在第6到9行,我們插入了一個初始化預設狀態的建構函式。
2.在第11到16行,我們插入了方法 callAPI(),它將從API獲取資料,並儲存在this.state.apiResponse上。
3.在第18行到第20行,我們插入了一個名為 componentDidMount() 的 react 生命週期方法,該方法將在元件安裝後執行 callAPI() 方法。
4.最後,在第29行,我使用 <p> 標籤在我們的客戶端頁面上顯示一個段落,其中包含我們從 API 獲取的文字。

有沒有搞錯!!CORS

到這裡,我們差不多完成了。當我們啟動應用程式(clientAPI),訪問 http://localhost:3000/ , 發現並沒有看到預期的結果。如果你開啟 chrome 開發者工具,您將在控制檯找到原因:

Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

這很好解決。我們只需要在我們的API中新增CORS允許跨域請求。有關 CORS ,我們可以檢視上面的連結瞭解更多資訊。

1.在終端中導航到 api 目錄,並安裝 CORS 依賴。

npm install --save cors

2.開啟 my_awesome_project/api/app.js 檔案,新增如下程式碼:

var cors = require("cors");
...
app.use(cors());

API app.js 檔案最終應該是這樣的:

圖片描述

乾的漂亮。我們完成了!!

現在使用 npm start 啟動兩個應用 clientAPI

訪問 http://localhost:3000/ 你會看到如下內容:

圖片描述

當然,這個專案的程式碼不會很多,但卻是全棧專案的開始。你可以在這個倉庫中,找到專案的所有程式碼。

接下來,我會補充一些教程,比如將它連線到 MongoDB 資料庫,甚至是在 Docker 容器中執行它。

譯註:這是我部署的應用地址,下一篇我也會翻譯吧。

就像我的一位好友對我說到:

Be Strong and Code On!!!

...別忘了今天也是美好的一天?

本文已經聯絡原文作者,並授權翻譯,轉載請保留原文連結

相關文章