bttoxin_webserver
BtToxin 毒素数据库 Web 前端项目，基于 Vue 3 + TypeScript + Vite 构建。
快速启动
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
启动后访问 http://localhost:5173/ 查看前端页面。
主要页面
| 路由 | 页面 | 功能 |
|---|---|---|
/ |
任务提交页 | 上传 .fna 文件并提交分析任务 |
/:sessionId |
任务监控页 | 实时查看任务执行状态和日志 |
项目结构
bttoxin_webserver/
├── public/ # 静态资源
│ └── favicon.ico
├── src/
│ ├── api/ # API 请求层
│ │ ├── http.ts # axios 实例、拦截器、错误规范
│ │ ├── types.ts # API 类型定义
│ │ ├── bttoxin.ts # 毒素接口：list/detail/download
│ │ └── task.ts # 任务接口：createTask/getTaskState/downloadResult
│ ├── components/
│ │ └── task/ # 任务监控组件
│ │ ├── TaskFlowPanel.vue # 工作流步骤可视化
│ │ ├── TaskStatusBar.vue # 任务状态概览栏
│ │ ├── TaskStepLogDrawer.vue # 步骤日志抽屉
│ │ └── TaskSubmitForm.vue # 任务提交表单
│ ├── composables/ # 组合式函数
│ │ ├── useAsync.ts # 通用异步状态封装
│ │ └── useTaskState.ts # 任务状态管理
│ ├── router/ # 路由配置
│ │ └── index.ts
│ ├── stores/ # Pinia 状态管理
│ │ ├── counter.ts # 示例 store
│ │ └── toxin.ts # 毒素业务 store
│ ├── types/ # TypeScript 类型定义
│ │ └── task.ts # 任务相关类型
│ ├── utils/ # 工具函数
│ │ ├── error.ts # 错误格式化、文件下载
│ │ └── task.ts # 任务工具函数
│ ├── views/ # 页面视图
│ │ ├── TaskSubmitView.vue # 任务提交页
│ │ └── TaskMonitorView.vue# 任务监控页
│ ├── __tests__/ # 单元测试
│ │ └── App.spec.ts
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
环境配置
开发环境 .env.development:
VITE_API_BASE_URL=http://127.0.0.1:8000
生产环境 .env.production:
VITE_API_BASE_URL=https://your.domain/api
API 请求使用方式
1. 直接调用 API 函数
import { listToxins, getToxinDetail } from '@/api/bttoxin'
// 获取列表
const data = await listToxins({ q: 'Cry', page: 1, pageSize: 20 })
console.log(data.items, data.total)
// 获取详情
const detail = await getToxinDetail('toxin-id')
2. 通过 Pinia Store 调用（推荐）
<script setup lang="ts">
import { onMounted } from 'vue'
import { useToxinStore } from '@/stores/toxin'
const store = useToxinStore()
onMounted(() => {
store.fetchList()
})
// 更新筛选条件
function onSearch(keyword: string) {
store.updateQuery({ q: keyword })
}
// 翻页
function onPageChange(page: number) {
store.goToPage(page)
}
</script>
<template>
<div v-if="store.loading">加载中...</div>
<div v-else-if="store.error">{{ store.error.message }}</div>
<ul v-else>
<li v-for="item in store.items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
3. 使用 useAsync 组合式函数
<script setup lang="ts">
import { useAsync } from '@/composables/useAsync'
import { getToxinDetail } from '@/api/bttoxin'
const { loading, error, data, execute } = useAsync(getToxinDetail)
// 调用
execute('toxin-id')
</script>
<template>
<div v-if="loading">加载中...</div>
<div v-else-if="error">{{ error.message }}</div>
<div v-else>{{ data?.name }}</div>
</template>
4. 文件下载
import { downloadFasta, downloadCsv } from '@/api/bttoxin'
import { downloadBlob } from '@/utils/error'
// 下载单个 FASTA
const blob = await downloadFasta('toxin-id')
downloadBlob(blob, 'toxin.fasta')
// 下载 CSV
const csvBlob = await downloadCsv({ family: 'Cry' })
downloadBlob(csvBlob, 'toxins.csv')
开发指南
安装依赖
pnpm install
启动开发服务器
pnpm dev
访问 http://localhost:5173/ 查看前端页面。
构建生产版本
pnpm build
预览生产构建
pnpm preview
运行单元测试
pnpm test:unit
类型检查
pnpm type-check
代码检查
pnpm lint
推荐 IDE 配置
浏览器插件
- Chrome: Vue.js devtools
- Firefox: Vue.js devtools