小程序-基于java+SpringBoot+Vue的戏曲文化苑小程序设计与实现

项目运行

1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。

2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;

3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可

4.硬件环境:windows 7/8/10 4G内存以上;或者 Mac OS;

5.是否Maven项目: 否;查看源码目录中是否包含pom.xml;若包含,则为maven项目,否则为非maven项目

6.数据库:MySql 5.7/8.0等版本均可;

7.小程序:uniapp
毕设帮助,指导,本源码分享,调试部署(见文末)

系统介绍:

戏曲文化苑小程序是一个专注于戏曲文化的信息管理平台,旨在通过互联网技术提升戏曲文化的传播和管理效率。系统实现了操作日志管理、字典管理、公告管理、戏曲管理、戏曲收藏管理、戏曲留言管理、戏曲科普管理、用户管理、管理员管理等功能,使用MySql作为数据库,确保了数据的安全性和可靠性。
整体功能包含:

操作日志管理
字典管理
公告管理
戏曲管理
戏曲收藏管理
戏曲留言管理
戏曲科普管理
用户管理
管理员管理

前台模块:

用户登录/注册
戏曲浏览与收藏
戏曲留言
戏曲科普信息查看

后台模块:

管理员后台:戏曲管理、公告信息管理、公告类型管理、用户管理、管理员管理。
戏曲科普管理

功能截图:

在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

代码实现:

