构建现代Web应用:FastAPI、SQLModel、Vue 3与Axios的结合使用

发布于:2024-11-29 ⋅ 阅读:(26) ⋅ 点赞:(0)

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)操作的简单案例:

  1. 安装依赖

    pip install fastapi "uvicorn[standard]" sqlmodel
  2. 定义模型

    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
  3. 创建数据库和表

    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
  4. 实现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项目可以遵循以下步骤:

  1. 新建项目目录

    npm create vite@latest my-vue-app -- --template vue
  2. 安装项目依赖

    cd my-vue-app
    npm install
  3. 启动项目

    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',
    age30
  });
  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',
    age35
  });
  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应用提供了强大的工具。