用户界面
一个好用的内容分发工具需要直观的操作界面。本章介绍如何构建用户界面。
技术选型
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Web 应用 | 跨平台、易部署 | 需要服务器 | 团队协作 |
| 桌面应用 | 本地运行、性能好 | 需要安装 | 个人使用 |
| 浏览器扩展 | 无需安装、集成度高 | 功能受限 | 轻量使用 |
| 命令行工具 | 简单、可脚本化 | 学习成本高 | 开发者 |
本教程选择 Web 应用，使用 FastAPI + Vue.js 技术栈。
后端 API 设计
项目结构
backend/
├── main.py # 入口文件
├── routers/
│ ├── articles.py # 文章相关接口
│ └── platforms.py # 平台相关接口
├── services/
│ ├── publisher.py # 发布服务
│ └── formatter.py # 格式化服务
└── models/
└── schemas.py # 数据模型安装依赖
bash
pip install fastapi uvicorn pydantic主入口文件
python
# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(title="内容分发工具")
# 允许跨域
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/")
def root():
return {"message": "内容分发工具 API"}数据模型
python
# models/schemas.py
from pydantic import BaseModel
from typing import List, Optional
class Article(BaseModel):
title: str
content: str
tags: List[str] = []
class PublishRequest(BaseModel):
article: Article
platforms: List[str]
class PublishResult(BaseModel):
platform: str
success: bool
url: Optional[str] = None
error: Optional[str] = None发布接口
python
# routers/articles.py
from fastapi import APIRouter
from models.schemas import PublishRequest, PublishResult
from typing import List
router = APIRouter()
@router.post("/publish", response_model=List[PublishResult])
async def publish_article(request: PublishRequest):
"""发布文章到多个平台"""
results = []
for platform in request.platforms:
try:
# 调用对应平台的发布服务
url = await publish_to_platform(
platform,
request.article
)
results.append(PublishResult(
platform=platform,
success=True,
url=url
))
except Exception as e:
results.append(PublishResult(
platform=platform,
success=False,
error=str(e)
))
return results前端界面
项目初始化
bash
npm create vite@latest frontend -- --template vue
cd frontend
npm install axios主要组件
vue
<!-- App.vue -->
<template>
<div class="container">
<h1>内容分发工具</h1>
<!-- 文章编辑区 -->
<div class="editor">
<input v-model="title" placeholder="文章标题" />
<textarea v-model="content" placeholder="文章内容（Markdown）" />
</div>
<!-- 平台选择 -->
<div class="platforms">
<label v-for="p in platforms" :key="p.id">
<input type="checkbox" v-model="selected" :value="p.id" />
{{ p.name }}
</label>
</div>
<!-- 发布按钮 -->
<button @click="publish" :disabled="publishing">
{{ publishing ? '发布中...' : '一键发布' }}
</button>
</div>
</template>脚本逻辑
javascript
// script 部分
import { ref } from 'vue'
import axios from 'axios'
const title = ref('')
const content = ref('')
const selected = ref([])
const publishing = ref(false)
const platforms = [
{ id: 'juejin', name: '掘金' },
{ id: 'zhihu', name: '知乎' },
{ id: 'wechat', name: '微信公众号' },
]
async function publish() {
publishing.value = true
try {
const res = await axios.post('/api/publish', {
article: { title: title.value, content: content.value },
platforms: selected.value
})
alert('发布完成')
} finally {
publishing.value = false
}
}下一步
用户界面完成，接下来进行测试和部署。