戏曲苑小程序(1.0版本)
项目简介
这是一个中国传统戏曲文化展示与传播平台的基础版本，包含微信小程序端和PC管理后台。系统实现了戏曲剧目展示、分类浏览、收藏、评论、科普知识、新闻资讯等核心功能，旨在弘扬中华优秀传统戏曲文化，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。
技术栈
后端技术
| 技术 | 版本/说明 |
|---|---|
| 运行环境 | Node.js |
| Web框架 | Express 4.16.1 |
| 数据库 | MySQL 5.7+ |
| 数据库驱动 | mysql |
| 身份认证 | jsonwebtoken (JWT) |
| 文件上传 | multer |
| 跨域处理 | cors |
| HTTP请求 | axios |
| 热重载 | nodemon |
管理后台技术
| 技术 | 版本/说明 |
|---|---|
| 前端框架 | Vue 2.x |
| UI组件库 | Element UI |
| 路由管理 | Vue Router |
| 状态管理 | Vuex |
| HTTP请求 | Axios |
| 富文本编辑器 | Quill |
小程序端技术
| 技术 | 版本/说明 |
|---|---|
| 开发框架 | 微信小程序原生框架 |
| 开发语言 | JavaScript (ES6+) |
| 样式语言 | WXSS |
| 模板语言 | WXML |
项目特点
- 前后端分离：后端提供RESTful API，前端独立开发部署
- 戏曲文化传播：专注于中国传统戏曲文化的展示与传播
- 多媒体支持：支持视频、音频、图片等多种媒体形式
- 分类浏览：按戏曲剧种分类浏览（京剧、豫剧、黄梅戏等）
- 科普教育：提供戏曲知识科普内容
- 富文本支持：支持富文本内容编辑和展示
功能模块
小程序端功能
1. 首页模块 (pages/index)
- 轮播图展示
- 戏曲分类导航
- 热门剧目推荐
- 最新剧目展示
- 搜索功能入口
2. 分类模块 (pages/cate)
- 按剧种分类浏览
- 分类列表展示
- 剧目筛选
3. 剧目详情模块 (pages/detail)
- 剧目图片展示
- 剧目基本信息（名称、编号、发源地）
- 视频播放
- 音频播放
- 剧目详情富文本展示
- 收藏功能
- 评论功能
4. 搜索模块 (pages/search)
- 关键词搜索
- 搜索结果展示
5. 收藏模块 (pages/star)
- 我的收藏列表
- 取消收藏
6. 评论模块 (pages/comment)
- 剧目评论
- 评论列表查看
7. 科普模块 (pages/kepu)
- 戏曲知识科普列表
- 科普详情 (
pages/kepu_detail)
8. 新闻资讯模块 (pages/news)
- 戏曲新闻列表
- 新闻详情 (
pages/news_detail)
9. 个人中心模块 (pages/my)
- 用户信息展示
- 我的收藏
- 问题反馈 (
pages/question) - 用户信息编辑 (
pages/userInfo)
管理后台功能
1. 首页仪表盘
- 数据统计概览
2. 轮播图管理
- 轮播图列表
- 新增/编辑/删除轮播图
3. 分类管理
- 戏曲剧种分类列表
- 新增/编辑/删除分类
4. 剧目管理
- 剧目信息列表
- 新增/编辑/删除剧目
- 剧目图片/视频/音频上传
- 富文本详情编辑
- 热门/最新标记
5. 科普管理
- 科普文章列表
- 新增/编辑/删除科普内容
6. 新闻管理
- 新闻资讯列表
- 新增/编辑/删除新闻
7. 用户管理
- 用户列表
- 用户信息查看
8. 收藏管理
- 收藏记录列表
9. 评论管理
- 评论列表
- 评论审核
10. 问题反馈
- 用户反馈列表
- 回复处理
项目结构
1.0 基础版本/
├── admin/ # 管理后台（Vue2 + Element UI）
│ ├── public/ # 静态资源
│ ├── src/
│ │ ├── api/ # API接口封装
│ │ ├── assets/ # 静态资源
│ │ ├── components/ # 公共组件
│ │ ├── router/ # 路由配置
│ │ ├── store/ # Vuex状态管理
│ │ ├── utils/ # 工具函数
│ │ ├── views/ # 页面视图
│ │ ├── App.vue # 根组件
│ │ └── main.js # 入口文件
│ └── package.json
│
├── express/ # 后端服务（Express + MySQL）
│ ├── bin/
│ │ └── www # 启动入口
│ ├── config/ # 配置文件
│ ├── controllers/ # 控制器
│ ├── public/
│ │ └── images/ # 上传文件存储
│ ├── routes/ # 路由文件
│ ├── services/ # 业务逻辑层
│ ├── util/ # 工具函数
│ ├── app.js # Express应用配置
│ └── package.json
│
├── min/ # 微信小程序
│ ├── images/ # 图片资源
│ ├── pages/ # 页面目录
│ │ ├── index/ # 首页
│ │ ├── cate/ # 分类页
│ │ ├── detail/ # 剧目详情
│ │ ├── search/ # 搜索页
│ │ ├── star/ # 我的收藏
│ │ ├── comment/ # 评论页
│ │ ├── kepu/ # 科普列表
│ │ ├── kepu_detail/ # 科普详情
│ │ ├── news/ # 新闻列表
│ │ ├── news_detail/ # 新闻详情
│ │ ├── my/ # 个人中心
│ │ ├── userInfo/ # 用户信息
│ │ └── question/ # 问题反馈
│ ├── utils/ # 工具函数
│ ├── app.js # 小程序入口
│ ├── app.json # 小程序配置
│ └── app.wxss # 全局样式
│
├── 截图/ # 项目截图
├── xiqu.sql # 数据库SQL文件
├── 数据库创建方法.md # 数据库创建说明
├── mysql操作手册.md # MySQL操作说明
├── mysql.sh # MySQL脚本
├── 运行必读 copy.docx # 运行说明文档
├── 戏曲苑.xmind # 项目思维导图
└── 戏曲苑小程序的设计与实现.docx # 文章文档
数据模型
用户表 (users)
{
id: int, // 用户ID
phone: varchar(255), // 手机号
password: varchar(255), // 密码
username: varchar(255), // 用户名
sex: varchar(255), // 性别
nickname: varchar(255), // 昵称
openId: varchar(1100), // 微信OpenID
avatar: varchar(255), // 头像
role: int // 角色 (0普通用户, 99管理员)
}
剧目表 (product)
{
id: int, // 剧目ID
title: varchar(255), // 剧目名称
cate_id: int, // 分类ID
idNum: varchar(100), // 编号
address: varchar(255), // 发源地
video_url: varchar(255), // 视频URL
audio_url: varchar(255), // 音频URL
cover: varchar(255), // 封面图
imgs: varchar(10000), // 图集
content: longtext, // 剧目详情（富文本）
is_hot: int, // 是否热门 (1是 2否)
is_new: int, // 是否最新 (1是 2否)
create_time: timestamp, // 创建时间
update_time: timestamp // 更新时间
}
分类表 (cate)
{
id: int, // 分类ID
title: varchar(255), // 分类名称（剧种名）
cover: varchar(255) // 分类图标
}
评论表 (comment)
{
id: int, // 评论ID
user_id: int, // 用户ID
product_id: int, // 剧目ID
content: longtext, // 评论内容
create_time: timestamp // 创建时间
}
收藏表 (star)
{
id: int, // 收藏ID
user_id: int, // 用户ID
product_id: int // 剧目ID
}
科普表 (kepu)
{
id: int, // 科普ID
title: varchar(255), // 标题
poster: varchar(255), // 封面图
content: longtext, // 内容（富文本）
create_time: timestamp // 创建时间
}
新闻表 (news)
{
id: int, // 新闻ID
title: varchar(255), // 标题
poster: varchar(255), // 封面图
content: longtext, // 内容（富文本）
create_time: timestamp // 创建时间
}
轮播图表 (banner)
{
id: int, // 轮播图ID
cover: varchar(255) // 图片URL
}
戏曲剧种分类
| 剧种名称 | 说明 |
|---|---|
| 京剧 | 中国国粹，形成于北京 |
| 豫剧 | 河南地方戏，中国五大剧种之一 |
| 黄梅戏 | 安徽地方戏，以抒情见长 |
| 粤剧 | 广东地方戏，又称广东大戏 |
| 川剧 | 四川地方戏，以变脸著称 |
| 昆曲 | 百戏之祖，世界非遗 |
运行环境要求
后端环境
- Node.js 14.0+
- MySQL 5.7+
- npm 或 yarn
管理后台
- Node.js 14.0+
- npm 或 yarn
- 现代浏览器（Chrome、Firefox、Edge等）
小程序端
- 微信开发者工具（最新稳定版）
- 基础库版本 2.19.0+
- 需要有效的AppID
快速开始
1. 数据库配置
- 创建MySQL数据库
CREATE DATABASE xiqu CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
- 导入数据库文件
mysql -u root -p xiqu < xiqu.sql
- 修改数据库配置
编辑express/config/db.js：
var db = mysql.createConnection({
database: 'xiqu', // 数据库名称
port: '3306', // 端口号
host: 'localhost', // 主机地址
user: 'root', // 用户名
password: 'root', // 密码（修改为你的密码）
});
2. 启动后端服务
# 进入后端目录
cd express
# 安装依赖
npm install
# 启动服务（开发模式）
npm run dev
后端服务默认运行在 http://localhost:5002
3. 启动管理后台
# 进入管理后台目录
cd admin
# 安装依赖
npm install
# 启动开发服务器
npm run serve
管理后台默认运行在 http://localhost:8080
4. 运行小程序
- 打开微信开发者工具
- 选择"导入项目"
- 选择
min目录 - 填入AppID（可使用测试号）
- 点击"导入"
5. 配置小程序API地址
编辑 min/utils/request.js，修改API基础地址：
const baseUrl = 'http://localhost:5002'; // 修改为你的后端地址
默认账号
管理后台
- 手机号：admin
- 密码：123456
小程序端
- 支持微信授权登录
版本说明
这是戏曲苑小程序的 1.0 基础版本，包含核心的戏曲展示功能。
如需更多功能，请参考：
- 2.0 社区版本（图片）：增加社区动态发布功能（图片分享）
- 3.0 社区（视频+图片）和活动版本：增加视频分享和活动报名功能
注意事项
- 本项目为学习演示项目，部分数据为模拟数据
- 生产环境部署需要配置HTTPS
- 小程序上线需要完成微信认证
- 建议定期备份数据库数据
- 视频和音频文件较大，注意服务器存储空间
常见问题
Q: 数据库连接失败？
A: 检查MySQL服务是否启动，数据库配置是否正确
Q: 图片/视频无法显示？
A: 检查后端服务是否启动，文件路径配置是否正确
Q: 小程序无法请求后端？
A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"
Q: 管理后台登录失败？
A: 确认数据库中users表有管理员账号（role=99）
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
