垃圾分类安卓APP设计，Web端(二)

1. 垃圾分类安卓APP设计，APP用户端(一)

2. 垃圾分类安卓APP设计，Web端(二)

1. 项目涉及到的技术点

1. 使用Element Plus组件库实现UI
2. 使用Web 前端框架Vue实现框架搭建
3. 使用axios网络请求库实现获取服务端数据
4. 使用vue-router路由实现页面跳转
5. 使用nodejs搭建运行环境

2. 开发环境

app端：

1. 开发工具：Androidstudio
2. 开发语言：java
3. jdk版本：1.8+以上

服务端：

1. 开发工具：IDEA
2. 开发语言：java
3. jdk版本：1.8+以上
4. mysql数据库版本：8.0+以上

Web端：

1. 开发工具：HBuilderX或Visual Studio Code
2. 开发语言：Vue
3. 开发环境：Nodejs

3.代码实现过程

1. 登录LoginView.vue

<template>
	<div class="container">
		<div class="login-container">
			<div class="login-title">
				<h2>垃圾分类后台管理系统</h2>
			</div>

			<div class="login-form">
				<el-form :rules="rules" ref="ruleForm" :model="ruleForm" status-icon label-width="66px"
					class="demo-ruleForm">
					<el-form-item label="用户名" prop="username">
						<el-input placeholder="请输入用户名" v-model="ruleForm.username" type="username" />
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input placeholder="请输入密码" v-model="ruleForm.password" autocomplete="off" type="password" />
					</el-form-item>

					<el-form-item class="btn-login-container">
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		login
	} from "@/api/httpsend";

	export default {
		data() {
			return {
				ruleForm: {
					username: "admin",
					password: "123456",
				},
				rules: {
					username: {
						required: true,
						message: "请输入用户名",
						trigger: "blur",
					},
					password: {
						required: true,
						message: "请输入密码",
						trigger: "blur",
					},
				},

			};
		},

		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//登录
						this.userLogin(this.ruleForm.username, this.ruleForm.password);
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			},

			//发请登录请求
			userLogin(username, password) {
				login(username, password).then((res) => {
					if (res.code == 200) {
						this.$message.success({
							message: res.msg,
							duration: 1000,
							onClose: () => {
								//路由跳转
								const url = localStorage.getItem("activeIndex") || "/user";
								//保存用户名
								localStorage.setItem("username", username);
								this.$router.push(url);
							},
						});
					} else {
						this.$message.error({
							message: res.msg
						})
					}
				});
			},
		},
	};
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		/*  position: absolute 可以让图片撑满整个屏幕 */
		position: absolute;
		justify-content: center;
		align-items: center;
		background: url("@/assets/login_bg.jpg") no-repeat center center;
		background-size: 100% 100%;
	}

	.login-container {
		width: 400px;
		height: 364px;
		background: white;
		border-radius: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.login-title {
		background-color: #409eff;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	h2 {
		line-height: 100px;
		text-align: center;
		color: white;
	}

	.login-form {
		display: flex;
		width: 100%;
		height: 264px;
		justify-content: center;
		align-items: center;
	}
</style>

2. MainView.vue主页

<template>
	<el-container class="layout-container-demo">
		<el-aside width="200px">

			<h1 style="height: 56px; line-height: 56px; text-align: center; background-color: #333; color: #1890ff;">
				后台管理系统</h1>

			<el-scrollbar>
				<el-menu :default-active="activeIndex" active-text-color="#1890ff" background-color="#303133"
					class="el-menu-vertical-demo" text-color="#fff" @select="menuSelect" router>


					<el-menu-item index="/user">

						<span><el-icon>
								<Avatar />
							</el-icon>用户信息管理</span>
					</el-menu-item>


					<el-menu-item index="/result">

						<span><el-icon>
								<Clock />
							</el-icon>成绩单管理</span>
					</el-menu-item>

					<el-menu-item index="/error">

						<span><el-icon>
								<PieChart />
							</el-icon>错题库管理</span>
					</el-menu-item>

				</el-menu>
			</el-scrollbar>
		</el-aside>

		<el-container>
			<el-header>
				<div class="toolbar">
					<el-dropdown @command="handleCommand">
						<img src="@/assets/img_avatar.png" class="top-avatar" />
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<span style="color: white; margin-left: 6px">{{ username }}</span>
				</div>
			</el-header>

			<el-scrollbar>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-scrollbar>

		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				username: localStorage.getItem("username") || "请先登录",
				// 初始值
				activeIndex: localStorage.getItem("activeIndex") || '/user',

			};

		},
		methods: {

			//保存当前选中的menu, 用于刷新页面的时候选中当前页
			menuSelect(index, path) {
				localStorage.setItem("activeIndex", index);

			},


			//退出登录
			handleCommand(command) {
				this.$router.push("/login");
			},
		},
	};
</script>

<style>
	.el-menu-vertical-demo {
		width: 200px;
		height: 100vh;
		/* 垂直时，去除右侧白边 */
		border: 0 !important;
	}

	.layout-container-demo .el-header {
		background-color: #3375b9;
		color: var(--el-text-color-primary);
		color: #333;
		line-height: 56px;
		height: 56px;
	}

	.layout-container-demo {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.top-avatar {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		cursor: pointer;
		border: white solid 2px;
	}

	.toolbar {
		display: flex;
		justify-content: right;
		align-items: center;
	}

	/* .el-header {

} */

	.el-aside {
		color: #333;
	}
</style>

3. 运行效果图

友情提示：有问题可咨询某站搜【🔍浩宇软件开发】

4. 资料学习

1. Vue官网：https://cn.vuejs.org/

2. Element Plus官网: https://element-plus.org/zh-CN/