# official-website

**Repository Path**: coderlaogu/official-website

## Basic Information

- **Project Name**: official-website
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2026-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 杭州玄鸽科技有限公司官网

Vue 3 + Vite + Node.js + Express 开发的企业官网项目

## 技术栈

### 前端
- Vue 3 (Composition API + Script Setup)
- Vite 3
- Vue Router 4
- Axios
- Swiper
- WOW.js + Animate.css
- Bootstrap 4

### 后端
- Node.js 18
- Express
- JSON 文件存储

### 开发工具
- ESLint + Prettier
- Vitest (单元测试)
- Docker

## 快速开始

### 环境要求
- Node.js >= 18
- npm >= 8

### 安装依赖

前端依赖：
```bash
npm install
```

后端依赖：
```bash
cd server
npm install
```

或一次性安装：
```bash
npm install
cd server && npm install
```

### 配置环境变量

前端配置（`.env`）：
```env
VITE_API_BASE_URL=http://localhost:3001/api
VITE_APP_TITLE=杭州玄鸽科技有限公司
VITE_APP_COMPANYNAME=杭州玄鸽科技有限公司
VITE_APP_ADDRESS=浙江省杭州市拱墅区万家花城8幢
VITE_APP_PHONE=15328965713
VITE_APP_EMAIL=1437594522@qq.com
VITE_APP_QQ=1437594522
```

后端配置（`server/.env`）：
```env
PORT=3001
NODE_ENV=development
CORS_ORIGIN=http://localhost:3000
```

### 启动项目

#### 方式一：使用启动脚本（最简单）
```bash
./start-all.sh
```

#### 方式二：同时启动前后端（推荐）
```bash
npm run dev:all
```

#### 方式三：分别启动

启动后端（端口 3001）：
```bash
npm run server
# 或
cd server && npm run dev
```

启动前端（端口 3000）：
```bash
npm run dev
```

#### 方式三：生产环境构建

构建前端：
```bash
npm run build
```

预览生产构建：
```bash
npm run preview
```

启动后端：
```bash
cd server && npm start
```

## 项目结构

```
official-website/
├── server/                 # 后端服务
│   ├── data/             # 数据存储（JSON文件）
│   ├── routes/           # API 路由
│   ├── utils/            # 工具函数
│   └── index.js          # 后端入口
├── src/                  # 前端源码
│   ├── assets/           # 静态资源
│   ├── components/       # Vue 组件
│   ├── composables/      # 组合式函数
│   ├── directives/       # 自定义指令
│   ├── router/           # 路由配置
│   ├── utils/            # 工具函数
│   ├── view/             # 页面组件
│   └── main.js           # 前端入口
├── public/               # 公共资源
│   ├── sitemap.xml      # 站点地图
│   └── robots.txt       # 搜索引擎配置
└── dist/                 # 构建输出

```

## API 接口

### 新闻接口
- `GET /api/news` - 获取新闻列表（支持分页、分类、搜索）
- `GET /api/news/:id` - 获取新闻详情
- `GET /api/news/categories` - 获取新闻分类

### 产品接口
- `GET /api/products` - 获取产品列表
- `GET /api/products/:id` - 获取产品详情

### 联系表单接口
- `POST /api/contact` - 提交联系表单
- `GET /api/contact` - 获取联系表单列表（管理后台）

### 邮件订阅接口
- `POST /api/newsletter/subscribe` - 邮件订阅
- `GET /api/newsletter/subscribers` - 获取订阅者列表（管理后台）

## 数据存储

项目使用 JSON 文件存储数据，所有数据保存在 `server/data/` 目录：

- `news.json` - 新闻数据
- `contacts.json` - 联系表单数据
- `newsletters.json` - 邮件订阅数据

数据会在项目首次运行时自动初始化，后续的增删改操作会实时保存到对应的 JSON 文件。

## 可用脚本

```bash
# 开发
npm run dev              # 启动前端开发服务器
npm run server           # 启动后端服务器
npm run dev:all          # 同时启动前后端（推荐）

# 构建
npm run build            # 构建生产版本
npm run preview          # 预览生产构建

# 代码质量
npm run lint             # ESLint 代码检查
npm run format           # Prettier 代码格式化

# 测试
npm run test             # 运行单元测试
npm run test:ui          # 运行测试 UI 界面
npm run test:coverage    # 生成测试覆盖率报告
```

## Docker 部署

使用 Docker Compose 部署：
```bash
docker-compose up -d
```

停止服务：
```bash
docker-compose down
```

## 功能特性

### 已实现
✅ 响应式设计（支持移动端、平板、桌面）
✅ 暗色模式切换
✅ 图片懒加载
✅ 表单实时验证
✅ 全局错误处理
✅ SEO 优化（sitemap.xml、robots.txt）
✅ 单元测试
✅ API 请求封装
✅ Docker 容器化
✅ 邮件订阅功能

### 页面列表
- 首页
- 公司产品（创业者之家平台、GuDB数据库、箱野盲盒商城）
- 相关服务
- 客户案例
- 新闻动态
- 公司介绍
- 工作机会
- 联系我们

## 注意事项

1. 确保后端服务先启动，再启动前端
2. 开发环境默认端口：前端 3000，后端 3001
3. 数据文件会自动创建在 `server/data/` 目录
4. 修改环境变量后需要重启服务才能生效

## 技术要点

- **Bootstrap** - 整体框架，主要用到了栅格系统和一些组件
- **Swiper** - 轮播插件
- **WOW.js + Animate.css** - 网站的整体动画插件
- **Axios** - AJAX 请求
- **Vue Router** - 路由
- **Session Storage** - 本地存储
- **对可复用的组件进行了封装，对 API 接口进行了封装**

## License

ISC