尧图网站建设 )
戏曲苑小程序(1.0版本)项目简介这是一个中国传统戏曲文化展示与传播平台的基础版本包含微信小程序端和PC管理后台。系统实现了戏曲剧目展示、分类浏览、收藏、评论、科普知识、新闻资讯等核心功能旨在弘扬中华优秀传统戏曲文化采用前后端分离架构适合作为微信小程序全栈开发学习项目或计算机设计参考。技术栈后端技术技术版本/说明运行环境Node.jsWeb框架Express 4.16.1数据库MySQL 5.7数据库驱动mysql身份认证jsonwebtoken (JWT)文件上传multer跨域处理corsHTTP请求axios热重载nodemon管理后台技术技术版本/说明前端框架Vue 2.xUI组件库Element UI路由管理Vue Router状态管理VuexHTTP请求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,// 用户IDphone:varchar(255),// 手机号password:varchar(255),// 密码username:varchar(255),// 用户名sex:varchar(255),// 性别nickname:varchar(255),// 昵称openId:varchar(1100),// 微信OpenIDavatar:varchar(255),// 头像role:int// 角色 (0普通用户, 99管理员)}剧目表 (product){id:int,// 剧目IDtitle:varchar(255),// 剧目名称cate_id:int,// 分类IDidNum:varchar(100),// 编号address:varchar(255),// 发源地video_url:varchar(255),// 视频URLaudio_url:varchar(255),// 音频URLcover: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,// 分类IDtitle:varchar(255),// 分类名称剧种名cover:varchar(255)// 分类图标}评论表 (comment){id:int,// 评论IDuser_id:int,// 用户IDproduct_id:int,// 剧目IDcontent:longtext,// 评论内容create_time:timestamp// 创建时间}收藏表 (star){id:int,// 收藏IDuser_id:int,// 用户IDproduct_id:int// 剧目ID}科普表 (kepu){id:int,// 科普IDtitle:varchar(255),// 标题poster:varchar(255),// 封面图content:longtext,// 内容富文本create_time:timestamp// 创建时间}新闻表 (news){id:int,// 新闻IDtitle:varchar(255),// 标题poster:varchar(255),// 封面图content:longtext,// 内容富文本create_time:timestamp// 创建时间}轮播图表 (banner){id:int,// 轮播图IDcover:varchar(255)// 图片URL}戏曲剧种分类剧种名称说明京剧中国国粹形成于北京豫剧河南地方戏中国五大剧种之一黄梅戏安徽地方戏以抒情见长粤剧广东地方戏又称广东大戏川剧四川地方戏以变脸著称昆曲百戏之祖世界非遗运行环境要求后端环境Node.js 14.0MySQL 5.7npm 或 yarn管理后台Node.js 14.0npm 或 yarn现代浏览器Chrome、Firefox、Edge等小程序端微信开发者工具最新稳定版基础库版本 2.19.0需要有效的AppID快速开始1. 数据库配置创建MySQL数据库CREATEDATABASExiquCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;导入数据库文件mysql-uroot-pxiquxiqu.sql修改数据库配置编辑express/config/db.jsvardbmysql.createConnection({database:xiqu,// 数据库名称port:3306,// 端口号host:localhost,// 主机地址user:root,// 用户名password:root,// 密码修改为你的密码});2. 启动后端服务# 进入后端目录cdexpress# 安装依赖npminstall# 启动服务开发模式npmrun dev后端服务默认运行在http://localhost:50023. 启动管理后台# 进入管理后台目录cdadmin# 安装依赖npminstall# 启动开发服务器npmrun serve管理后台默认运行在http://localhost:80804. 运行小程序打开微信开发者工具选择导入项目选择min目录填入AppID可使用测试号点击导入5. 配置小程序API地址编辑min/utils/request.js修改API基础地址constbaseUrlhttp://localhost:5002;// 修改为你的后端地址默认账号管理后台手机号admin密码123456小程序端支持微信授权登录版本说明这是戏曲苑小程序的1.0 基础版本包含核心的戏曲展示功能。如需更多功能请参考2.0 社区版本图片增加社区动态发布功能图片分享3.0 社区视频图片和活动版本增加视频分享和活动报名功能注意事项本项目为学习演示项目部分数据为模拟数据生产环境部署需要配置HTTPS小程序上线需要完成微信认证建议定期备份数据库数据视频和音频文件较大注意服务器存储空间常见问题Q: 数据库连接失败A: 检查MySQL服务是否启动数据库配置是否正确Q: 图片/视频无法显示A: 检查后端服务是否启动文件路径配置是否正确Q: 小程序无法请求后端A: 检查request.js中的baseUrl配置开发时需在微信开发者工具中关闭不校验合法域名Q: 管理后台登录失败A: 确认数据库中users表有管理员账号role99许可证本项目仅供学习交流使用请勿用于商业用途。本项目详情https://www.aiyuanma.vip/posts/classical-chinese-opera-1.0-basic 戏曲苑小程序(1.0版本)
戏曲苑小程序(1.0版本)项目简介这是一个中国传统戏曲文化展示与传播平台的基础版本包含微信小程序端和PC管理后台。系统实现了戏曲剧目展示、分类浏览、收藏、评论、科普知识、新闻资讯等核心功能旨在弘扬中华优秀传统戏曲文化采用前后端分离架构适合作为微信小程序全栈开发学习项目或计算机设计参考。技术栈后端技术技术版本/说明运行环境Node.jsWeb框架Express 4.16.1数据库MySQL 5.7数据库驱动mysql身份认证jsonwebtoken (JWT)文件上传multer跨域处理corsHTTP请求axios热重载nodemon管理后台技术技术版本/说明前端框架Vue 2.xUI组件库Element UI路由管理Vue Router状态管理VuexHTTP请求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,// 用户IDphone:varchar(255),// 手机号password:varchar(255),// 密码username:varchar(255),// 用户名sex:varchar(255),// 性别nickname:varchar(255),// 昵称openId:varchar(1100),// 微信OpenIDavatar:varchar(255),// 头像role:int// 角色 (0普通用户, 99管理员)}剧目表 (product){id:int,// 剧目IDtitle:varchar(255),// 剧目名称cate_id:int,// 分类IDidNum:varchar(100),// 编号address:varchar(255),// 发源地video_url:varchar(255),// 视频URLaudio_url:varchar(255),// 音频URLcover: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,// 分类IDtitle:varchar(255),// 分类名称剧种名cover:varchar(255)// 分类图标}评论表 (comment){id:int,// 评论IDuser_id:int,// 用户IDproduct_id:int,// 剧目IDcontent:longtext,// 评论内容create_time:timestamp// 创建时间}收藏表 (star){id:int,// 收藏IDuser_id:int,// 用户IDproduct_id:int// 剧目ID}科普表 (kepu){id:int,// 科普IDtitle:varchar(255),// 标题poster:varchar(255),// 封面图content:longtext,// 内容富文本create_time:timestamp// 创建时间}新闻表 (news){id:int,// 新闻IDtitle:varchar(255),// 标题poster:varchar(255),// 封面图content:longtext,// 内容富文本create_time:timestamp// 创建时间}轮播图表 (banner){id:int,// 轮播图IDcover:varchar(255)// 图片URL}戏曲剧种分类剧种名称说明京剧中国国粹形成于北京豫剧河南地方戏中国五大剧种之一黄梅戏安徽地方戏以抒情见长粤剧广东地方戏又称广东大戏川剧四川地方戏以变脸著称昆曲百戏之祖世界非遗运行环境要求后端环境Node.js 14.0MySQL 5.7npm 或 yarn管理后台Node.js 14.0npm 或 yarn现代浏览器Chrome、Firefox、Edge等小程序端微信开发者工具最新稳定版基础库版本 2.19.0需要有效的AppID快速开始1. 数据库配置创建MySQL数据库CREATEDATABASExiquCHARACTERSETutf8mb4COLLATEutf8mb4_general_ci;导入数据库文件mysql-uroot-pxiquxiqu.sql修改数据库配置编辑express/config/db.jsvardbmysql.createConnection({database:xiqu,// 数据库名称port:3306,// 端口号host:localhost,// 主机地址user:root,// 用户名password:root,// 密码修改为你的密码});2. 启动后端服务# 进入后端目录cdexpress# 安装依赖npminstall# 启动服务开发模式npmrun dev后端服务默认运行在http://localhost:50023. 启动管理后台# 进入管理后台目录cdadmin# 安装依赖npminstall# 启动开发服务器npmrun serve管理后台默认运行在http://localhost:80804. 运行小程序打开微信开发者工具选择导入项目选择min目录填入AppID可使用测试号点击导入5. 配置小程序API地址编辑min/utils/request.js修改API基础地址constbaseUrlhttp://localhost:5002;// 修改为你的后端地址默认账号管理后台手机号admin密码123456小程序端支持微信授权登录版本说明这是戏曲苑小程序的1.0 基础版本包含核心的戏曲展示功能。如需更多功能请参考2.0 社区版本图片增加社区动态发布功能图片分享3.0 社区视频图片和活动版本增加视频分享和活动报名功能注意事项本项目为学习演示项目部分数据为模拟数据生产环境部署需要配置HTTPS小程序上线需要完成微信认证建议定期备份数据库数据视频和音频文件较大注意服务器存储空间常见问题Q: 数据库连接失败A: 检查MySQL服务是否启动数据库配置是否正确Q: 图片/视频无法显示A: 检查后端服务是否启动文件路径配置是否正确Q: 小程序无法请求后端A: 检查request.js中的baseUrl配置开发时需在微信开发者工具中关闭不校验合法域名Q: 管理后台登录失败A: 确认数据库中users表有管理员账号role99许可证本项目仅供学习交流使用请勿用于商业用途。本项目详情https://www.aiyuanma.vip/posts/classical-chinese-opera-1.0-basic