【创新实训#03】解锁前端后端协同开发：Vue3 + TypeScript 和 FastAPI 学习记-CSDN博客

本文链接：https://blog.csdn.net/zyf222333/article/details/147462504

一、前言

学习 Vue3 + TypeScript 与 FastAPI 出于多方面考虑。技术层面，项目复杂度提升使传统开发模式面临挑战，Vue3 的新特性配合 TypeScript 的类型系统可优化前端开发质量与效率，FastAPI 的高性能及便捷接口定义、自动文档生成功能能有效解决后端性能瓶颈。从职业发展来看，掌握全栈技术有助于增强竞争力、拓展职业路径。通过学习这两项技术，实现前后端深度协同，打造优质应用，提升技术水平与项目主导力，为未来开发事业筑牢根基。

二、Vue3 + TypeScript

1.基础知识储备

1.1Vue3 核心概念

响应式系统：Vue3 采用全新的 Proxy 实现代替 Vue2 的 Object.defineProperty，Proxy 可以直接监听对象属性的添加、删除和修改，实现更高效、更全面的响应式数据绑定。

示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello Vue3'
});

console.log(state.count); // 输出：0

state.count++;
console.log(state.count); // 输出：1

组件化：将页面拆分成多个独立、可复用的组件，便于开发、维护和管理。

示例：

import { defineComponent } from 'vue';

export default defineComponent({
  template: '<div>{{ message }}</div>',
  setup() {
    const message = ref('Hello Vue3 Component');
    return { message };
  }
});

生命周期：Vue3 组件在运行过程中有一系列生命周期钩子函数，可用于执行特定逻辑。例如：onBeforeMount（组件挂载前）、onMounted（组件挂载后）、onBeforeUnmount（组件卸载前）、onUnmounted（组件卸载后）等。

示例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
};

1.2TypeScript 基本语法和类型系统

1.2.1基本语法

变量声明：使用 let 和 const 声明变量，指定变量类型。

let num: number = 10;
const str: string = 'Hello TypeScript';

函数定义：函数参数和返回值都有类型标注。

function add(a: number, b: number): number {
  return a + b;
}

1.2.2类型系统

基本类型：包括 number（数字）、string（字符串）、boolean（布尔值）、null、undefined 等。

数组类型：可以是元素类型后跟 []，或 Array<元素类型>。

对象类型：通过接口（interface）或类型别名（type）定义对象的形状。

2.搭配 TypeScript 使用 Vue

参考vue.js官方文章：搭配 TypeScript 使用 Vue | Vue.js

Vue 与 TypeScript 的搭配使用具有诸多优势，项目配置时推荐使用 create-vue 搭建基于 Vite 且 TypeScript 就绪的 Vue 项目，开发阶段依赖好的 IDE 配置获取类型错误反馈，对于单文件组件可使用 vue-tsc 或 vite-plugin-checker 进行类型检查，Vue CLI 不再推荐使用。

IDE 方面，强烈推荐 Visual Studio Code 搭配 Vue - Official 扩展，WebStorm 及其他 JetBrains IDE 也支持 TypeScript 和 Vue。

配置 tsconfig.json 时，create-vue 搭建的项目有预先配置，手动配置需注意多个选项。

在常见使用说明中，需通过 defineComponent() 定义组件以让 TypeScript 正确推导类型，在单文件组件中通过设置 script 标签的 lang="ts" 属性使用 TypeScript，模板中的表达式也支持 TypeScript，Vue 支持使用 TSX 编写组件，还有泛型组件的两种使用方式以及特定 API 的使用指南。

3.项目实践

借鉴优质博主的博客，完成TodoList应用开发

// 数据模型定义
export interface TodoItem {
  id: symbol
  content: string
  completed: boolean
  createdAt: Date
}