var _default = {data: function data() {return {username: '',password: '',codes: [{num: 1,color: '#000',rotate: '10deg',size: '16px'}, {num: 2,color: '#000',rotate: '10deg',size: '16px'}, {num: 3,color: '#000',rotate: '10deg',size: '16px'}, {num: 4,color: '#000',rotate: '10deg',size: '16px'}],options: ['请选择登录用户类型'],optionsValues: ['', 'yonghu'],index: 0,roleNum: 0};},onLoad: function onLoad() {var options = ['请选择登录用户类型'];var menus = _menu.default.list();this.menuList = menus;for (var i = 0; i < this.menuList.length; i++) {if (this.menuList[i].hasFrontLogin == '是') {options.push(this.menuList[i].roleName);this.roleNum++;}}if (this.roleNum == 1) {this.index = 1;}this.options = options;this.randomString(4);this.styleChange();},methods: {randomString: function randomString() {var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];var sizes = ['28', '30', '32', '34', '36'];for (var i = 0; i < len; i++) {// 随机验证码var key = Math.floor(Math.random() * chars.length);this.codes[i].num = chars[key];// 随机验证码颜色var code = '#';for (var j = 0; j < 6; j++) {var _key = Math.floor(Math.random() * colors.length);code += colors[_key];}this.codes[i].color = code;// 随机验证码方向var rotate = Math.floor(Math.random() * 30);var plus = Math.floor(Math.random() * 2);if (plus == 1) rotate = '-' + rotate;this.codes[i].rotate = 'rotate(' + rotate + 'deg)';// 随机验证码字体大小var size = Math.floor(Math.random() * sizes.length);this.codes[i].size = sizes[size] + 'rpx';}},styleChange: function styleChange() {this.$nextTick(function () {// document.querySelectorAll('.uni-yaoxianStyle .uni-yaoxianStyle-yaoxianStyle').forEach(el=>{//   el.style.backgroundColor = this.loginFrom.content.yaoxianStyle.backgroundColor// })});},onRegisterTap: function onRegisterTap(tableName) {uni.setStorageSync("loginTable", tableName);this.$utils.jump('../register/register');},onForgetTap: function onForgetTap() {this.$utils.jump('../forget/forget');},onLoginTap: function onLoginTap() {var _this = this;return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {var res;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:if (_this.optionsValues[_this.index]) {_context.next = 3;break;}_this.$utils.msg("请选择登陆人类型");return _context.abrupt("return");case 3:if (true) {_context.next = 6;break;}_this.$utils.msg("请输入正确的验证码");return _context.abrupt("return");case 6:_context.next = 8;return _this.$api.login("".concat(_this.optionsValues[_this.index]), {username: _this.username,password: _this.password});case 8:res = _context.sent;uni.setStorageSync("token", res.token);uni.setStorageSync("nickname", _this.username);uni.setStorageSync("nowTable", "".concat(_this.optionsValues[_this.index]));_context.next = 14;return _this.$api.session("".concat(_this.optionsValues[_this.index]));case 14:res = _context.sent;uni.setStorageSync("userid", res.data.id);if (res.data.vip) {uni.setStorageSync("vip", res.data.vip);}uni.setStorageSync("role", "".concat(_this.options[_this.index]));_this.$utils.tab("../index/index");case 19:case "end":return _context.stop();}}}, _callee);}))();},optionsChange: function optionsChange(e) {this.index = e.target.value;}}
};

源码获取:

大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/480476.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C/C++】内存管理详解:从new/delete到智能指针的全面解析

文章目录 更多文章C/C中的传统内存管理方式new和delete运算符malloc和free函数传统内存管理的弊端 智能指针的崛起智能指针的定义与作用C11引入的标准智能指针 详解C标准智能指针std::unique_ptr特点使用方法适用场景 std::shared_ptr特点使用方法适用场景 std::weak_ptr特点使…

通过 SSH 进行WordPress网站的高级服务器管理

我在管理hostease的服务器时&#xff0c;时常需要通过SSH登录服务器进行修改。而在网站管理中&#xff0c;SSH不仅是一个基础工具&#xff0c;更是高级用户用来精细化管理和优化服务器的重要工具。通过SSH&#xff0c;你可以深入监控服务器的性能、精细管理系统资源&#xff0c…

MFC 对话框中显示CScrollView实例

有时候我们需要在对话框中显示CScrollView效果的控件&#xff0c;类似于以下效果&#xff1a; 使用实例可参考&#xff1a;MFC对话框显示CScrollView例子_哔哩哔哩_bilibili 创建CScrollView中显示的子对话框与子类&#xff1a; 两个对话框对应的类&#xff1a; CScrollView继…

vue3 ajax获取json数组排序举例

使用axios获取接口数据 可以在代码中安装axios包&#xff0c;并写入到package.json文件&#xff1a; npm install axios -S接口调用代码举例如下&#xff1a; const fetchScore async () > {try {const res await axios.get(http://127.0.0.1:8000/score/${userInput.v…

详解登录MySQL时出现SSL connection error: unknown error number错误

目录 登录MySQL时出错SSL connection error: unknown error number 出错原因 使用MySQL自带的工具登录MySQL 登陆之后&#xff0c;使用如下命令进行查看 解决方法 找到MySQL8安装目录下的my.ini配置文件 记事本打开my.ini文件&#xff0c;然后按下图所示添加配置 此时再…

mini-spring源码分析

IOC模块 关键解释 beanFactory&#xff1a;beanFactory是一个hashMap, key为beanName, Value为 beanDefination beanDefination: BeanDefinitionRegistry&#xff0c;BeanDefinition注册表接口&#xff0c;定义注册BeanDefinition的方法 beanReference&#xff1a;增加Bean…

linux内核读写硬盘文件 kernel_writekernel_read

简介 在内核中读取硬盘文件&#xff0c;内核5.10测试了下&#xff0c;可以正常运行。 代码 1. 使用filp_open打开文件 2. 使用kernel_write和kernel_read读写文件 3. 使用filp_close关闭文件 #include <linux/module.h> #include <linux/init.h> #include &l…

记录一次 k8s 节点内存不足的排查过程

背景&#xff1a;前端服务一直报404&#xff0c;查看k8s日志&#xff0c;没发现报错&#xff0c;但是发现pods多次重启。 排查过程&#xff1a; 查看pods日志&#xff0c;发现日志进不去。 kubectrl logs -f -n weave pod-name --tail 100查看pod describe kubectl describ…

微软要求 Windows Insider 用户试用备受争议的召回功能

拥有搭载 Qualcomm Snapdragon 处理器的 Copilot PC 的 Windows Insider 计划参与者现在可以试用 Recall&#xff0c;这是一项臭名昭著的快照拍摄 AI 功能&#xff0c;在今年早些时候推出时受到了很多批评。 Windows 营销高级总监 Melissa Grant 上周表示&#xff1a;“我们听…

嵌入式Qt使用ffmpeg视频开发记录

在此记录一下Qt下视频应用开发的自学历程&#xff0c;可供初学者参考和避雷。 了解常用音频格式yuv420p、h264等了解QML&#xff0c;了解QVideoOutput类的使用&#xff0c;实现播放yuv420p流参考ffmpeg官方例程&#xff0c;调用解码器实现h264解码播放 不需要手动分帧。ffmpeg…

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…

Qt Graphics View 绘图实例

Qt Graphics View 绘图实例 这个实例程序实现如下功能&#xff1a; 可以创建矩形、椭圆、三角形、梯形、直线、文字等基本图形。每个图形项都可以被选择和移动。图形项或整个视图可以缩放和旋转。图形项重叠时&#xff0c;可以调整前置或后置。多个图形项可以组合&#xff0c;…

TCP socket api详解 续

文章目录 守护进程怎么做到&#xff1f;setsid返回值 dev/null字符文件 daemonTCP协议 退出的时候呢&#xff1f; 会话有很多后台任务&#xff0c;bash肯定会退&#xff0c;那后台会话怎么办呢&#xff1f; 理论上也要退的&#xff0c;但实际上关了bash&#xff0c;bash肯定要…

06_数据类型

数据类型 数据类型分类 JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型,当前课程暂不涉及) 据类型分类 原始类型(基础类型) var age = 20, var name = 尚学堂"; var le…

scrapy豆瓣爬虫增强-批量随机请求头

1.1 豆瓣爬虫增强,中间件随机请求头 1.2 清除原有的中间件,进行中间件测试 1.3 导入全新的中间件 1.4 运行爬虫,这个时候的请求头是固定的 1.5 强化对agent的输出,会舍弃输出cookie,使输出更明了 1.6 转移输出请求头位置 新增输出 造成这样问题的原因是Douban/Douban/settings…

非关系型数据库有哪些特点?

非关系型数据库&#xff08;NoSQL&#xff09;具有以下主要特点‌&#xff1a;‌1 ‌灵活的数据存储方式‌&#xff1a;非关系型数据库不采用传统的基于表格的数据存储方式&#xff0c;而是采用更加灵活的数据存储方式。它可以存储各种类型的数据&#xff0c;包括文本、图像、音…

智慧防汛平台在城市生命线安全建设中的应用

随着城市化进程的加快&#xff0c;城市基础设施的复杂性和互联性不断增强&#xff0c;城市生命线的安全管理面临前所未有的挑战。智慧防汛平台作为城市生命线安全建设的重要组成部分&#xff0c;通过现代信息技术提升城市防汛应急管理的智能化水平&#xff0c;保障城市安全。 …

【ChatGPT大模型开发调用】如何获得 OpenAl API Key?

如何获取 OpenAI API Key 获取 OpenAI API Key 主要有以下三种途径&#xff1a; OpenAI 官方平台 (推荐): 开发者用户可以直接在 OpenAI 官方网站 (platform.openai.com) 注册并申请 API Key。 通常&#xff0c;您可以在账户设置或开发者平台的相关页面找到申请入口。 Azure…

vue3 发送 axios 请求时没有接受到响应数据

<script setup> import Edit from ./components/Edit.vue import axios from axios import { onMounted,ref } from vue// TODO: 列表渲染 //装数据的列表 const list ref([]) const count ref(0) const getList async () > {//通过发送 /list 请求从后端拿到列表数…

衡山派D133EBS 开发环境安装及SDK编译烧写镜像烧录

1.创建新文件夹&#xff0c;用来存放SDK包&#xff08;其实本质就是路径要对就ok了&#xff09;&#xff0c;右键鼠标通过Open Git Bash here来打开git 输入命令 git clone --depth1 https://gitee.com/lcsc/luban-lite.git 来拉取&#xff0c;如下所示&#xff1a;&#xff0…