# card-project

**Repository Path**: bs6/card-project

## Basic Information

- **Project Name**: card-project
- **Description**: 一个自动生成名片的Java小项目
- **Primary Language**: Java
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-21
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 个人主页名片生成系统

**填写表单，一键生成专属个人名片主页**

[![Java](https://img.shields.io/badge/Java-Servlet-orange.svg)](https://www.oracle.com/java/)
[![Vue](https://img.shields.io/badge/Vue.js-1.x-brightgreen.svg)](https://vuejs.org/)
[![Bootstrap](https://img.shields.io/badge/Bootstrap-3-blue.svg)](https://getbootstrap.com/)
[![MySQL](https://img.shields.io/badge/MySQL-8.0-4479A1.svg)](https://www.mysql.com/)
[![Tomcat](https://img.shields.io/badge/Tomcat-9.0-red.svg)](https://tomcat.apache.org/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)]()

</div>

---

## 效果预览

### 编辑页面 — 5步引导式表单

填写个人信息、教育经历、工作经历、技能列表和特长，提交后自动生成名片链接。

![编辑页面](docs/screenshot-bianji.png)

### 名片展示页 — 精美个人主页

每个用户拥有独立的专属名片页面，支持多用户注册，每人一个链接。

![名片展示页](docs/screenshot-u.png)

---

## 技术栈

| 层级 | 技术 | 说明 |
|------|------|------|
| 后端 | Java Servlet + JDBC + FastJSON | 原生 Servlet 处理请求，JDBC 直连数据库 |
| 前端 | Vue.js 1.x + vue-resource + jQuery | 数据绑定与 AJAX 请求 |
| UI 框架 | Bootstrap 3 + Layer 弹窗 | 响应式布局 + 交互弹窗 |
| 数据库 | MySQL 8.0 | 5 张关联表存储用户完整信息 |
| 服务器 | Tomcat 9.0 | Servlet 容器 |
| 构建 | Maven | 依赖管理与项目构建 |

> 所有前端资源（Vue、Bootstrap、jQuery、Layer 等）均为本地静态文件，无需联网即可运行。

---

## 快速开始

### 1. 初始化数据库

```sql
-- 创建数据库并执行初始化脚本
source sql/init.sql;
```

### 2. 配置数据库连接

修改 `src/main/resources/db.properties`：

```properties
url=jdbc:mysql://localhost:3306/bao_card?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
user=root
password=你的密码
```

### 3. IDEA 导入运行

1. IDEA 打开项目根目录（含 `pom.xml`）
2. Maven 自动识别并下载依赖
3. 配置 Tomcat：
   - `Run` → `Edit Configurations` → 添加 `Tomcat` → `Local`
   - `Deployment` → 添加 `Artifact` → `card-project:war exploded`
   - Application context 设为 `/`
4. 启动 Tomcat，访问 `http://localhost:8080/bianji.html`

---

## 项目结构

```
card-project/
├── pom.xml                          # Maven 配置
├── sql/
│   └── init.sql                     # 数据库初始化脚本
├── docs/
│   ├── screenshot-bianji.png        # 编辑页截图
│   └── screenshot-u.png             # 名片页截图
├── src/main/
│   ├── java/com/bao/
│   │   ├── bean/                    # 实体类（User/Edu/Work/Skill/Specialty/Info/Result）
│   │   ├── db/                      # 数据访问层（BaseDao + 各 DaoImp）
│   │   ├── util/                    # 工具类（DBUtil 数据库连接）
│   │   ├── service/                 # 业务层（DBService）
│   │   └── servlet/                 # 控制层（6个 Servlet）
│   ├── resources/
│   │   └── db.properties            # 数据库配置
│   └── webapp/
│       ├── bianji.html              # 5步引导表单页
│       ├── index.html               # 静态名片展示页
│       ├── u.html                   # 动态名片页（?userid=xxx）
│       └── source/                  # 前端静态资源
└── API.md                           # 接口文档
```

---

## 数据库设计

5 张表通过 `userid` 关联，链表结构存储多段经历：

| 表名 | 说明 | 关联关系 |
|------|------|----------|
| `bao_user` | 用户基础信息（姓名、头像、座右铭等） | 主表 |
| `bao_edu` | 教育经历（学校、专业、时间段） | userid → bao_user.id |
| `bao_work` | 工作经历（公司、职位、描述） | userid → bao_user.id |
| `bao_skill` | 技能列表（技能名、熟练度） | userid → bao_user.id |
| `bao_specialty` | 个人特长 | userid → bao_user.id |

---

## 页面说明

| 页面 | 路径 | 功能 |
|------|------|------|
| 编辑页 | `bianji.html` | 5 步引导式表单，依次填写基本信息、教育、工作、技能、特长 |
| 静态名片 | `index.html` | 硬编码的示例名片展示页（不走数据库） |
| 动态名片 | `u.html?userid=xxx` | 根据 userid 从数据库加载用户数据，动态渲染名片 |

---

## API 接口

项目提供完整的 RESTful 风格接口，详见 [API.md](API.md)。

主要接口包括：用户 CRUD、教育经历管理、工作经历管理、技能管理、特长管理。