//组件逻辑实现
<template>
  <div class="todo-container">
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="输入待办事项"
    />
    <ul>
      <li 
        v-for="todo in todos" 
        :key="todo.id.toString()"
        :class="{ 'completed': todo.completed }"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
        />
        {{ todo.content }}
        <button @click="removeTodo(todo.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TodoItem } from '@/types/todo'

const newTodo = ref<string>('')
const todos = ref<TodoItem[]>([])

const addTodo = () => {
  if (!newTodo.value.trim()) return
  
  todos.value.push({
    id: Symbol(),
    content: newTodo.value.trim(),
    completed: false,
    createdAt: new Date()
  })
  
  newTodo.value = ''
}

const removeTodo = (id: symbol) => {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

三、FastAPI

1.FastAPI 的特点和优势

FastAPI 是基于 Python 3.7+ 的现代化异步 Web 框架，适用于构建高性能 API。其主要特点和优势如下：

高性能 ：FastAPI 的性能接近 Node.js 和 Go，是 Python 框架中性能出色的之一。得益于 Starlette 和 Pydantic 的支持，其在处理并发请求时表现优异，异步支持使其能充分利用现代硬件的多核特性，提高并发处理能力。

易用性 ：语法简洁直观，易于上手。提供自动数据验证、类型检查和文档生成等功能，极大地提升了开发效率。基于 Python 的类型提示，减少约 40% 的人为错误，提高功能开发速度约 200% 至 300%。

自动文档生成功能 ：内置支持生成基于 OpenAPI 的文档，并自动生成 Swagger UI 和 ReDoc 界面，使开发者可以轻松测试和调试 API。这不仅方便了前后端的协作，也提高了开发效率，减少了重复工作。

与 Django 对比 ：Django 是全栈框架，专为关系数据库应用打造，功能完备但学习曲线陡峭，扩展需优化。FastAPI 是高性能微框架，聚焦 Web API，轻量设计易于扩展，非常适合容器化部署。在性能方面，FastAPI 更快，支持异步和 WebSocket，更适合高流量场景。

与 Flask 对比 ：Flask 是轻量微框架，强调灵活性，简单易学，但需自行搭配工具。FastAPI 在性能上优于 Flask，异步支持使其在处理高并发和大规模请求时更具优势。Flask 需手动集成 Swagger，而 FastAPI 自带自动文档生成功能。此外，FastAPI 使用 Pydantic 进行数据验证，类型提示加快开发，兼容性稍逊，但整体开发效率更高。

2.安装及使用

要求python3.7以上

使用如下的命令安装FastAPI。

pip install fastapi

还需要一个ASGI服务器，用于生产目的，如Uvicorn或Hypercorn。

pip install "uvicorn[standard]"

下面是一个简单的 FastAPI 示例，将这段代码拷贝到 main.py 中。

from typing import Union

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float
    is_offer: Union[bool, None] = None

@app.get("/")
def read_root():
    return {"Hello": "World"}

@app.get("/items/{item_id}")
def read_item(item_id: int, q: Union[str, None] = None):
    return {"item_id": item_id, "q": q}

@app.put("/items/{item_id}")
def update_item(item_id: int, item: Item):
    return {"item_name": item.name, "item_id": item_id}

要运行应用程序，使用以下命令启动服务器：

uvicorn main:app --reload

命令说明：

main：指向 main.py 文件（即 Python 模块）。

app：在 main.py 文件中通过 app = FastAPI() 创建的应用实例。

--reload：开启代码热重载，使得修改代码后服务器自动重启（适用于开发环境）。

四、收获

在学习 Vue3 + TypeScript 和 FastAPI 的过程中，我收获了众多宝贵的技术知识和技能。在 Vue3 方面，我熟练掌握了其核心概念，如响应式系统、组件化和生命周期等，并能运用 TypeScript 的类型系统进行类型检查，提升了代码质量和开发体验；同时，我还学会了优化组件性能，合理拆分组件以增强复用性。在 FastAPI 方面，我不仅能够构建高性能的 API，还掌握了其自动文档生成功能，大大提高了开发效率。