小程序-基于java+SSM+Vue的校园水电费管理小程序设计与实现

news/2024/12/16 19:29:12/

项目运行

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
毕设帮助,指导,本源码分享,调试部署(见文末)

系统介绍:

校园水电费管理小程序是一个基于互联网的信息化系统,旨在提高校园水电费管理的效率和便捷性。该系统通过微信小程序平台,为学生、教师和管理员提供了一个便捷的水电费管理平台,实现了数据的实时查询、修改、支付等功能。
整体功能包含:

学生、教师和管理员的用户管理
水电费的查询、支付和管理
公告信息的发布和管理
宿舍信息的管理
系统数据的备份和恢复

前台模块:

学生前端:注册、登录、首页信息查看、个人中心、缴费管理
教师前端:登录、首页信息查看、个人中心、缴费管理

后台模块:

管理员后台:用户管理、宿舍信息管理、缴费管理、公告管理、轮播图管理

功能截图:

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

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

代码实现:

javascript">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.ppmy.cn/news/1555661.html

相关文章

前端面试准备问题2

1.防抖和节流分别是什么&#xff0c;应用场景 防抖&#xff1a;在事件被触发后&#xff0c;只有在指定的延迟时间内没有再次触发&#xff0c;才执行事件处理函数。 在我的理解中&#xff0c;简单的说就是在一个指定的时间内&#xff0c;仅触发一次&#xff0c;如果有多次重复触…

【Linux】shell脚本二

2、接收用户的参数 shell脚本已经内设了用于接收用户输入参数的变量&#xff0c;变量之间可以使用空格隔开。 如&#xff1a;./test.sh one two three four $0&#xff1a;对应的是当前shell脚本程序的名称&#xff0c;即test.sh$#&#xff1a;对应的是总共有几个参数&#…

【机器学习】机器学习的基本分类-无监督学习-t-SNE(t-分布随机邻域嵌入)

t-SNE&#xff08;t-分布随机邻域嵌入&#xff09; t-SNE&#xff08;t-distributed Stochastic Neighbor Embedding&#xff09;是一种用于降维的非线性技术&#xff0c;常用于高维数据的可视化。它特别适合展示高维数据在二维或三维空间中的分布结构&#xff0c;同时能够很好…

二维数组,以及ARRAY的习题及答案

//二维数组 //2.1创建方式1 val arr5 Array.ofDim[Int](2,3)//2行2列 //2.2访问数组的元素 arr5(0)(0)1 arr5(0)(1)2 arr5(1)(0)3 arr5(1)(1)4 //2.3把一维数组转化为二维数组 var arr6 Array(1,2,3,4,5,6) var arr7 arr6.grouped(3)//3个元素一组 // println(arr7)…

Python中的容器化服务监控:结合Prometheus和Grafana实现高效监控与可视化

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代的DevOps和微服务架构中,容器化技术(如Docker)已成为主流的部署方式。然而,容器环境的动态特性使得服务监控和性能分析变得更加复…

【Maven】生命周期和插件详解

Maven生命周期 Maven 将项目的生命周期抽象成了 3 套生命周期&#xff0c;每套生命周期又包含多个阶段&#xff08;phase&#xff09;。每套中具体包含哪些阶段是 Maven 已经约定好的&#xff0c;但是每个阶段具体需要做什么&#xff0c;是用户可以自己指定的。 Maven 中定义…

ubuntu下anconda装pytorch

1、禁用nouveau sudo vim /etc/modprobe.d/blacklist.conf 在文件最后部分插入以下两行内容 blacklist nouveau options nouveau modeset0 更新系统 sudo update-initramfs -u 重启系统 2、装nvidia驱动 卸载原来驱动 sudo apt-get remove nvidia-* &#xff08;若安装…

Ps:视频图层

视频图层 Video Layer是 Photoshop 处理视频内容的主要方式之一。可以在 Photoshop 文档中导入视频文件&#xff0c;可逐帧编辑&#xff0c;甚至创建手绘动画。视频图层与普通的图层类似&#xff0c;但包含了时间轴上的多个帧&#xff0c;使您能够在时间维度上进行操作。 一、视…