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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62359.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS笔记(一)炉石传说卡牌设计1

目标 我要通过html实现一张炉石传说的卡牌设计 问题 其中必须就要考虑到各个元素的摆放&#xff0c;形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。 1️⃣ 基本概念 在CSS里面有行元素&#xff0c;块元素&#xff0c;内联元素&#xff0c;常见的行元…

文本搜索程序(Qt)

头文件 #ifndef TEXTFINDER_H #define TEXTFINDER_H#include <QWidget> #include <QFileDialog> #include <QFile> #include <QTextEdit> #include <QLineEdit> #include <QTextStream> #include <QPushButton> #include <QMess…

GAMES101:现代计算机图形学入门-笔记-09

久违的101图形学回归咯 今天的话题应该是比较轻松的&#xff1a;聊一聊在渲染中比较先进的topics Advanced Light Transport 首先是介绍一系列比较先进的光线传播方法&#xff0c;有无偏的如BDPT&#xff08;双向路径追踪&#xff09;&#xff0c;MLT&#xff08;梅特罗波利斯…

【C++篇】排队的艺术:用生活场景讲解优先级队列的实现

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

【unity】WebSocket 与 EventSource 的区别

WebSocket 也是一种很好的选择&#xff0c;尤其是在需要进行 双向实时通信&#xff08;例如聊天应用、实时数据流等&#xff09;时。与 EventSource 不同&#xff0c;WebSocket 允许客户端和服务器之间建立一个持久的、全双工的通信通道。两者的区别和适用场景如下&#xff1a;…

Oracle 数据库 IDENTITY 列

IDENTITY列是Oracle数据库12c推出的新特性。之所以叫IDENTITY列&#xff0c;是由于其支持ANSI SQL 关键字 IDENTITY&#xff0c;其内部实现还是使用SEQUENCE。 不过推出这个新语法也是应该的&#xff0c;毕竟MyQL已经有 AUTO_INCREMENT列&#xff0c;而SQL Server也已经有IDENT…

前端学习笔记之文件下载(1.0)

因为要用到这样一个场景&#xff0c;需要下载系统的使用教程&#xff0c;所以在前端项目中就提供了一个能够下载系统教程的一个按钮&#xff0c;供使用者进行下载。 所以就试着写一下这个功能&#xff0c;以一个demo的形式进行演示&#xff0c;在学习的过程中也发现了中文路径…

【阅读记录-章节4】Build a Large Language Model (From Scratch)

文章目录 4. Implementing a GPT model from scratch to generate text4.1 Coding an LLM architecture4.1.1 配置小型 GPT-2 模型4.1.2 DummyGPTModel代码示例4.1.3 准备输入数据并初始化 GPT 模型4.1.4 初始化并运行 GPT 模型 4.2 Normalizing activations with layer normal…

浅谈——深度学习和马尔可夫决策过程

深度学习是一种机器学习方法&#xff0c;它通过模拟大脑的神经网络来进行数据分析和预测。它由多层“神经元”组成&#xff0c;每一层从数据中提取出不同的特征。多层次的结构使得深度学习模型可以捕捉到数据中的复杂关系&#xff0c;特别适合处理图片、语音等复杂数据。 马尔可…

Python PDF转JPG图片小工具

Python PDF转JPG图片小工具 1.简介 将单个pdf装换成jpg格式图片 Tip: 1、软件窗口默认最前端&#xff0c;不支持调整窗口大小&#xff1b; 2、可通过按钮选择PDF文件&#xff0c;也可以直接拖拽文件到窗口&#xff1b; 3、转换质量有5个档位&#xff0c;&#xff08;0.25&a…

「qt交叉编译arm64」支持xcb、X11

完整的交叉编译好支持xcb的qt库&#xff08;qt5.15.2、arm64、xcb、no-opengl&#xff09; 已安装xcb、X11库的交叉编译器&#xff08;x86_64-aarch64-linux-gnu&#xff09; 文章目录 1. 修改qmake.conf&#xff0c;指定交叉编译器2. 配置编译选项&#xff0c;执行configureL…

使用SOAtest进行功能回归测试

持续集成是将所有开发人员的工作副本合并到共享的主线上。这个过程使软件开发对开发人员来说更容易访问、更快、风险更小。 阅读这篇文章&#xff0c;让我们了解如何配置Parasoft SOAtest作为持续集成过程的一部分&#xff0c;来执行功能测试和回归测试。我们将介绍如何使用主…

ais_server 学习笔记

ais_server 学习笔记 一前序二、ais init1、时序图如下2. 初始化一共分为以下几个重要步骤&#xff1a;2.1.1、在ais_server中启动main函数&#xff0c;然后创建AisEngine&#xff0c;接着初始化AisEngine2.1.2、解析/var/camera_config.xml 文件&#xff0c;获取相关配置参数。…

L1G3000 任务-浦语提示词工程

基础任务 (完成此任务即完成闯关) 背景问题&#xff1a;近期相关研究指出&#xff0c;在处理特定文本分析任务时&#xff0c;语言模型的表现有时会遇到挑战&#xff0c;例如在分析单词内部的具体字母数量时可能会出现错误。任务要求&#xff1a;利用对提示词的精确设计&#xf…

Unity之一键创建自定义Package包

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity之一键创建自定义Package包 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; …

Redis开发04:Redis的INFO信息解析

命令解释redis_versionRedis 的版本号&#xff0c;这里是 3.2.100。redis_git_sha1Redis 使用的 Git SHA1 校验值&#xff0c;表示当前代码的版本。redis_git_dirty如果 Redis 当前运行的代码是脏版本&#xff08;未提交的修改&#xff09;&#xff0c;该值为 1&#xff0c;否则…

python的Flask框架使用

python的Flask框架使用 python环境搭建conda安装python自带的虚拟环境&#xff1a;venv python环境搭建 官网地址 点击downloads 选择你需要的版本&#xff0c;我这里使用的3.12.6 选择Windows installer (64-bit) 选择自定义安装&#xff0c;勾选以管理员权限安装&#xff0…

网络原理(一)—— http

什么是 http http 是一个应用层协议&#xff0c;全称为“超文本传输协议”。 http 自 1991 年诞生&#xff0c;目前已经发展为最主流使用的一种应用层协议。 HTTP 往往基于传输层的 TCP 协议实现的&#xff0c;例如 http1.0&#xff0c;http1.0&#xff0c;http2.0 http3 是…

CTF之密码学(Polybius密码)

棋盘密码&#xff0c;也称为Polybius密码或方格密码&#xff0c;是一种基于替换的加密方法。以下是对棋盘密码的详细解析&#xff1a; 一、加密原理 棋盘密码使用一个5x5的方格棋盘&#xff0c;其中填充了26个英文字母&#xff08;通常i和j被视为同一个字母并放在同一个格子中…

二刷代码随想录第16天

513. 找树左下角的值 找到深度最大的点&#xff0c;遍历方式左边节点在右边节点前面&#xff0c;找到就返回&#xff0c;一定就是最左下角的值了 class Solution { public:int max_depth -1;int result 0;int findBottomLeftValue(TreeNode* root) {traversal(root, 0);ret…