文章

第23天：建構前端與後端交互應用

發布於
作者 Ned Hsu 7 分鐘閱讀

課程簡介

今天的課程將專注於如何使用 ASP.NET Core 建立一個與前端互動的後端 API。我們將了解如何透過 前端 JavaScript 來與 ASP.NET Core Web API 進行交互，實現從前端發送請求到後端獲取數據並進行顯示的完整流程。

學習目標

  • 了解前後端交互的基本原理
  • 學習如何透過 JavaScript 與 Web API 進行資料傳遞
  • 建立一個簡單的前後端交互應用

課程內容

1. 前後端交互的基本概念

前後端交互 指的是前端應用程式（例如瀏覽器中的網頁）與後端伺服器之間的數據交換。常見的交互方式包括：

  • GET 請求：從伺服器獲取數據。
  • POST 請求：向伺服器提交數據。
  • PUT/PATCH 請求：更新伺服器上的數據。
  • DELETE 請求：刪除伺服器上的數據。

這些請求通常使用 AJAX（Asynchronous JavaScript and XML） 或 Fetch API 在前端發送給後端。

2. 建立 ASP.NET Core Web API

首先，我們需要在後端建立一個簡單的 Web API 來處理來自前端的請求。

建立一個簡單的控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

[ApiController]
[Route("api/[controller]")]
public class DataController : ControllerBase
{
    // GET api/data
    [HttpGet]
    public IActionResult GetData()
    {
        var data = new List<string> { "Apple", "Banana", "Cherry" };
        return Ok(data);
    }

    // POST api/data
    [HttpPost]
    public IActionResult PostData([FromBody] string newData)
    {
        // 假設數據成功接收並處理
        return Ok(new { success = true, message = $"Data '{newData}' received." });
    }
}

這個控制器提供了兩個 API 端點：

  • GET 請求將返回一個字串數據列表。
  • POST 請求接收來自前端的數據並返回確認訊息。

3. 前端發送 GET 請求

我們將在前端使用 JavaScript 的 Fetch API 來向後端發送請求並顯示返回的數據。

HTML 代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前後端交互應用</title>
</head>
<body>
    <h1>從後端獲取的數據</h1>
    <ul id="data-list"></ul>

    <script>
        // Fetch API 發送 GET 請求
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                const dataList = document.getElementById('data-list');
                data.forEach(item => {
                    const listItem = document.createElement('li');
                    listItem.textContent = item;
                    dataList.appendChild(listItem);
                });
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

這段代碼使用 Fetch API 向 /api/data 端點發送 GET 請求，然後將接收到的數據顯示在網頁上。

4. 前端發送 POST 請求

接下來，我們將學習如何從前端向後端發送數據。

HTML 代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前後端交互應用</title>
</head>
<body>
    <h1>提交數據到後端</h1>
    <form id="data-form">
        <input type="text" id="newData" placeholder="輸入數據">
        <button type="submit">提交</button>
    </form>

    <p id="response-message"></p>

    <script>
        const form = document.getElementById('data-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            const newData = document.getElementById('newData').value;

            // Fetch API 發送 POST 請求
            fetch('/api/data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(newData)
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('response-message').textContent = data.message;
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

這段代碼建立了一個簡單的表單，當使用者提交表單時，會將數據透過 POST 請求發送到後端，並顯示伺服器回應的訊息。

5. 前後端交互的關鍵點

跨域資源共享（CORS）

當前端與後端在不同的域名、端口或協議上運行時，瀏覽器會阻止前端訪問後端資源。為了解決這個問題，我們需要在後端啟用 CORS（Cross-Origin Resource Sharing）。

在 ASP.NET Core 中啟用 CORS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowAllOrigins",
            builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    });

    services.AddControllers();
}

public void Configure(IApplicationBuilder app)
{
    app.UseCors("AllowAllOrigins");
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

這段代碼允許任何來源的請求訪問 API。如果你有更嚴格的需求，可以限制允許的來源和請求方法。

6. 實作練習

  1. GET 請求實作
    • 修改後端 API，使其返回更多樣化的數據，例如物件數據列表。
    • 在前端將這些數據以表格的形式顯示出來。
  2. POST 請求實作
    • 建立一個更複雜的表單，向後端提交更多欄位的數據（例如：姓名、年齡等），並讓後端回傳確認訊息。
  3. 處理錯誤
    • 增加錯誤處理邏輯，當後端發生錯誤或前端請求失敗時，顯示相應的錯誤訊息。

教學重點

  • 理解前後端交互的基本概念，掌握如何在前端使用 JavaScript 與後端 API 進行數據交換。
  • 了解 ASP.NET Core 中如何建立 Web API 並提供給前端應用程式使用。
  • 掌握 Fetch API 的基本使用方法，並學會處理跨域請求問題。

接下來的課程將介紹 身份驗證與授權機制，這是實作安全應用程式的關鍵部分。

Software, dotnet
dotnet
本文章以 CC BY 4.0 授權