第 6 章：命令行、数据库、FastAPI 异步与前端基础

约 1251 字大约 4 分钟

2025-12-05

本章聚焦四个高频实战主题：命令行与文件操作、数据库选型与配置、FastAPI 异步机制、前端三件套与 Vue 入门。读完后，你应能快速搭建开发环境、完成基础数据层、写出高性能异步接口，并用 Vue 构建交互界面。

6.1 命令行与文件操作

6.1.1 为什么要用命令行

更高效的导航与批量操作（搜索、替换、批量重命名）。
自动化：脚本化重复任务，减少人为失误。
远程协作：SSH 进入服务器调试与部署。

6.1.2 常用命令速览（PowerShell / Bash）

查看位置：pwd
列目录：ls -la
切换目录：cd <path>，返回上级：cd ..
新建目录：mkdir src；新建文件：ni app.py（Bash: touch app.py）
复制/移动：cp a.txt b.txt / mv a.txt data/
删除：rm file.txt；递归删除目录：rm -r dist（谨慎）
搜索文本：rg "keyword" src（需 ripgrep）
查看端口占用（PowerShell）：netstat -ano | findstr 8000

6.1.3 实战练习

在项目根目录创建 notes，写入一份 cli-notes.md，记录 5 条常用命令。
使用 rg 搜索代码中的 TODO 并列出所在文件。
写一个简单脚本 scripts/clean.ps1，删除 .pyc 与 __pycache__。

6.1.4 常见陷阱

路径分隔符：Windows 多用 \，Bash 用 /，尽量使用相对路径与跨平台命令。
删除操作务必先 ls 确认；生产环境慎用 rm -r。
环境变量未加载导致命令找不到：确认已把工具加入 PATH，或用绝对路径执行。

6.2 数据库配置与选型

6.2.1 选型速查

关系型（PostgreSQL、MySQL）：事务、一致性强，适合业务数据。
文档型（MongoDB）：模式灵活，适合快速迭代与非结构化数据。
嵌入式（SQLite）：零运维，单机/本地开发首选。
推荐：开发阶段 SQLite 或 Docker 化的 PostgreSQL；生产优先 PostgreSQL。

6.2.2 本地快速起步

Docker 运行 PostgreSQL（PowerShell）：

docker run -d --name dev-postgres -p 5432:5432 -e POSTGRES_PASSWORD=devpass postgres:16

连接测试（psql）：

psql -h localhost -U postgres -d postgres -c "select version();"

SQLite 初始化（无需服务）：

python - <<'PY'
import sqlite3
con = sqlite3.connect('dev.db')
con.execute('create table if not exists users(id integer primary key, name text);')
con.commit()
PY

6.2.3 连接示例（SQLAlchemy + PostgreSQL）

# app/db.py
from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
from sqlalchemy.orm import declarative_base

DATABASE_URL = "postgresql+asyncpg://postgres:devpass@localhost:5432/postgres"

engine = create_async_engine(DATABASE_URL, echo=False)
SessionLocal = async_sessionmaker(engine, expire_on_commit=False)
Base = declarative_base()

async def get_db():
    async with SessionLocal() as session:
        yield session

6.2.4 备份与迁移

备份：pg_dump -Fc -f backup.dump postgres
恢复：pg_restore -d postgres backup.dump
迁移：推荐 Alembic；命令流：alembic init migrations → 配置数据库 URL → alembic revision --autogenerate -m "init" → alembic upgrade head。

6.3 FastAPI 异步机制

6.3.1 核心概念

async/await 描述协程，利用事件循环在 I/O 等待时切换任务。
适合 I/O 密集（数据库、HTTP 调用），不提升 CPU 密集型性能。
一次只在一个 await 处挂起；避免阻塞调用（如同步 DB 驱动、time.sleep）。

6.3.2 异步路由示例

from fastapi import FastAPI
import httpx

app = FastAPI()

@app.get("/weather")
async def weather():
    async with httpx.AsyncClient(timeout=5) as client:
        resp = await client.get("https://api.example.com/weather")
    return {"temp": resp.json().get("temp")}

使用 httpx.AsyncClient 或异步驱动的 DB，避免在异步函数里调用阻塞库。

6.3.3 异步数据库示例（SQLAlchemy 2.x）

from fastapi import Depends
from sqlalchemy import select
from app.db import Base, engine, get_db
from sqlalchemy.orm import Mapped, mapped_column

class User(Base):
    __tablename__ = "users"
    id: Mapped[int] = mapped_column(primary_key=True)
    name: Mapped[str] = mapped_column(nullable=False)

@app.on_event("startup")
async def on_startup():
    async with engine.begin() as conn:
        await conn.run_sync(Base.metadata.create_all)

@app.get("/users")
async def list_users(db=Depends(get_db)):
    result = await db.execute(select(User))
    return result.scalars().all()

6.3.4 调试与压测

开发启动：uvicorn app.main:app --reload --port 8000
快速压测：wrk -t4 -c64 -d20s http://localhost:8000/users
观察瓶颈：关注数据库连接池、外部 API 延迟，必要时加缓存或队列。

6.4 前端三件套 + Vue 入门

6.4.1 HTML / CSS / JS 要点

HTML：语义化标签（header/main/footer），表单元素与可访问性。
CSS：布局首选 Flex/Grid，使用变量与 BEM/Utility 规范类名，避免全局污染。
JS：模块化 import/export，ES6 基础（解构、模板字符串、Promise）。

6.4.2 Vue 响应式快速体验（Composition API）

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
const inc = () => count.value++
</script>

<template>
  <main>
    <h1>Hello Vue</h1>
    <p>Count: {{ count }}</p>
    <button @click="inc">+1</button>
  </main>
</template>

6.4.3 项目初始化（Vue 3 + Vite）

pnpm create vue@latest my-app
cd my-app
pnpm install
pnpm dev --host

选择 TypeScript + ESLint + Prettier 选项，保证类型与格式化。
开发时访问 http://localhost:5173，确保热更新正常。

6.4.4 练习路线

在组件中新增一个待办列表，支持新增、删除，数据存储在 ref 数组。
引入 Fetch 调用后端 FastAPI 接口（如 /users），在页面展示列表。
使用 CSS Grid 实现两栏布局，移动端切换为单栏。
将按钮提取为独立组件，演示 Props 与事件传递。