Part 7：前後端串接

修改 Flask 提供網頁介面

實作步驟教學

使用鍵盤 ← → 或點擊下方按鈕切換投影片

前後端溝通流程

使用者
輸入訊息

→

JavaScript
發送 fetch

→

Flask
/chat API

→

OpenAI
API

顯示
AI 回應

←

JavaScript
接收資料

←

Flask
回傳 JSON

←

OpenAI
回應

前端透過 fetch API 呼叫後端的 /chat 端點，後端再呼叫 OpenAI API！

步驟 1：了解 render_template

Flask 提供 render_template 函數來提供 HTML 頁面：

from flask import Flask, render_template

@app.route('/')
def home():
    # 自動在 templates 資料夾尋找 index.html
    return render_template('index.html')
            

之前的寫法

return "Hello World"
只能回傳純文字

現在的寫法

return render_template('index.html')
可以回傳完整網頁

步驟 2：修改 app.py 的 import

1找到 app.py 檔案的第一行

# 原本的寫法
from flask import Flask, request, jsonify
            

2加入 render_template

# 修改後的寫法
from flask import Flask, request, jsonify, render_template
            

一定要加入 render_template，否則會出現 NameError！

步驟 3：修改首頁路由

1找到 home() 函數

# 原本的寫法
@app.route('/')
def home():
    return "歡迎使用 AI 對話 API！"
            

2改成使用 render_template

# 修改後的寫法
@app.route('/')
def home():
    # 會自動在 templates 資料夾尋找 index.html
    return render_template('index.html')
            

現在訪問首頁會顯示我們製作的對話介面！

步驟 4：啟動 Flask 伺服器

1開啟 CMD，進入專案資料夾

cd D:\自己架設AI_零基礎到大師\CH2_地端與雲端串接概念\AI_Projects\2.5_美化介面\階段三_測試與除錯

2啟動虛擬環境

venv\Scripts\activate

3執行 Flask 應用

python app.py

看到 "Running on http://127.0.0.1:5000" 就成功了！

步驟 5：開啟瀏覽器測試

1開啟瀏覽器（Chrome、Edge、Firefox）

2在網址列輸入

http://localhost:5000/

3確認介面顯示正確

你應該看到：

漸層色標題區域「AI 對話助手」
白色對話區域，已有 AI 歡迎訊息
底部輸入框和發送按鈕

步驟 5（續）：測試成功畫面

完整的 AI 對話介面

如果你看到這個畫面，恭喜！前後端串接成功！

步驟 6：測試對話功能

1在輸入框輸入訊息

例如：「你好，請介紹台灣的特色美食」

2點擊「發送」按鈕或按 Enter

3觀察以下變化

你的訊息出現在右側（藍色背景）
按鈕變成「思考中...」並暫時停用
幾秒後，AI 回應出現在左側（白色背景）
按鈕恢復成「發送」

對話功能正常運作！

步驟 7：測試各種情境

測試 1：連續發送

問多個問題，確認對話記錄正確累積，自動捲動到最新

測試 2：空訊息

不輸入文字就按發送，應該不會有任何反應

測試 3：長訊息

輸入很長的文字，確認訊息框會自動換行

測試 4：網路錯誤

停止 Flask（按 Ctrl+C），應顯示「無法連接到伺服器」

步驟 8：使用瀏覽器開發者工具

開發者工具可以幫助你除錯和了解網路請求！

1按下 F12 開啟開發者工具

2點擊「Network」（網路）分頁

Elements Console Network Sources

Name Status Type Size
chat 200 fetch 1.2 KB

Network 分頁可以看到所有網路請求，包括 API 呼叫！

步驟 9：查看 API 請求內容

1在 Network 分頁，發送一則訊息

2點擊出現的「chat」請求

3查看各個分頁

Headers

查看請求方法（POST）
Content-Type: application/json

Payload

查看發送的資料
{"message": "你好..."}

Response

查看 API 回傳的資料
{"success": true, "message": "..."}

步驟 9（續）：開發者工具畫面

瀏覽器開發者工具 - Network 分頁

透過開發者工具，可以清楚看到前後端之間的資料傳輸！

常見錯誤處理

瀏覽器顯示「無法連線到這個網站」

解決：確認 Flask 伺服器正在運行，網址是 http 不是 https

顯示「404 找不到頁面」

解決：確認 templates 資料夾存在，且裡面有 index.html

頁面顯示但發送訊息沒反應

解決：檢查 .env 中的 API Key，開啟 F12 查看 Console 錯誤

顯示 NameError: render_template

解決：確認有在 import 加入 render_template

Part 7 重點回顧

本單元學到的技能

理解前後端溝通流程
使用 render_template 提供網頁
修改 Flask app.py
測試完整對話功能
使用瀏覽器開發者工具除錯

關鍵程式碼

from flask import render_template
return render_template('index.html')

下一步

Part 8 將學習如何
準備雲端部署

下一單元：Part 8 雲端部署準備

← 返回課程首頁