第10章：前端集成

10.1 前端技術概述

前端技術指的是構建Web應用用戶界面所使用的技術，包括HTML、CSS和JavaScript。現代Web開發中，前端框架如React、Vue.js和Angular等被廣泛使用。

10.2 AJAX與Flask的集成

AJAX（Asynchronous JavaScript and XML）允許在不重新加載整個頁面的情況下與服務器交換數據并更新部分網頁。

示例代碼：使用AJAX調用Flask API

// 使用Fetch API發送AJAX請求
fetch('/api/data', {method: 'GET',headers: {
{        "Content-Type": "application/json"}}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

示例代碼：Flask端的API響應

from flask import jsonify@app.route('/api/data')
def get_data():data = {'key': 'value'}return jsonify(data)

10.3 前端框架（如React或Vue.js）與Flask的結合

現代前端框架可以與Flask后端無縫集成，實現前后端分離的架構。

示例代碼：React組件調用Flask API

// React組件中使用fetch
fetch('/api/data').then(response => response.json()).then(data => this.setState({ data }));

示例代碼：Vue組件中使用axios

// Vue組件中使用axios
axios.get('/api/data').then(({ data }) => {this.data = data;});

10.4 前后端分離的架構

前后端分離指的是前端和后端作為兩個獨立的應用開發和部署，它們通過API進行通信。

示例代碼：前后端分離的項目結構

my_project/
│
├── /backend  # 后端Flask應用
│   ├── app.py
│   └── ...
│
└── /frontend  # 前端React應用├── index.js└── ...

10.5 前端路由與后端API的協同

在前后端分離的架構中，前端負責頁面路由，而后端提供API接口。

示例代碼：前端React路由

// React Router示例
<Route path="/dashboard" component={Dashboard}/>

示例代碼：后端Flask API

@app.route('/api/dashboard')
def dashboard_api():# 返回儀表盤數據return jsonify(data)

10.6 總結

本章介紹了前端技術的基本概念，以及如何將AJAX、React或Vue.js等前端技術與Flask后端集成。我們還討論了前后端分離的架構和它們之間的協同工作方式。