前端到後端的連接

作為一名 Web 應用程式開發人員，我發現有趣的一件事是將我的或應用程式的前端翼連結到我的應用程式的後端翼。身為一個一直熱愛使用 JavaScript 的開發人員； JavaScript 多年來已經有了很大的發展。將應用程式的前端連結到應用程式的後端可以透過在客戶端程式碼（通常是HTML、CSS 和JavaScript）和伺服器端程式碼（可以是用多種語言編寫，包括Node.js、Python、Ruby、Java等）。下面我將列出我作為 Web 開發人員開始時所採取的簡單步驟，該開發人員同時在應用程式的後端和應用程式的前端工作。

1. 我通常更喜歡設定我的後端 首先，我得到了一個後端伺服器，它提供 API 供我的前端進行通訊。對我來說，使用 MERN 堆疊開發應用程式時的一個基本範例是使用 Node.js 和 Express：

我的基本伺服器設定是（Node.js + Express）：

安裝 Node.js 和 npm（節點套件管理器）。

建立一個新專案並安裝 Express：

我該怎麼做？我首先在專案資料夾中建立一個資料夾。

mkdir myProjectApp
cd myProjectApp
npm init -y
npm install express

然後我建立一個簡單的伺服器或 JavaScript 檔案（例如 server.js）：

javascript
複製程式碼
const express = require('express');
const app = express();
常量埠 = 3000;

// 解析 JSON 的中間件
app.use(express.json());

// 範例端點
app.get('/api/data', (req, res) => {
res.json({ message: '來自後端的你好！' });
});

app.listen(埠, () => {
console.log(伺服器運行在http://localhost:${port});
});

運行伺服器：

節點伺服器.js

1. 然後我設定了我的前端。前端通常是一個 HTML 文件，其中包含用於進行首選 API 呼叫的 JavaScript 程式碼。

我建立一個index.html檔案：

下面的html代碼

前後端互動

前端到後端通訊

從後端取得資料

<script src="script.js"></script>

為您的 JavaScript 建立 script.js 檔案：

javascript
輸入下面的程式碼
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(response => response.json())
.then(數據 => {
document.getElementById('response').innerText = data.message;
})
.catch(錯誤=> {
console.error('取得資料時發生錯誤：', error);
});
});

1. 運行應用程式
   確保您的後端伺服器正在運行，然後在瀏覽器中開啟index.html。點擊按鈕從後端獲取數據，您應該會看到頁面上顯示的回應。

2. 進階：使用框架和函式庫
   對於更複雜的應用程序，您可以在兩端使用框架和庫：

前端：React、Vue.js、Angular 等
後端：Express (Node.js)、Django (Python)、Rails (Ruby) 等
React 範例（前端）：

使用 Create React App 建立 React 應用程式：

輸入下面的程式碼
npx create-react-app my-react-app
cd my-react-app
替換App.js的內容：

javascript
輸入下面的程式碼

從 'react' 匯入 React, { useState };

函數App() {
const [message, setMessage] = useState('');

const fetchData = () =>; {
fetch('http://localhost:3000/api/data')
.then(response => response.json())
.then(數據 => {
setMessage(data.message);
})
.catch(錯誤=> {
console.error('取得資料時發生錯誤：', error);
});
};

返回（

前端到後端通訊

從後端取得資料

{訊息}

);
}

匯出預設應用程式；
運行 React 應用程式：

輸入下面的程式碼
npm 開始
現在，當您單擊按鈕時，您的 React 應用程式應該能夠從後端伺服器獲取資料。

總結
只需使用上述步驟即可使用 JavaScript 連接前端和後端。後端伺服器公開 API，前端向這些 API 發出 HTTP 請求以取得或傳送資料。這種方法可以根據您專案的具體要求適應各種框架和環境。

以上是前端到後端的連接的詳細內容。更多資訊請關注PHP中文網其他相關文章！