抗战胜利80周年纪念网站

互联网数据库开发课程大作业 | Yii2 Advanced + Vue3 前后端分离架构

📋 项目简介

本项目是为纪念中国人民抗日战争暨世界反法西斯战争胜利80周年而开发的主题网站，采用 Yii2 Advanced 模板 + Vue3 前后端分离架构，旨在通过现代Web技术展示抗战历史、缅怀英烈、传承红色基因。

🎯 主题背景

2025年是中国人民抗日战争暨世界反法西斯战争胜利80周年。通过构建这个纪念网站，我们希望让更多人了解那段艰苦卓绝的抗战历史，铭记民族英雄的丰功伟绩。

⭐ 项目结构

项目采用 Yii2 Advanced + Vue3 标准前后端分离架构：

backend-yii2/ - Yii2 Advanced 后端（API 服务 + 后台管理）
frontend-vue/ - Vue3 前端项目
data/ - 数据库文件和项目文档

🏗️ 项目架构

技术栈

前端

框架: Vue 3.x
路由: Vue Router
状态管理: Pinia / Vuex
HTTP库: Axios
UI框架: Element Plus (可选)
构建工具: Vite

后端

框架: Yii2 Advanced Template
数据库: MySQL 8.0
API: RESTful API
认证: JWT

架构设计

前端 (Vue3) ←─── HTTP/JSON ───→ 后端 (Yii2) ←─── SQL ───→ 数据库 (MySQL)

📁 项目结构

Web-Database-Development/
│
├── backend-yii2/           # Yii2 Advanced 后端 ⭐
│   ├── frontend/          # API 服务层
│   │   ├── controllers/  # API 控制器
│   │   │   └── ApiController.php  # 主 API 控制器
│   │   ├── config/       # API 配置
│   │   └── web/          # API 入口 (localhost:8080)
│   ├── backend/           # 后台管理系统
│   ├── common/            # 公共代码（前后台共享）
│   │   ├── models/       # 数据模型（10+张表）
│   │   │   ├── User.php
│   │   │   ├── HistoryEvent.php
│   │   │   ├── Hero.php
│   │   │   ├── Gallery.php
│   │   │   ├── TeamMember.php
│   │   │   ├── Comment.php
│   │   │   ├── Article.php
│   │   │   ├── Video.php
│   │   │   ├── Statistics.php
│   │   │   ├── Admin.php
│   │   │   └── Memorial.php
│   │   └── config/       # 公共配置（数据库等）
│   ├── console/           # 命令行工具
│   ├── environments/      # 环境配置（dev/prod）
│   ├── vendor/            # Composer 依赖
│   ├── composer.json      # Yii2 依赖配置
│   └── README.md          # 后端文档
│
├── frontend-vue/          # Vue3 前端项目 ⭐
│   ├── src/
│   │   ├── api/          # API 接口封装
│   │   ├── assets/       # 静态资源（CSS/图片/视频）
│   │   ├── components/   # 公共组件
│   │   │   ├── NavBar.vue
│   │   │   ├── WaveFoot.vue
│   │   │   └── ...
│   │   ├── views/        # 页面视图（7个主页面）
│   │   │   ├── HomeView.vue      # 首页
│   │   │   ├── HistoryView.vue   # 历史资料
│   │   │   ├── HeroView.vue      # 英雄人物
│   │   │   ├── GalleryView.vue   # 图片/视频库
│   │   │   ├── TeamView.vue      # 团队展示
│   │   │   ├── CommentView.vue   # 互动留言
│   │   │   ├── StatisticsView.vue # 数据统计
│   │   │   └── LoginView.vue     # 登录注册
│   │   ├── router/       # 路由配置
│   │   ├── App.vue       # 根组件
│   │   └── main.js       # 入口文件
│   ├── public/           # 静态资源
│   ├── package.json      # 前端依赖配置
│   ├── vite.config.js    # Vite 构建配置
│   └── start-frontend.ps1 # 启动脚本
│
├── data/                  # 项目数据 ⭐
│   ├── install/          # 数据库安装文件
│   │   └── install.sql   # 数据库初始化脚本（10+张表）
│   ├── raw_data/         # 原始数据文件
│   │   ├── article.csv
│   │   ├── hero.csv
│   │   ├── hisroty_event.csv
│   │   ├── import_raw.sql
│   │   ├── photo.csv
│   │   ├── test_photo.py
│   │   ├── test.py
│   │   └── video.csv
│   └── import_data.sql   # 数据导入脚本
│
├── report/               # 项目报告 ⭐
│   ├── deploy/          # 部署文档
│   ├── design/          # 设计文档
│   ├── implementation/  # 实现文档
│   ├── requirements/    # 需求文档
│   ├── slide/           # 项目演示文稿
│   ├── UserManual/      # 用户手册
│   ├── videos/          # 演示视频
│   └── individualAssignment/  # 个人作业
│       ├── 作业(2310364_柳昕彤).zip
│       ├── 作业(2310428_韩琦卓).zip
│       ├── 作业(2311605_王为).zip
│       ├── 作业(2312309_祝铭堃).zip
│       └── 作业(2312314_李政霖).zip
│
├── scripts/              # 脚本工具
│   └── import_raw_data.py  # 数据导入脚本
│
├── README.md              # 项目总文档（本文件）
└── INSTALL.md             # 快速安装指南

