当前位置： 首页 > article >正文

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

article 2024/11/30 3:36:05

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


http://www.kler.cn/a/415082.html

相关文章：

  • C++优选算法十六 BFS解决最短路问题
  • 《深入理解经典广度优先遍历算法》
  • Web day02 Js Vue Ajax
  • 医院分诊管理系统｜Java｜SSM｜VUE｜ 前后端分离
  • JDK的版本演化，JDK要收费吗?
  • pcb元器件选型与焊接测试时的一些个人经验
  • linux系统中常用文件日常使用命令记录
  • 架构第十四章：zabbix-4
  • C++条件编译指令
  • Unity ShaderLab 实现交互地毯
  • 【zookeeper04】消息队列与微服务之zookeeper客户端访问
  • Linux基础项目包含（DNS，FTP，Samba）
  • 华为IPD流程学习之——深入解读123页华为IPD流程体系设计方法论PPT
  • STM32-- 看门狗--介绍、使用场景、失效场景
  • 2024健康大数据与智能医疗（ICHIH 2024）
  • LLM*：路径规划的大型语言模型增强增量启发式搜索
  • 第一篇：Admin.Net前端项目启动
  • LSTM卫星轨道预测(一)
  • 【HarmonyOS开发模板/组件分享 – 用户隐私政策弹窗】
  • 贪心算法-Huffman树 不等式 推公式
  • iscsi服务器
  • [问题记录] Android裁剪Provision应用后无法打开开发者选项
  • 基于Linux操作系统的DNS服务器实验
  • python网络爬虫进阶
  • 全面解析LLM业务落地：RAG技术的创新应用、ReAct的智能化实践及基于业务场景的评估框架设计
  • 开发一套ERP 第七弹 RUst 操作数据库