使用 FastAPI 和 Vue.js 实现前后端分离

? ??

---

?

简介

前后端分离是现代 Web 开发的趋势。使用 FastAPI 和 Vue.js 可以构建一个高效、灵活且易于维护的 Web 应用。FastAPI 提供了高性能的后端服务，而 Vue.js 作为一种渐进式 JavaScript 框架，可以构建动态的前端界面。本文将详细介绍如何使用 FastAPI 和 Vue.js 实现前后端分离的项目，包括环境搭建、API 开发、前端页面构建以及数据交互。

---

项目概述

目标

构建一个简单的待办事项应用，其中包含创建、读取、更新和删除任务的功能（CRUD）。

技术栈

• 后端：FastAPI

• 前端：Vue.js

• 数据库：SQLite（或任何适用的数据库）

环境搭建

安装 FastAPI

pip?install?fastapi[all]

安装 Vue CLI

npm?install?-g?@vue/cli

后端开发

创建 FastAPI 项目

在一个新目录下初始化 FastAPI 应用。

mkdir?fastapi-backend
cd?fastapi-backend

编写 FastAPI 应用

创建一个基本的 FastAPI 应用。

#?main.py

from?fastapi?import?FastAPI

app?=?FastAPI()

@app.get("/")
async?def?read_root():
????return?{"Hello":?"World"}

设置跨源资源共享（CORS）

为了使前端 Vue 应用能够访问 FastAPI 服务，需要设置 CORS。

from?fastapi.middleware.cors?import?CORSMiddleware

app.add_middleware(
????CORSMiddleware,
????allow_origins=["*"],
????allow_credentials=True,
????allow_methods=["*"],
????allow_headers=["*"],
)

运行 FastAPI 应用

uvicorn?main:app?--reload

前端开发

创建 Vue 项目

在项目根目录下创建一个 Vue 应用。

vue?create?vue-frontend

编写 Vue 组件

创建一个基本的 Vue 组件来展示和管理待办事项。

<!-- src/components/TodoList.vue -->

<template>
  <div>
    <h1>待办事项列表</h1>
    <!-- TodoList 组件内容 -->
  </div>
</template>

<script>
export default {
  // Vue 组件逻辑
}
</script>

<style>
/* CSS 样式 */
</style>

集成 Axios 进行 API 调用

安装 Axios 并在 Vue 组件中使用它与后端 FastAPI 应用通信。

npm?install?axios

//?在?Vue?组件中
import?axios?from?'axios';

export?default?{
??//?使用?axios?获取数据
}

数据交互

后端：创建 API 路由

在 FastAPI 应用中创建 API 路由来处理 CRUD 操作。

#?main.py

from?fastapi?import?FastAPI

app?=?FastAPI()

#?示例：添加一个新的待办事项
@app.post("/todos/")
async?def?create_todo(todo:?Todo):
????#?创建待办事项的逻辑
????return?{"todo_id":?todo_id}

前端：连接到 API

使用 Axios 在 Vue 组件中连接到 FastAPI 提供的 API。

//?TodoList.vue

methods:?{
??async?createTodo()?{
????const?res?=?await?axios.post('http://localhost:8000/todos/',?this.newTodo);
????//?处理响应
??}
}

测试和调试

运行前后端应用并进行测试，确保所有部分正常工作，包括数据的创建、读取、更新和删除。

##部署

介绍如何将前后端分离的应用部署到服务器或云平台上。

部署 FastAPI 应用

可以使用如 Gunicorn 加 Nginx 的组合来部署 FastAPI 应用。

部署 Vue 应用

Vue 应用可以构建为静态文件并部署到任何 Web 服务器或前端托管服务，如 Netlify 或 Vercel。

总结

使用 FastAPI 和 Vue.js 实现前后端分离的项目，不仅能够提供出色的开发体验，还能带来高性能和灵活的 Web 应用。通过本文的指南，你可以开始构建自己的前后端分离应用，并逐步扩展其功能和复杂性。