《每天5分钟用Flask搭建一个管理系统》 第10章：前端集成

第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后端集成。我们还讨论了前后端分离的架构和它们之间的协同工作方式。