大匠之風: Node.js 製作呼叫 Express 的前端網站

作者：吳祐賓

後端網站已經完成，前端要怎麼和後端連線和除錯？難道需要先將後端網站放上線，再開發前端去和上線後端連線並除錯。如果後端有錯誤時再回到後端專案來除錯？來看看這個前端範例來如何解決問題吧。

建立前端網站目錄及環境

建立一個目錄，本範例建立 "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 檔案，將以下內容貼上：

<!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 內容：

<!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 函式。

最後，重新啟動網站。下圖為完成後可能的畫面。

總結

到目前為止已經將後端和前端快速地製作完成，程式相當簡單，相信任何人經過這套教學流程都能很快將前後端串連起來。期待你能利用這套簡易全端架構再創造出屬於你的網頁應用程式。

和你分享。

大匠之風

網頁

2023/12/20

Node.js 製作呼叫 Express 的前端網站