快速上手：FastAPI与Vue.js无缝集成，解锁前后端开发新姿势

引言

随着现代Web应用的复杂性日益增加，前后端分离的开发模式已经成为了主流。FastAPI 和 Vue.js 分别作为 Python 和 JavaScript 的前端和后端框架，因其高效、易用和强大的功能，被越来越多的开发者所青睐。本文将为您详细介绍如何快速上手 FastAPI 与 Vue.js 的无缝集成，解锁前后端开发新姿势。

FastAPI 简介

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，它具有 Pythonic 的数据验证和响应式依赖注入。以下是 FastAPI 的一些关键特点：

使用 Python 3.6+，遵循异步编程
基于标准 Python 类型提示
高性能：无阻塞的异步执行
自动文档和交互式 API
强大的依赖注入系统

Vue.js 简介

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。以下是 Vue.js 的一些关键特点：

易于上手，渐进式框架
组件化思想，可复用性强
双向数据绑定，实现数据和视图的同步更新
声明式渲染，提高开发效率
支持服务器端渲染（SSR）

快速集成步骤

1. 环境准备

首先，确保您已经安装了 Python 和 Node.js 环境。接下来，使用以下命令分别安装 FastAPI 和 Vue.js：

# 安装 FastAPI pip install fastapi uvicorn # 安装 Vue.js npm install vue@next

2. 创建 FastAPI 项目

创建一个名为 myapp 的目录，并进入该目录：

mkdir myapp cd myapp

在 myapp 目录下，创建一个名为 main.py 的文件，并添加以下代码：

from fastapi import FastAPI app = FastAPI() @app.get("/") async def read_root(): return {"message": "Hello World"}

使用以下命令启动 FastAPI 应用：

uvicorn main:app --reload

此时，您可以在浏览器中访问 http://127.0.0.1:8000/，看到响应结果为 {"message": "Hello World"}。

3. 创建 Vue.js 项目

在 myapp 目录下，创建一个名为 frontend 的子目录，并进入该目录：

mkdir frontend cd frontend

在 frontend 目录下，创建一个名为 package.json 的文件，并添加以下内容：

{ "name": "my-vue-app", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "webpack serve --mode development", "build": "webpack --mode production" }, "dependencies": { "vue": "^2.6.14" } }

然后，安装 webpack 和 vue-loader：

npm install webpack@4 webpack-cli@3 vue-loader@15.9.3 vue-template-compiler@2.6.14

创建 src 目录，并在其中创建 App.vue 文件：

<template> <div id="app"> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello FastAPI!' } } } </script> <style> #app { text-align: center; margin-top: 60px; } </style>

运行以下命令启动 Vue.js 应用：

npm run dev

此时，您可以在浏览器中访问 http://127.0.0.1:8080/，看到响应结果为 Hello FastAPI!。

4. 跨域资源共享（CORS）

为了实现 Vue.js 应用与 FastAPI 服务的通信，我们需要处理跨域资源共享（CORS）问题。在 FastAPI 应用中，我们可以通过添加 CORS 头部来允许跨域请求。

修改 main.py 文件，添加以下代码：

from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.middleware.cors import CORSMiddleware app = FastAPI() # CORS 中间件 app.add_middleware( CORSMiddleware, allow_origins=["http://127.0.0.1:8080"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) @app.get("/") async def read_root(): return {"message": "Hello World"}

重新启动 FastAPI 应用，此时 Vue.js 应用可以成功调用 FastAPI 服务的接口。