🚀 快速开始

一键部署

使用项目根目录的 deploy-docker.sh 脚本完成全自动部署:

chmod +x deploy-docker.sh
./deploy-docker.sh

注意需要修改脚本中的 MySQL 密码为你自己的密码。

DATA_COUNT=$(docker-compose exec -T mysql mysql -uroot -p<你的密码> war_memorial -se "SELECT COUNT(*) FROM hero;" 2>/dev/null | tail -1)

脚本执行流程:

✅ 检查 Docker 和 Docker Compose 环境
📦 安装前端依赖 (npm install)
🏗️ 构建前端生产版本 (npm run build)
🐳 启动 Docker 容器 (docker-compose up -d)
⏳ 等待 MySQL 数据库就绪 (健康检查)
🔧 配置后端数据库连接
📊 导入初始数据和示例数据

访问地址

部署完成后访问:

前端页面: http://localhost
后端 API: http://localhost:8080
健康检查: http://localhost:8080/health

配置说明

数据库配置

数据库凭据在 docker-compose.yml 中定义:

environment:
  MYSQL_ROOT_PASSWORD: zxc7777777
  MYSQL_DATABASE: war_memorial
  MYSQL_USER: war_user
  MYSQL_PASSWORD: war_pass

后端配置文件会在部署时自动生成到 backend-yii2/common/config/main-local.php:

return [
    'components' => [
        'db' => [
            'class' => 'yii\db\Connection',
            'dsn' => 'mysql:host=mysql;dbname=war_memorial',
            'username' => 'war_user',
            'password' => 'war_pass',
            'charset' => 'utf8mb4',
        ],
        'redis' => [
            'class' => 'yii\redis\Connection',
            'hostname' => 'redis',
            'port' => 6379,
            'database' => 0,
        ],
    ],
];

环境变量

在 docker-compose.yml 中可自定义环境变量:

php:
  environment:
    - DB_HOST=mysql
    - DB_NAME=war_memorial
    - DB_USER=war_user
    - DB_PASS=war_pass
    - REDIS_HOST=redis

完整安装环境要求

PHP: 8.0+ (推荐 8.4)
MySQL: 8.0+
Node.js: 16+ (推荐 18+)
Composer: 最新版本
开发工具: VS Code / PhpStorm

完整安装步骤

第一步：克隆项目

git clone https://github.com/DarkMatter-Gra/Web-Database-Development.git
cd Web-Database-Development

第二步：后端配置

1. 安装 PHP 依赖

cd backend-yii2
composer install

如果 Composer 速度慢，可配置国内镜像：

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

2. 配置数据库连接

创建/编辑 backend-yii2/common/config/main-local.php：

<?php
return [
    'components' => [
        'db' => [
            'class' => \yii\db\Connection::class,
            'dsn' => 'mysql:host=localhost;port=3306;dbname=war_memorial',
            'username' => 'root',
            'password' => '你的MySQL密码',
            'charset' => 'utf8mb4',
        ],
        'mailer' => [
            'class' => \yii\symfonymailer\Mailer::class,
            'viewPath' => '@common/mail',
            'useFileTransport' => true,
        ],
    ],
];

3. 创建并导入数据库

方式一：

# 创建数据库
mysql -u root -p -e "CREATE DATABASE IF NOT EXISTS war_memorial CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

