第 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()
PY6.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 session6.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 与事件传递。
完成本章后,你已经具备从命令行、数据层、后端异步到前端交互的一条龙基础。接下来可深入路由、状态管理与全栈联调。