基于Vue+ElementUi+NodeJS+Mysql 的高校宿舍管理系统

---

主要技术

所用到的技术有：Vue、ElementUi、NodeJS、Koa2、Mysql

提示：以下是本篇文章正文内容，下面案例可供参考

一、主要功能

超级管理员登录：
个人中心 楼宇管理 宿舍管理 用户权限管理 学生管理 后勤服务 生活服务 统计中心
普通管理员登录：
个人中心 楼宇管理 宿舍管理 学生管理 后勤服务 生活服务 统计中心
学生登录：
个人中心 后勤服务 生活服务

二、运行截图

三、后端登录代码

1.引入库

代码如下（示例）：

const router = require('koa-router')()
//引入MySQL数据库
const query = require('./MYSQL');
router.prefix('/login');

router.get('/', function(ctx, next) {
	ctx.body = '这是登录页面'
});

//登录页面，查询数据库是否有该用户并返回前端请求的数据
router.post('/', async (ctx, next) => {
	console.log(ctx.request.body);
	let name = ctx.request.body.name;
	let pass = ctx.request.body.password;
	//根据用户名和密码查询数据库
	let a = await query(`SELECT * FROM user where uname = '${name}' and pass = '${pass}'`);
	// console.log(a);
	// console.log(a.length);
	// 格式化数据类型
	var dataString = JSON.stringify(a);
	var result = JSON.parse(dataString);
	console.log(result);
	
	var data;
	if (result.length > 0) {
		// 得到用户的角色  0:超级管理员  1:楼管  2: 学生
		var roler = result[0].roler;
		console.log(roler);
		// 定义 超级管理员 的权限列表
		var routerlist0 = [{
				id: 1,
				authName: "个人中心",
				path: "grzx",
				children: [{
					id: "1.1",
					authName: "个人信息",
					path: "xgmm",
					children: []
				}]
			},
			{
				id: 2,
				authName: "楼宇管理",
				path: "lygl",
				children: [{
					id: "2.1",
					authName: "楼宇列表",
					path: "newly",
					children: []
				}]
			},
			{
				id: 3,
				authName: "宿舍管理",
				path: "ssgl",
				children: [{
						id: "3.1",
						authName: "宿舍列表",
						path: "sslb",
						children: []
					}]
			},
			{
				id: 4,
				authName: "用户权限管理",
				path: "yhqxgl",
				children: [{
						id: "4.1",
						authName: "用户权限列表",
						path: "yhlb",
						children: []
					}
				]
			},
			{
				id: 5,
				authName: "学生管理",
				path: "xsgl",
				children: [{
					id: "5.1",
					authName: "学生列表",
					path: "xslb",
					children: []
				}]
			},
			{
				id: 6,
				authName: "后勤服务",
				path: "hqfw",
				children: [{
						id: "6.1",
						authName: "损坏报修",
						path: "shbx",
						children: []
					},
					{
						id: "6.2",
						authName: "报修列表",
						path: "bxlb",
						children: []
					}
				]
			},
			{
				id: 7,
				authName: "生活服务",
				path: "shfw",
				children: [{
						id: "7.1",
						authName: "电费充值",
						path: "jdf",
						children: []
					},
					{
						id: "7.2",
						authName: "校园网充值",
						path: "xyw",
						children: []
					},
					{
						id: "7.3",
						authName: "校园一卡通",
						path: "xyykt",
						children: []
					}
				]
			},
			{
				id: 8,
				authName: "统计中心",
				path: "tjzx",
				children: [{
						id: "8.1",
						authName: "宿舍评分",
						path: "sspf",
						children: []
					},
					{
						id: "8.2",
						authName: "报修统计",
						path: "bxtj",
						children: []
					},
					{
						id: "8.3",
						authName: "楼管评价",
						path: "lgdf",
						children: []
					}
				]
			}
		]
		// 定义 楼管人员 的权限列表
		var routerlist1 = [{
				id: 1,
				authName: "个人中心",
				path: "grzx",
				children: [{
					id: "1.1",
					authName: "个人信息",
					path: "xgmm",
					children: []
				}]
			},
			{
				id: 3,
				authName: "宿舍管理",
				path: "ssgl",
				children: [{
						id: "3.1",
						authName: "宿舍列表",
						path: "sslb",
						children: []
					}
				]
			},
			{
				id: 5,
				authName: "学生管理",
				path: "xsgl",
				children: [{
					id: "5.1",
					authName: "学生列表",
					path: "xslb",
					children: []
				}]
			},
			{
				id: 6,
				authName: "后勤服务",
				path: "hqfw",
				children: [{
						id: "6.1",
						authName: "损坏报修",
						path: "shbx",
						children: []
					},
					{
						id: "6.2",
						authName: "报修列表",
						path: "bxlb",
						children: []
					}
				]
			},
			{
				id: 7,
				authName: "生活服务",
				path: "shfw",
				children: [{
						id: "7.1",
						authName: "电费充值",
						path: "jdf",
						children: []
					},
					{
						id: "7.2",
						authName: "校园网充值",
						path: "xyw",
						children: []
					},
					{
						id: "7.3",
						authName: "校园一卡通",
						path: "xyykt",
						children: []
					}
				]
			},
			{
				id: 8,
				authName: "统计中心",
				path: "tjzx",
				children: [{
						id: "8.1",
						authName: "宿舍评分",
						path: "sspf",
						children: []
					},
					{
						id: "8.2",
						authName: "报修统计",
						path: "bxtj",
						children: []
					},
					{
						id: "8.3",
						authName: "楼管评价",
						path: "lgdf",
						children: []
					}
				]
			}
		]
		// 定义 学生 权限路由表
		var routerlist2 = [{
				id: 1,
				authName: "个人中心",
				path: "grzx",
				children: [{
					id: "1.1",
					authName: "个人信息",
					path: "xgmm"
				}]
			},
			{
				id: 6,
				authName: "后勤服务",
				path: "hqfw",
				children: [{
					id: "6.1",
					authName: "损坏报修",
					path: "shbx"
				}]
			},
			{
				id: 7,
				authName: "生活服务",
				path: "shfw",
				children: [{
						id: "7.1",
						authName: "电费充值",
						path: "jdf"
					},
					{
						id: "7.2",
						authName: "校园网充值",
						path: "xyw"
					},
					{
						id: "7.3",
						authName: "校园一卡通",
						path: "xyykt"
					}
				]
			},
		]
		if(roler == 0){
			// 超级管理员
			data = {
				code: 200,
				data: result,
				route: routerlist0
			};
		}else if(roler == 1){
			// 楼管人员
			data = {
				code: 200,
				data: result,
				route: routerlist1
			};
		}else{
			// 学生用户
			data = {
				code: 200,
				data: result,
				route: routerlist2
			};
		}
		
		ctx.body = data;
	} else {
		let data = {
			code: 0
		};
		ctx.body = data;
	}
});
// 修改用户信息
router.post('/update', async (ctx, next) => {
	console.log(ctx.request.body);
	let id = ctx.request.body.id;
	let pass = ctx.request.body.pass;
	let xueyuan = ctx.request.body.xueyuan;
	let banji = ctx.request.body.banji;
	let tel = ctx.request.body.tel;
	let lynumber = ctx.request.body.lynumber;
	let sushe = ctx.request.body.sushe;
	//根据用户id值更新数据
	let a = await query(
		`update user set pass = '${pass}',xueyuan ='${xueyuan}',banji = '${banji}',tel = '${tel}',lynumber = '${lynumber}',sushe = '${sushe}' where id = ${id}`
	);
	console.log(a);

	if (a.changedRows == 1) {
		// 更新成功
		//根据id查询数据库,返回前端
		let newA = await query(`SELECT * FROM user WHERE id = ${id}`);
		// 格式化数据类型
		var newDataString = JSON.stringify(newA);
		var newResult = JSON.parse(newDataString);
		console.log(newResult);
		// 200代表更新成功
		let data = {
			code: 200,
			newResult
		};
		ctx.body = data;
	} else {
		let data = {
			code: 0
		};
		ctx.body = data;
	}
});



