基于Vue+ElementUi+NodeJS+Mysql 的高校宿舍管理系统_基于nodejs和vue的宿舍管理系统的设计与实现

作者：AllinToyou | 2024-04-19 14:02:42

踩

基于nodejs和vue的宿舍管理系统的设计与实现

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

主要技术
- 所用到的技术有：Vue、ElementUi、NodeJS、Koa2、Mysql
一、主要功能
二、运行截图
三、后端登录代码
- 1.引入库
- 2.前端登录页面
源码

主要技术

所用到的技术有：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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

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

源码

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/452063