编写一个字幕网站（二）FastAPI 和 Uvicorn

在上一篇文章中，我们简略的学习了WebStorm, vue，Node.js 和 npm

Uvicorn

Uvicorn 是一个 高性能 的 ASGI 服务器，专为 Python 异步框架设计，特别适用于运行 FastAPI、Starlette 等现代的异步 Web 框架。

为什么使用 Uvicorn？

FastAPI 和 Uvicorn 的搭配：FastAPI 和 Uvicorn 是现代 Web 开发的一个完美组合。FastAPI 本身是异步框架，能够处理并发请求，而 Uvicorn 则提供了一个能够高效运行 FastAPI 应用的服务器。

简单和易用：Uvicorn 提供了一个非常简洁的命令行界面，支持热重载功能，可以快速启动和调试应用。

pip install uvicorn
img.png

uvicorn app:app –reload –host 127.0.0.1 –port 8080

这条命令用于启动 Uvicorn 服务器并运行一个 FastAPI 应用。下面是对各个部分的详细解释：

1. uvicorn

  • 这是启动 Uvicorn 服务器的命令。Uvicorn 是一个高性能的 ASGI 服务器，专为 Python 异步 Web 框架（如 FastAPI 和 Starlette）设计。
  • 它会将你的 FastAPI 应用加载到服务器中并开始监听请求。

2. app:app

  • 这是告诉 Uvicorn 应该运行哪个 Python 模块（应用）。
  • **app (第一个)**：指的是 模块名，即你的 Python 文件名。假设你的 FastAPI 应用定义在 app.py 中，那么这里就写 app，它会从当前目录加载 app.py 模块。
  • **app (第二个)**：指的是模块中定义的 FastAPI 应用对象。在 app.py 文件中，你可能会有如下代码：
    pip install fastapi
1
2
3
from fastapi import FastAPI

app = FastAPI()  # FastAPI 应用对象

这里的第二个 app 就是指 app 这个 FastAPI 实例。

3. --reload

  • 启用自动重载功能，意味着每当你修改应用代码时，Uvicorn 会自动重新加载服务器，而不需要手动重启服务器。这对于开发过程中调试代码非常有用。
  • 注意：--reload 仅在开发环境中使用，生产环境中应该禁用自动重载。

4. --host 127.0.0.1

  • --host 参数指定了服务器监听的 IP 地址。
  • 127.0.0.1 是 本地回环地址，表示服务器只会在本地机器上运行，外部设备无法访问。
  • 如果你希望从其他设备访问该服务，可以将 127.0.0.1 改为 0.0.0.0，表示服务器会监听所有可用的网络接口。

5. --port 8080

  • --port 参数指定了服务器监听的端口号。
  • 在这个例子中，服务器会在 8080 端口上监听请求。默认情况下，Uvicorn 会监听 8000 端口，但你可以通过这个参数来指定不同的端口。

总结

完整的命令 uvicorn app:app --reload --host 127.0.0.1 --port 8080 的含义是：

  • 启动 Uvicorn 服务器。
  • 从 app.py 文件中加载 FastAPI 应用对象 app。
  • 启用自动重载，意味着每次修改代码后都会自动重新启动服务器。
  • 服务器仅在本地计算机的 127.0.0.1（localhost）地址上监听，并在 8080 端口上接收请求。

举个例子：

假设你有一个 app.py 文件，内容如下：

1
2
3
4
5
6
7
from fastapi import FastAPI

app = FastAPI()

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

然后运行命令：

1
uvicorn app:app --reload --host 127.0.0.1 --port 8080

这样你的 FastAPI 应用就会在 http://127.0.0.1:8080 启动，可以通过浏览器或 API 客户端访问它。

如果你希望其他设备能够访问：

将 --host 127.0.0.1 改为 --host 0.0.0.0，这样服务器会监听所有网络接口，其他设备可以通过你的 IP 地址访问应用。

1
uvicorn app:app --reload --host 0.0.0.0 --port 8080

pnpm（一个 JavaScript 包管理工具）

npm install -g pnpm
pnpm –version

确保pnmp已经安装

webstorm新建项目

vite + vue
2025-04-13 222635.png

安装

pnpm install

运行前端代码

pnpm run dev