文章目录
一、项目概述
1.项目内容
本项目利用IDEA,Visual Studio Code 开发工具,借助Mysql,Navicat for MySQL 工具,实现了一个基于springboot+vue的垃圾分类管理系统。系统为两种类型的用户提供服务,用户和管理员。
2.实现功能
(1)登陆功能
通过和数据库建立联系后,数据库内的用户和管理员可在登录页面输入账号和密码登陆网页。
(2)数据的增、查、改、删功能
① 垃圾的增、查、改、删
② 管理员的增、查、改、删
③ 用户的增、查、改、删
(3)通过饼状图,柱状图可显示用户的性别比例,入库垃圾的数量信息,用户总数,管理员总数,入库垃圾数量,查询次数等。
二、具体实现
1.前端登陆界面
<template>
<div class="login-wrap">
<div class="ms-title">垃圾分类信息管理系统</div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm">登录</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import {
mixin} from "../mixins/index";
import {
getLoginStatus} from "../api/index";
export default {
mixins:[mixin],
data: function(){
return {
ruleForm:{
username: "admin",
password: "123"
},
rules:{
username:[
{
required:true,message:"请输入用户名",trigger:"blur"}
],
password:[
{
required:true,message:"请输入密码",trigger:"blur"}
]
}
};
},
methods:{
submitForm(){
let params = new URLSearchParams();
params.append("name",this.ruleForm.username);
params.append("password",this.ruleForm.password);
getLoginStatus(params)
.then((res) =>{
if(res.code == 1){
this.$router.push("/Info");
this.notify("登录成功","success");
}else{
this.notify("登录失败","error");
}
});
}
}
}
</script>
2.增删改查实现
(1)管理员信息增删改查:
/*
* 添加管理员
* */
@RequestMapping(value = "/add",method = RequestMethod.POST)
public Object addAdminGuanli(HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
String name = request.getParameter("name").trim();
String username = request.getParameter("username").trim();
String password = request.getParameter("password").trim();
String pic = request.getParameter("pic").trim();
String location = request.getParameter("location").trim();
String introduction = request.getParameter("introduction").trim();
//保存到管理员的对象中
AdminGuanli adminGuanli = new AdminGuanli();
adminGuanli.setName(name);
adminGuanli.setUsername(username);
adminGuanli.setPassword(password);
adminGuanli.setPic(pic);
adminGuanli.setLocation(location);
adminGuanli.setIntroduction(introduction);
boolean flag = AdminGuanliService.insert(adminGuanli);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG,"添加成功");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG,"添加失败");
return jsonObject;
}
/*
* 修改管理员
* */
@RequestMapping(value =