简介
前后端分离是现代 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 应用。通过本文的指南，你可以开始构建自己的前后端分离应用，并逐步扩展其功能和复杂性。
