戏曲苑小程序(1.0版本)

戏曲苑小程序(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. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE xiqu CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p xiqu < xiqu.sql

3. 修改数据库配置 编辑 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. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择 min 目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

编辑 min/utils/request.js，修改API基础地址：

const baseUrl = 'http://localhost:5002'; // 修改为你的后端地址

默认账号

管理后台

• 手机号：admin
• 密码：123456

小程序端

• 支持微信授权登录

版本说明

这是戏曲苑小程序的 1.0 基础版本，包含核心的戏曲展示功能。

如需更多功能，请参考：

• 2.0 社区版本（图片）：增加社区动态发布功能（图片分享）
• 3.0 社区（视频+图片）和活动版本：增加视频分享和活动报名功能

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证
4. 建议定期备份数据库数据
5. 视频和音频文件较大，注意服务器存储空间

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片/视频无法显示？

A: 检查后端服务是否启动，文件路径配置是否正确

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

许可证

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

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/classical-chinese-opera-1.0-basic