一、项目概述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 ="/update",method = requestmethod.post) public object updateadminguanli(httpservletrequest request){ jsonobject jsonobject = new jsonobject(); string id = request.getparameter("id").trim(); string name = request.getparameter("name").trim(); string username = request.getparameter("username").trim(); string password = request.getparameter("password").trim(); string location = request.getparameter("location").trim(); string introduction = request.getparameter("introduction").trim(); //保存到管理员的对象中 adminguanli adminguanli = new adminguanli(); adminguanli.setid(integer.parseint(id)); adminguanli.setname(name); adminguanli.setusername(username); adminguanli.setpassword(password); adminguanli.setlocation(location); adminguanli.setintroduction(introduction); boolean flag = adminguanliservice.update(adminguanli); if(flag){ jsonobject.put(consts.code,1); jsonobject.put(consts.msg,"修改成功"); system.out.println("11111111111111111"); return jsonobject; } jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"); return jsonobject; } /** * 删除管理员 **/ @requestmapping(value ="/delete",method = requestmethod.get) public object deleteadminguanli(httpservletrequest request){ string id = request.getparameter("id").trim(); boolean flag = adminguanliservice.delete(integer.parseint(id)); return flag; } /** * 查询管理员 **/ @requestmapping(value ="/selectbyprimarykey",method = requestmethod.get) public object selectbyprimarykey(httpservletrequest request){ string id = request.getparameter("id").trim(); return adminguanliservice.selectbyprimarykey(integer.parseint(id)); } @requestmapping(value ="/alladminguanli",method = requestmethod.get) public object alladminguanli(httpservletrequest request){ return adminguanliservice.alladminguanli(); } @requestmapping(value ="/adminguanliofname",method = requestmethod.get) public object adminguanliofname(httpservletrequest request){ string name = request.getparameter("name").trim(); return adminguanliservice.adminguanliofname("%"+name+"#"); } /** * 更新管理员图片 **/ @requestmapping(value ="/updateadminpic",method = requestmethod.post) public object updateadminpic(@requestparam("file") multipartfile avatorfile, @requestparam("id")int id){ jsonobject jsonobject = new jsonobject(); if(avatorfile.isempty()){ jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"文件上传失败"); return jsonobject; } //文件名=当前时间到毫秒+原来文件名 string filename = system.currenttimemillis()+avatorfile.getoriginalfilename(); //文件路径 string filepath = system.getproperty("user.dir")+system.getproperty("file.separator")+"img" +system.getproperty("file.separator")+"adminpic"; //如果文件路径不存在，新增该路径 file file1 = new file(filepath); if(file1.exists()){ file1.mkdir(); } //实际文件路径 file dest = new file(filepath+system.getproperty("file.separator")+filename); //存储到数据库的相对文件地址 string storeavatorpath = "/img/adminpic/"+filename; try { avatorfile.transferto(dest); adminguanli adminguanli = new adminguanli(); adminguanli.setid(id); adminguanli.setpic(storeavatorpath); boolean flag = adminguanliservice.update(adminguanli); if(flag){ jsonobject.put(consts.code,1); jsonobject.put(consts.msg,"上传成功"); jsonobject.put("pic",storeavatorpath); return jsonobject; } jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"); return jsonobject; } catch (ioexception e) { jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"+e.getmessage()); }finally { return jsonobject; } }}
（2）垃圾信息增删改查
/** * 添加垃圾信息 **/ @requestmapping(value="/add",method= requestmethod.post) public object addgarbage(httpservletrequest request){ jsonobject jsonobject=new jsonobject(); string name=request.getparameter("name").trim(); string type=request.getparameter("type").trim(); string introduction=request.getparameter("introduction").trim(); //保存到垃圾信息的对象当中 garbage garbage=new garbage(); garbage.setname(name); garbage.settype(type); garbage.setintroduction(introduction); boolean flag=garbageservice.insert(garbage); 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 = "/update",method = requestmethod.post) public object updategarbage(httpservletrequest request){ jsonobject jsonobject=new jsonobject(); string id=request.getparameter("id").trim(); string name=request.getparameter("name").trim(); string type=request.getparameter("type").trim(); string introduction=request.getparameter("introduction"); //保存到垃圾信息的对象中去 garbage garbage=new garbage(); garbage.setid(integer.parseint(id)); garbage.setname(name); garbage.settype(type); garbage.setintroduction(introduction); boolean flag=garbageservice.update(garbage); 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 = "/delete",method = requestmethod.get) public object deletegarbage(httpservletrequest request){ string id=request.getparameter("id").trim(); boolean flag=garbageservice.delete(integer.parseint(id)); return flag; }/** * 查询垃圾信息 **/ @requestmapping(value = "/allgarbage",method = requestmethod.get) public object allgarbage(httpservletrequest request){ return garbageservice.allgarbage(); }}
（3）用户信息增删改查
/** * 添加用户 **/ @requestmapping(value = "/add",method = requestmethod.post) public object adduser(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 sex = request.getparameter("sex").trim(); string pic = request.getparameter("pic").trim(); string birth = request.getparameter("birth").trim(); string location = request.getparameter("location").trim(); string contact = request.getparameter("contact").trim(); dateformat dateformat = new simpledateformat("yyyy-mm-dd"); date birthdate = new date(); try { birthdate = dateformat.parse(birth); } catch (parseexception e) { e.printstacktrace(); } system.out.println(name); //保存到用户的对象中 user user=new user(); user.setname(name); user.setusername(username); user.setpassword(password); user.setsex(new byte(sex)); user.setpic(pic); user.setbirth(birthdate); user.setlocation(location); user.setcontact(contact); boolean flag = userservice.insert(user); 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 ="/update",method = requestmethod.post) public object updateuser(httpservletrequest request){ jsonobject jsonobject = new jsonobject(); string id = request.getparameter("id").trim(); string name = request.getparameter("name").trim(); string username = request.getparameter("username").trim(); string password = request.getparameter("password").trim(); string sex = request.getparameter("sex").trim(); string pic = request.getparameter("pic").trim(); string birth = request.getparameter("birth").trim(); string location = request.getparameter("location").trim(); string contact = request.getparameter("contact").trim(); dateformat dateformat = new simpledateformat("yyyy-mm-dd"); date birthdate = new date(); try { birthdate = dateformat.parse(birth); } catch (parseexception e) { e.printstacktrace(); } //保存到用户的对象中 user user=new user(); user.setid(integer.parseint(id)); user.setname(name); user.setpassword(password); user.setsex(new byte(sex)); user.setpic(pic); user.setbirth(birthdate); user.setlocation(location); user.setcontact(contact); boolean flag = userservice.update(user); if(flag){ jsonobject.put(consts.code,1); jsonobject.put(consts.msg,"修改成功"); system.out.println("11111111111111111"); return jsonobject; } jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"); return jsonobject; }/** * 删除用户 **/ @requestmapping(value ="/delete",method = requestmethod.get) public object deleteuser(httpservletrequest request){ string id = request.getparameter("id").trim(); boolean flag = userservice.delete(integer.parseint(id)); return flag; }/** * 查询用户 **/ @requestmapping(value ="/selectbyprimarykey",method = requestmethod.get) public object selectbyprimarykey(httpservletrequest request){ string id = request.getparameter("id").trim(); return userservice.selectbyprimarykey(integer.parseint(id)); } @requestmapping(value ="/alluser",method = requestmethod.get) public object alluser(httpservletrequest request){ return userservice.alluser(); } @requestmapping(value ="/userofname",method = requestmethod.get) public object userofname(httpservletrequest request){ string name = request.getparameter("name").trim(); return userservice.userofname("%"+name+"#"); }/** * 更新用户图片 **/ @requestmapping(value ="/updateuserpic",method = requestmethod.post) public object updateuserpic(@requestparam("file") multipartfile avatorfile, @requestparam("id")int id){ jsonobject jsonobject = new jsonobject(); if(avatorfile.isempty()){ jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"文件上传失败"); return jsonobject; } //文件名=当前时间到毫秒+原来文件名 string filename = system.currenttimemillis()+avatorfile.getoriginalfilename(); //文件路径 string filepath = system.getproperty("user.dir")+system.getproperty("file.separator")+"img" +system.getproperty("file.separator")+"userpic"; //如果文件路径不存在，新增该路径 file file1 = new file(filepath); if(file1.exists()){ file1.mkdir(); } //实际文件路径 file dest = new file(filepath+system.getproperty("file.separator")+filename); //存储到数据库的相对文件地址 string storeavatorpath = "/img/userpic/"+filename; try { avatorfile.transferto(dest); user user = new user(); user.setid(id); user.setpic(storeavatorpath); boolean flag = userservice.update(user); if(flag){ jsonobject.put(consts.code,1); jsonobject.put(consts.msg,"上传成功"); jsonobject.put("pic",storeavatorpath); return jsonobject; } jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"); return jsonobject; } catch (ioexception e) { jsonobject.put(consts.code,0); jsonobject.put(consts.msg,"修改失败"+e.getmessage()); }finally { return jsonobject; } }}
3.解决跨域问题
public class webmvcconfig implements webmvcconfigurer { @override public void addcorsmappings(corsregistry registry) { registry.addmapping("/**") .allowcredentials(true) /*访问是否需要验证*/ .allowedoriginpatterns("*") .allowedmethods("*"); }}
三、功能演示1.跟随前端网址访问网页
2.登陆主页
3.查看垃圾信息
4.用户管理页面
5.管理员管理页面
以上就是基于springboot+vue怎么实现垃圾分类管理系统的详细内容。