# 导入基础表结构
mysql -u root -p war_memorial < data/install/install.sql

# 导入数据
cd data/raw_data
mysql -u root -p war_memorial --default-character-set=utf8mb4 < import_raw.sql

方式二：使用 MySQL 命令行

-- 1. 登录 MySQL
mysql -u root -p

-- 2. 创建数据库
CREATE DATABASE war_memorial CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 3. 使用数据库
USE war_memorial;

-- 4. 导入表结构
SOURCE D:/path/to/Web-Database-Development/data/install/install.sql;

-- 5. 导入数据
SOURCE D:/path/to/Web-Database-Development/data/raw_data/import_raw.sql;

4. 启动后端 API 服务

cd backend-yii2/frontend/web
php -S localhost:8080

或使用启动脚本：

.\backend-yii2\start-api.ps1

验证后端：访问 http://localhost:8080/api/statistics 应返回 JSON 数据。

第三步：前端配置

1. 安装 Node.js 依赖

cd frontend-vue
npm install

如果 npm 速度慢，可配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

2. 配置 API 地址

检查 frontend-vue/src/api/http.js 中的 API 地址：

const http = axios.create({
  baseURL: 'http://localhost:8080/api',  // 确保与后端地址一致
  timeout: 10000,
})

3. 启动前端开发服务器

npm run dev

或使用启动脚本：

.\start-frontend.ps1

访问前端：打开浏览器访问 http://localhost:6262

📊 已实现功能

✅ 前端功能（Vue3）

1. 首页模块 (HomeView.vue)

采用响应式布局设计，通过抗战主题轮播图展示重要历史图片，配合纪念活动公告板实时发布相关信息，提供快速导航入口让用户便捷访问各个功能模块。

2. 历史资料模块 (HistoryView.vue)

以时间轴形式展示 44 个抗战重大历史事件，支持按时期分类筛选（全面抗战、战略反攻等），点击事件卡片可弹出详情模态框查看完整信息。所有数据从后端 API 动态加载，确保内容的实时性和准确性。

3. 英雄人物模块 (HeroView.vue)

展示 19 位抗战英雄人物的生平事迹，提供分类筛选和分页加载功能优化浏览体验。每位英雄都有独立的详情页面，通过 API 对接从数据库实时获取英雄信息，包括生平简介、主要战绩等内容。

4. 光影见证模块 (GalleryView.vue)

采用瀑布流布局展示珍贵历史照片，集成 B站、YouTube 等平台的纪录影像资源。支持图片灯箱预览和左右切换浏览，视频可全屏播放，为用户提供沉浸式的历史影像体验。

5. 数据统计模块 (StatisticsView.vue)

实时展示网站统计数据，包括历史文章数量、抗战英雄数量、珍贵影像数量和互动留言数量。同时展示固定的历史数据，如抗战时期中日双方的兵力对比可视化图表，以及抗战胜利的重大意义阐述。

6. 互动留言模块 (CommentView.vue)

提供用户留言发布和浏览功能，采用分页加载方式展示历史留言。集成用户认证系统，确保留言的真实性和可追溯性，增强用户互动体验。

7. 团队展示模块 (TeamView.vue)

展示项目开发团队 5 位成员的详细信息,包括姓名、学号、角色职责和技术栈标签,并提供 GitHub 个人主页链接,便于了解团队构成和技术背景。

8. 用户认证模块 (LoginView.vue)

实现完整的用户注册和登录功能,采用 JWT Token 进行身份认证和会话管理。表单包含完善的验证机制,确保数据安全性和用户体验。

✅ 后端功能（Yii2）

1. RESTful API 接口

用户认证

POST /api/signup - 用户注册
POST /api/login - 用户登录

历史资料

GET /api/history-events - 获取历史事件列表（支持分页）
GET /api/articles - 获取文章列表（支持分页）

英雄人物

GET /api/heroes - 获取英雄列表（支持分类、分页）
GET /api/heroes/{id} - 获取英雄详情

多媒体资源

GET /api/gallery - 获取图片/视频库
GET /api/videos - 获取视频列表（支持分页）

互动功能

GET /api/comments - 获取留言列表（支持分页）
POST /api/comments - 发布留言

数据统计

GET /api/statistics - 获取统计数据（缓存 10 分钟）

