FastAPI是一个用于构建API的现代、快速（高性能）的Web框架，使用Python并基于标准的Python类型提示。它的关键特性包括快速性能、高效编码、减少bug、智能编辑器支持、简单易学、简短代码、健壮性以及标准化。FastAPI自动提供了交互式API文档（Swagger UI和ReDoc），使得API的测试和使用变得异常简单。
SQLModel是一个现代的Python ORM库，它结合了SQLAlchemy和Pydantic的优点，使得定义数据模型和数据库操作变得更加直观和高效。SQLModel通过使用Python类型注解来定义数据模型，最小化代码重复，无需在SQLAlchemy和Pydantic之间复制模型。它还支持异步操作，使得数据库操作更加高效。
FastAPI+SQLModel创建用户增删改查接口实例以下是一个使用FastAPI和SQLModel实现用户增删改查（CRUD）操作的简单案例：
安装依赖：
pip install fastapi "uvicorn[standard]" sqlmodel
定义模型：
from sqlmodel import Field, SQLModel, create_engineclass UserBase(SQLModel): id: int = Field(default=None, primary_key=True) name: str age: int = Field(default=None, nullable=True)class User(UserBase, table=True): pass
创建数据库和表：
from fastapi import FastAPIfrom sqlmodel import SQLModel, Sessionapp = FastAPI()engine = create_engine("sqlite:///./test.db")SQLModel.metadata.create_all(engine)@app.on_event("startup",)def on_startup(): SQLModel.metadata.create_all(engine)def get_session(): with Session(engine) as session: yield session
实现CRUD操作：
from fastapi import Depends, HTTPException, status@app.post("/users/", response_model=User)def create_user(user: UserBase, session: Session = Depends(get_session)): session.add(user) session.commit() session.refresh(user) return user@app.get("/users/{user_id}", response_model=User)def read_user(user_id: int, session: Session = Depends(get_session)): db_user = session.query(User).filter(User.id == user_id).first() if db_user is None: raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found") return db_user@app.put("/users/{user_id}", response_model=User)def update_user(user_id: int, user: UserBase, session: Session = Depends(get_session)): db_user = session.query(User).filter(User.id == user_id).first() if db_user is None: raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found") db_user.name = user.name db_user.age = user.age session.commit() session.refresh(db_user) return db_user@app.delete("/users/{user_id}", response_model=User)def delete_user(user_id: int, session: Session = Depends(get_session)): db_user = session.query(User).filter(User.id == user_id).first() if db_user is None: raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found") session.delete(db_user) session.commit() return db_user
Vue 3介绍Vue 3是Vue.js的第三个主要版本，引入了Composition API，这是一套新的基于函数的API，允许开发者更灵活地组织组件逻辑。Vue 3还带来了性能提升、更好的TypeScript支持、新的内置组件（如Fragment、Teleport、Suspense）等。
Axios介绍Axios是一个基于Promise的HTTP客户端，广泛用于浏览器和Node.js环境。它以其简洁的API和强大的功能，成为了现代Web开发中不可或缺的工具。Axios的核心特性包括从浏览器创建XMLHttpRequests、从Node.js创建http请求、支持Promise API、拦截请求和响应、转换请求和响应数据、取消请求等。
Vite创建Vue3项目Vite是一个新型前端构建工具，提供了快速的热重载（HMR）和对TypeScript、JSX、CSS等的支持。创建Vite项目可以遵循以下步骤：
新建项目目录：
npm create vite@latest my-vue-app -- --template vue
安装项目依赖：
cd my-vue-appnpm install
启动项目：
npm run dev
Vue3整合Axios在Vue 3项目的入口文件main.js中配置Axios：
import { createApp } from 'vue';import App from './App.vue';import axios from 'axios';const app = createApp(App);app.config.globalProperties.$axios = axios; // 将axios挂载到全局app.mount('#app');
使用Axios请求用户增删改查接口在Vue 3组件中使用Composition API和Axios发起HTTP请求：
<template> <div> <button @click="createUser">Create User</button> <button @click="fetchUsers">Fetch Users</button> <div v-for="user in users" :key="user.id"> <p>{{ user.name }} - {{ user.age }}</p> <button @click="updateUser(user.id)">Update</button> <button @click="deleteUser(user.id)">Delete</button> </div> </div></template><script setup>import { ref } from 'vue';import axios from 'axios';const users = ref([]);const createUser = async () => { const response = await axios.post('http://localhost:8000/users/', { name: 'John Doe', age: 30 }); users.value.push(response.data);};const fetchUsers = async () => { const response = await axios.get('http://localhost:8000/users/'); users.value = response.data;};const updateUser = async (id) => { await axios.put(`http://localhost:8000/users/${id}`, { name: 'Jane Doe', age: 35 }); const index = users.value.findIndex(user => user.id === id); if (index !== -1) { users.value[index] = await axios.get(`http://localhost:8000/users/${id}`); }};const deleteUser = async (id) => { await axios.delete(`http://localhost:8000/users/${id}`); users.value = users.value.filter(user => user.id !== id);};</script><style scoped>/* 样式 */</style>
总结FastAPI和SQLModel的结合为现代Web应用开发带来了一系列显著的优势，特别适合需要与SQL数据库交互的场景。Vue 3与Axios的结合为前端开发提供了强大的数据交互能力。通过Vite快速构建Vue 3项目，并整合Axios，我们可以高效地构建和请求用户增删改查接口，实现前后端的全栈开发。这种技术栈的结合不仅提高了开发效率，也为构建现代化的Web应用提供了强大的工具。
