作者：吳祐賓
後端網站已經完成，前端要怎麼和後端連線和除錯？難道需要先將後端網站放上線，再開發前端去和上線後端連線並除錯。如果後端有錯誤時再回到後端專案來除錯？來看看這個前端範例來如何解決問題吧。
建立前端網站目錄及環境
建立一個目錄，本範例建立 "my_es6" 目錄。在專案根目錄下初始化npm：
npm init -y
安裝 Webpack 和相關套件：
npm install --save-dev webpack webpack-cli
安裝 webpack-dev-server：
npm install webpack-dev-server@latest --save-dev
安裝 html-webpack-plugin：
npm install html-webpack-plugin --save-dev
安裝Babel相關套件，用於轉譯ES6語法：
npm install --save-dev @babel/core @babel/preset-env babel-loader
建立 ".babelrc" 檔案，並配置 Babel：
{
"presets": ["@babel/preset-env"]
}
在專案根目錄下建立 Webpack 配置檔（本例為：webpack.config.js）：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
port: 8080,
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
建立 public 目錄及 index.html 檔案，將以下內容貼上：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your ES6 Website</title>
</head>
<body>
Hello world
<div id="app"></div>
</body>
</html>
建立 src 目錄，並在 src 目錄下建立你的網站入口文件（本例為：index.js），將以下
ES6 程式碼貼到這個檔案裡：
// src/index.js
const greeting = () => {
console.log('Hello, webpack with ES6!');
};
greeting();
在 package.json 中新建腳本：
"scripts": {
...
"build": "webpack",
"start": "webpack-dev-server --open",
}
這個設定中的 --open 選項會在啟動時自動打開瀏覽器。
執行腳本，啟動網站：
npm run start
此命令會使用 webpack-dev-server
啟動本地開發伺服器，並且在瀏覽器中開啟你的網頁應用程式。
若要發佈網站時，建構網站的指令：
npm run build
Webpack 將處理你的 ES6 程式碼，使用 Babel 進行轉譯，並在 dist 目錄下產生 bundle.js。你可以將 bundle.js 引入到你的 HTML 文件中，以在瀏覽器中運行你的網站。下圖是成功運行的圖片：
建立呼叫後端 API 的程式及畫面
在 webpack 設定檔中 devServer 設定區堿調整如下：
devServer: {
static: {
directory: path.join(__dirname),
},
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
changeOrigin: true,
secure: false,
},
},
},
這裡的 proxy 設定會把所有 /api/* 的請求導向到 http://localhost:3000。pathRewrite 用來把請求路徑中的 /api 前綴去除，以符合目標伺服器的預期路徑。changeOrigin 設為 true，這樣就會修改請求頭的 Host 欄位，指向目標伺服器。secure 設為 false 可以禁用 SSL 證書驗證，在開發環境中可能會很有用。
修改 index.html 內容：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your ES6 Website</title>
</head>
<body>
<h1>Webpack Front Site Project</h1>
<div id="app"></div>
<div id="contentdiv">
<table>
<tr>
<td>
<input id="valueField" type="text" value="A B C" />
</td>
<td>
<button id="btnReverse">
ReverseString
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
修改 index.js 內容
// src/index.js
function onReverseStringClick() {
const valueField = document.getElementById('valueField');
const inputValue = valueField.value;
// 使用 Fetch API 來呼叫伺服器端的 /api/reverse_string
fetch('/api/reverse_string/' + inputValue, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => {
// 處理伺服器回傳的資料
const valueField = document.getElementById('valueField');
valueField.value = data.result;
console.log('Reversed String:', data.result);
})
.catch(error => {
console.error('Error:', error);
});
}
const greeting = () => {
console.log('Hello, webpack with ES6!');
};
greeting();
const app = document.getElementById('app');
app.innerHTML = '<h1>Hello, Webpack!</h1>';
document.getElementById('btnReverse').addEventListener('click', onReverseStringClick);
這段程式碼主要是一個簡單的前端 JavaScript 應用程式，使用了現代的 ES6 語法和 Fetch API 來與後端伺服器進行通訊。以下是程式碼的大致解說：
onReverseStringClick 函式：這是當按鈕被點擊時觸發的事件處理器。它首先從網頁中取得一個 id 為 'valueField' 的輸入元素，然後獲取該元素的值，並使用 Fetch API 發送 GET 請求到伺服器的 /api/reverse_string 路徑。接著，它處理伺服器回傳的 JSON 資料，將反轉後的字串顯示在 'valueField' 輸入元素中，並在控制台輸出反轉後的字串。
greeting 函式：這是一個簡單的箭頭函式，僅在控制台輸出 "Hello, webpack with ES6!"。
app 元素：這裡使用 document.getElementById 取得 id 為 'app' 的元素，並修改其 innerHTML 屬性，插入一個包含 "Hello, Webpack!" 的標題標籤。
事件監聽器：這裡使用 document.getElementById 取得 id 為 'btnReverse' 的按鈕元素，然後對其添加一個點擊事件監聽器，當按鈕被點擊時，將觸發 onReverseStringClick 函式。
最後，重新啟動網站。下圖為完成後可能的畫面。
總結
到目前為止已經將後端和前端快速地製作完成，程式相當簡單，相信任何人經過這套教學流程都能很快將前後端串連起來。期待你能利用這套簡易全端架構再創造出屬於你的網頁應用程式。
和你分享。
See also
文首圖片來源：攝影師：Ketut Subiyanto: https://www.pexels.com/zh-tw/photo/4560148/