2. 核心功能特性

✅ JWT 身份认证
✅ CORS 跨域配置
✅ Redis 缓存支持
✅ 统一响应格式
✅ 错误处理机制
✅ 请求日志记录
✅ 分页功能封装
✅ SQL 注入防护

✅ 数据库设计

已创建并填充数据的表：

表名	记录数	说明
user	-	用户表（含密码加密）
admin	-	管理员表
article	32	文章表（抗战资讯）
history_event	44	历史事件表（时间轴数据）
hero	19	英雄人物表
photo	-	照片库表
video	4	视频表
comment	-	评论留言表
category	-	分类表
statistic	-	统计表
setting	-	系统设置表
log	-	操作日志表
memorial	-	纪念馆表
team_member	-	团队成员表

👥 团队分工

本项目由 5 人团队开发，采用全栈 MVC 模式，每人负责一个完整的业务模块：

成员	学号	角色	核心职责	模块任务
柳昕彤	2310364	组长 / 前端架构 Owner	Vue3 搭建、路由配置、公共组件、视频录制	首页/资讯展示模块
祝铭堃	2312309	交互逻辑 Owner	Axios 封装、Pinia 状态管理、工具库	留言/评论模块
王为	2311605	后端架构 Owner	Yii2 搭建、Redis 缓存、JWT 认证	用户/权限模块
李政霖	2312314	数据库 Owner	ER 图设计、SQL 优化、触发器	核心资料/历史档案模块
韩琦卓	2310428	测试/运维 Owner	爬虫脚本、文档编写、集成测试	爬虫数据管理模块

📚 参考资料

📄 License

本项目仅供学习交流使用，请勿用于商业用途。

🐛 常见问题

1. Composer 安装失败

检查 PHP 版本 >= 8.0
使用国内镜像：composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
删除 vendor 目录重试

2. 数据库连接失败

检查 MySQL 服务是否启动
确认 main-local.php 中的用户名、密码
确认数据库名为 war_memorial
检查字符集为 utf8mb4

3. npm 安装失败

检查 Node.js 版本 >= 16
使用淘宝镜像：npm config set registry https://registry.npmmirror.com
删除 node_modules 和 package-lock.json 重试

4. CORS 跨域问题

确认后端在 http://localhost:8080 运行
检查 ApiController.php 中的 CORS 配置
前端 API 地址应为 http://localhost:8080/api

5. 数据不显示

检查数据库是否导入成功
验证 API 接口返回：访问 http://localhost:8080/api/statistics
查看浏览器控制台是否有错误
检查网络请求是否成功

📞 联系方式

项目仓库: GitHub
问题反馈: 提交 Issue
技术交流: 查看 Wiki

最后更新: 2025年12月14日

Name		Name	Last commit message	Last commit date
Latest commit History 64 Commits
Web-Database-Development		Web-Database-Development
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

抗战胜利80周年纪念网站

📋 项目简介

🎯 主题背景

⭐ 项目结构

🏗️ 项目架构

技术栈

前端

后端

架构设计

📁 项目结构

🚀 快速开始

一键部署

访问地址

配置说明

数据库配置

环境变量

完整安装环境要求

完整安装步骤

第一步：克隆项目

第二步：后端配置

1. 安装 PHP 依赖

2. 配置数据库连接

3. 创建并导入数据库

4. 启动后端 API 服务

第三步：前端配置

1. 安装 Node.js 依赖

2. 配置 API 地址

3. 启动前端开发服务器

📊 已实现功能

✅ 前端功能（Vue3）

1. 首页模块 (HomeView.vue)

2. 历史资料模块 (HistoryView.vue)

3. 英雄人物模块 (HeroView.vue)

4. 光影见证模块 (GalleryView.vue)

5. 数据统计模块 (StatisticsView.vue)

6. 互动留言模块 (CommentView.vue)

7. 团队展示模块 (TeamView.vue)

8. 用户认证模块 (LoginView.vue)

✅ 后端功能（Yii2）

1. RESTful API 接口

2. 核心功能特性

✅ 数据库设计

👥 团队分工

📚 参考资料

📄 License

🐛 常见问题

1. Composer 安装失败

2. 数据库连接失败

3. npm 安装失败

4. CORS 跨域问题

5. 数据不显示

📞 联系方式

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages