毕业季特供：打造智能自习室的源码大公开

本文主要是介绍毕业季特供：打造智能自习室的源码大公开，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言

又是一年毕业季，是时候分享出当年我获得省级优秀毕业论文的一个软硬件结合的项目了！

该项目适合计算机相关专业，尤其适合于物联网工程专业！

智能自习室项目是当年我的一个毕业设计，设计技术范围比较广，经过我这么长时间的完善项目也已经比较成熟，能独当一面！该毕业设计实现了软硬件相互结合，实现了硬件和软件之间实时通讯，实现了实时消费系统，RFID读卡系统，角色登录等，很多的常用功能，属于拿来即用的一个成熟的毕业设计。

技术栈

软件部分

框架：Spring SSM（Spring+SpringMVC+Mybatis）

数据库：MySQL 5.0

服务器：Tomcat

硬件部分

开发板：STM32

WiFi模块：ESP8266

传输协议：MQTT

功能设计

登录功能：

用户或者管理员可以在登陆使用JavaScript书写的登陆界面，在此界面用户或者管理员可以登录自己的账号，当用户或管理员将账号，密码和验证码输入完成后就可以登录进入不同的系统界面，实现角色登录。

部分代码：

<body class="login-layout">
<div class="main-container" id="rrapp"><div class="main-content"><div class="row"><div class="col-sm-10 col-sm-offset-1"><div class="login-container"><div class="center"><h1><i class="icon-leaf green"></i><span class="white">智能自习室系统</span></h1></div><div class="space-6"></div><div class="position-relative"><div id="login-box" class="login-box visible widget-box no-border">

用户界面：

用户输入完成账号密码以后登陆进入自己的账户，即可查看自己的余额，个人信息和流水账单，方便自己统计自己的消费状况，也可以修改自己的密码。

部分代码：

Vue.component('menuItem', menuItem);var vm = new Vue({el: '#rrapp',data: {user: {},menuList: {},main: "sys/main.html",password: '',msg: '',newPassword: '',navTitle: "控制台"},methods: {getMenuList: function (event) {$.getJSON("sys/menu/user?_" + $.now(), function (r) {vm.menuList = r.menuList;});},getUser: function () {$.getJSON("sys/user/info?_" + $.now(), function (r) {vm.user = r.user;});},showInfo(){$("#infoModal").modal('show')},showPwd(){vm.password = ''vm.newPassword = ''$("#changePasswordModal").modal('show')},updatePassword: function () {var data = "password=" + vm.password + "&newPassword=" + vm.newPassword;$.ajax({type: "POST",url: "sys/user/password",data: data,dataType: "json",success: function (result) {if (result.code == 0) {layer.alert('修改成功', function (index) {location.reload();});} else {layer.msg(result.msg);}}});}, uploadInfo: function () {$.ajax({type: "POST",url: "sys/user/updateInfo",data: JSON.stringify(vm.user),contentType: "application/json",dataType: "json",success: function (result) {if (result.code == 0) {layer.msg('修改成功' );$("#infoModal").modal('hide')} else {layer.msg(result.msg);}}});}},created: function () {this.getMenuList();this.getUser();$.getJSON("../data/warn",function (r) {if(r.data){vm.msg = r.data}else{vm.msg = '';}})setInterval(function () {$.getJSON("../data/warn",function (r) {if(r.data){vm.msg = r.data}else{vm.msg = '';}})},2000)},updated: function () {//路由var router = new Router();routerList(router, vm.menuList);router.start();}
});

管理员界面