141 lines
3.2 KiB
Markdown
141 lines
3.2 KiB
Markdown
# 唐家族谱网站
|
||
|
||
基于 Cloudflare Workers 的全栈家族族谱网站，使用树状图展示家族成员关系。
|
||
|
||
## 功能特性
|
||
|
||
- 密码保护访问（访问密码：`tangfamily`）
|
||
- 响应式设计，支持电脑端和手机端
|
||
- 树状图展示家族成员信息
|
||
- 管理后台用于添加、编辑、删除成员（管理密码：`shumengya5201314`）
|
||
- 数据存储在 Cloudflare KV
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
tangfamily/
|
||
├── src/
|
||
│ ├── index.ts # Worker 主文件，包含 API 路由
|
||
│ └── init-data.js # 初始化数据脚本
|
||
├── public/
|
||
│ ├── index.html # 访客登录页面
|
||
│ ├── tree.html # 族谱树展示页面
|
||
│ ├── admin-login.html # 管理员登录页面
|
||
│ └── admin.html # 管理后台页面
|
||
├── wrangler.jsonc # Cloudflare Workers 配置
|
||
└── package.json
|
||
```
|
||
|
||
## 本地开发
|
||
|
||
1. 安装依赖：
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. 启动开发服务器：
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
3. 访问 http://localhost:8787/
|
||
|
||
## 初始化数据
|
||
|
||
项目已包含初始家族成员数据（唐治明、舒邦莲、唐永洪、唐伟）。
|
||
|
||
### 方式一：通过管理后台添加
|
||
|
||
1. 访问 http://localhost:8787/admin-login.html
|
||
2. 输入管理员密码：`shumengya5201314`
|
||
3. 在管理后台逐个添加成员
|
||
|
||
### 方式二：查看初始化数据
|
||
|
||
运行以下命令查看初始化数据：
|
||
```bash
|
||
node src/init-data.js
|
||
```
|
||
|
||
## 访问说明
|
||
|
||
### 访客访问
|
||
1. 访问首页
|
||
2. 输入密码：`tangfamily`
|
||
3. 查看族谱树
|
||
|
||
### 管理员访问
|
||
1. 访问 `/admin-login.html`
|
||
2. 输入管理员密码：`shumengya5201314`
|
||
3. 在管理后台进行成员管理
|
||
|
||
## 部署到 Cloudflare
|
||
|
||
1. 登录 Cloudflare 账户：
|
||
```bash
|
||
npx wrangler login
|
||
```
|
||
|
||
2. 创建 KV 命名空间：
|
||
```bash
|
||
npx wrangler kv:namespace create "FAMILY_DATA"
|
||
```
|
||
|
||
3. 将输出的 ID 更新到 `wrangler.jsonc` 中的 `kv_namespaces.id` 字段
|
||
|
||
4. 部署 Worker：
|
||
```bash
|
||
npm run deploy
|
||
```
|
||
|
||
5. 访问你的 Workers 域名即可使用
|
||
|
||
## 数据结构
|
||
|
||
每个家族成员包含以下信息：
|
||
- `id`: 唯一标识符
|
||
- `name`: 姓名
|
||
- `birthYear`: 出生年份
|
||
- `gender`: 性别（男/女）
|
||
- `fatherId`: 父亲 ID（可选）
|
||
- `motherId`: 母亲 ID（可选）
|
||
|
||
## API 接口
|
||
|
||
- `POST /api/login` - 登录（访客或管理员）
|
||
- `GET /api/members` - 获取所有成员（需要认证）
|
||
- `POST /api/members` - 添加/更新成员（需要管理员权限）
|
||
- `POST /api/members/delete` - 删除成员（需要管理员权限）
|
||
|
||
## 技术栈
|
||
|
||
- Cloudflare Workers - 边缘计算平台
|
||
- Cloudflare KV - 键值存储
|
||
- TypeScript - 类型安全
|
||
- 原生 HTML/CSS/JavaScript - 前端页面
|
||
|
||
## 安全说明
|
||
|
||
- 所有 API 接口都需要身份验证
|
||
- Session Token 存储在 KV 中，有效期 24 小时
|
||
- 管理操作需要管理员权限验证
|
||
- 建议在生产环境中修改默认密码
|
||
|
||
## 自定义
|
||
|
||
### 修改密码
|
||
|
||
编辑 `src/index.ts` 中的常量：
|
||
```typescript
|
||
const VISITOR_PASSWORD = 'tangfamily';
|
||
const ADMIN_PASSWORD = 'shumengya5201314';
|
||
```
|
||
|
||
### 修改样式
|
||
|
||
所有样式都内联在 HTML 文件中，可直接修改 `public/*.html` 文件中的 `<style>` 标签。
|
||
|
||
## License
|
||
|
||
MIT
|