FastAPI介绍
FastAPI是一个用于构建API的现代、快速（高性能）的Web框架，使用Python并基于标准的Python类型提示。它的关键特性包括快速性能、高效编码、减少bug、智能编辑器支持、简单易学、简短代码、健壮性以及标准化。FastAPI自动提供了交互式API文档（Swagger UI和ReDoc），使得API的测试和使用变得异常简单。
SQLModel介绍
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_engine class 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 FastAPI from sqlmodel import SQLModel, Session app = 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-app npm 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应用提供了强大的工具。