module.exports = router

2.前端登录页面

代码如下（示例）：

<template>
  <div class="login">
    <h1>高校宿舍管理系统</h1>
    <div class="loginBox">
      <!-- logo区域 -->
      <div class="loginLogo">
        <img src="../assets/img/log.png" alt />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        label-width="0px"
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="name">
          <el-input v-model="loginForm.name" placeholder="请输入用户名" prefix-icon="el-icon-s-custom"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 登录注册按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      //登录表单数据绑定对象
      loginForm: {
        name: "",
        password: ""
      },
      // 登录表单数据验证规则对象
      rules: {
        name: [
          { required: true, message: "请输入登录名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入合法的密码", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 点击重置按钮重置表单
    reset() {
      this.$refs.loginFormRef.resetFields();
    },
    // 点击登录按钮先预校验,校验成功后发起请求,请求成功跳转到首页
    login() {
      let _this = this;
      this.$refs.loginFormRef.validate(valid => {
        // 如果校验失败就返回
        if (!valid) return;
        // 如果校验成功发起请求
        this.$http
          .post("http://localhost:3000/login", this.loginForm)
          .then(function(response) {
            console.log(response.data);
            // 如果状态码为200，代表登录成功，0为失败
            if (response.data.code == "200") {
              // 如果存在该用户,弹出登录成功提示信息
              _this.$message({
                showClose: true,
                message: "登录成功",
                type: "success"
              });
              var userData = JSON.stringify(response.data.data[0]);
              window.sessionStorage.setItem('userData',userData);
              var a1 = response.data.route;
              // 将请求获取到的 路由表 存到 vuex 中
              _this.$store.commit('rolerRouter',a1)
              // console.log(_this.$store.state.routerlist)
              // 跳转到首页
              _this.$router.push('/home');
            }else{
              // 如果不存在该用户,弹出登录失败提示信息
              _this.$message({
                showClose: true,
                message: "请检查您的用户名和密码是否正确",
                type: "error"
              });
              _this.loginForm.name=''
              _this.loginForm.password=''
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.login {
  width: 100%;
  height: 100%;
  background: url("../assets/img/10.jpg") center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.login h1 {
  text-align: center;
  color: white;
  font-size: 42px;
  margin-top: 45px;
  letter-spacing: 0.2em;
}
.loginBox {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -150px;
}
.loginLogo {
  width: 130px;
  height: 130px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: absolute;
  top: 0%;
  left: 50%;
  margin-left: -65px;
  margin-top: -65px;
}
.loginLogo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.login_form {
  position: absolute;
  bottom: 0px;
  width: 80%;
  margin-left: 10%;
}
</style>

该处使用的url网络请求的数据。

---

源码

https://pan.baidu.com/s/1niAcaCPOoH77i2CDqyM0hg?pwd=2312 提取码: 2312