基于springboot+vue怎么实现垃圾分类管理系统

魁首哥

作者

基于springboot+vue怎么实现垃圾分类管理系统

本篇内容主要讲解“基于springboot+vue怎么实现垃圾分类管理系统”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“基于springboot+vue怎么实现垃圾分类管理系统”吧!

一、项目概述

1.项目内容

本项目利用IDEA，Visual Studio Code 开发工具，借助Mysql,Navicat for MySQL 工具，实现了一个基于springboot+vue的垃圾分类管理系统。系统为两种类型的用户提供服务，用户和管理员。

2.实现功能

（1）登陆功能

通过和数据库建立联系后，数据库内的用户和管理员可在登录页面输入账号和密码登陆网页。

（2）数据的增、查、改、删功能

① 垃圾的增、查、改、删

② 管理员的增、查、改、删

③ 用户的增、查、改、删

（3）通过饼状图，柱状图可显示用户的性别比例，入库垃圾的数量信息，用户总数，管理员总数，入库垃圾数量，查询次数等。

二、具体实现

1.前端登陆界面

<template><divclass="login-wrap"><divclass="ms-title">垃圾分类信息管理系统</div><divclass="ms-login"><el-form:model="ruleForm":rules="rules"ref="ruleForm"><el-form-itemprop="username"><el-inputv-model="ruleForm.username"placeholder="用户名"></el-input></el-form-item><el-form-itemprop="password"><el-inputtype="password"v-model="ruleForm.password"placeholder="密码"></el-input></el-form-item><divclass="login-btn"><el-buttontype="primary"@click="submitForm">登录</el-button></div></el-form></div></div></template><script>import{mixin}from"../mixins/index";import{getLoginStatus}from"../api/index";exportdefault{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(){letparams=newURLSearchParams();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)publicObjectaddAdminGuanli(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringname=request.getParameter("name").trim();Stringusername=request.getParameter("username").trim();Stringpassword=request.getParameter("password").trim();Stringpic=request.getParameter("pic").trim();Stringlocation=request.getParameter("location").trim();Stringintroduction=request.getParameter("introduction").trim();//保存到管理员的对象中AdminGuanliadminGuanli=newAdminGuanli();adminGuanli.setName(name);adminGuanli.setUsername(username);adminGuanli.setPassword(password);adminGuanli.setPic(pic);adminGuanli.setLocation(location);adminGuanli.setIntroduction(introduction);booleanflag=AdminGuanliService.insert(adminGuanli);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"添加成功");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"添加失败");returnjsonObject;}/***修改管理员**/@RequestMapping(value="/update",method=RequestMethod.POST)publicObjectupdateAdminGuanli(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringid=request.getParameter("id").trim();Stringname=request.getParameter("name").trim();Stringusername=request.getParameter("username").trim();Stringpassword=request.getParameter("password").trim();Stringlocation=request.getParameter("location").trim();Stringintroduction=request.getParameter("introduction").trim();//保存到管理员的对象中AdminGuanliadminGuanli=newAdminGuanli();adminGuanli.setId(Integer.parseInt(id));adminGuanli.setName(name);adminGuanli.setUsername(username);adminGuanli.setPassword(password);adminGuanli.setLocation(location);adminGuanli.setIntroduction(introduction);booleanflag=AdminGuanliService.update(adminGuanli);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"修改成功");System.out.println("11111111111111111");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败");returnjsonObject;}/***删除管理员**/@RequestMapping(value="/delete",method=RequestMethod.GET)publicObjectdeleteAdminGuanli(HttpServletRequestrequest){Stringid=request.getParameter("id").trim();booleanflag=AdminGuanliService.delete(Integer.parseInt(id));returnflag;}/***查询管理员**/@RequestMapping(value="/selectByPrimaryKey",method=RequestMethod.GET)publicObjectselectByPrimaryKey(HttpServletRequestrequest){Stringid=request.getParameter("id").trim();returnAdminGuanliService.selectByPrimaryKey(Integer.parseInt(id));}@RequestMapping(value="/allAdminGuanli",method=RequestMethod.GET)publicObjectallAdminGuanli(HttpServletRequestrequest){returnAdminGuanliService.allAdminGuanli();}@RequestMapping(value="/AdminGuanliOfName",method=RequestMethod.GET)publicObjectAdminGuanliOfName(HttpServletRequestrequest){Stringname=request.getParameter("name").trim();returnAdminGuanliService.AdminGuanliOfName("%"+name+"#");}/***更新管理员图片**/@RequestMapping(value="/updateAdminPic",method=RequestMethod.POST)publicObjectupdateAdminPic(@RequestParam("file")MultipartFileavatorFile,@RequestParam("id")intid){JSONObjectjsonObject=newJSONObject();if(avatorFile.isEmpty()){jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"文件上传失败");returnjsonObject;}//文件名=当前时间到毫秒+原来文件名StringfileName=System.currentTimeMillis()+avatorFile.getOriginalFilename();//文件路径StringfilePath=System.getProperty("user.dir")+System.getProperty("file.separator")+"img"+System.getProperty("file.separator")+"AdminPic";//如果文件路径不存在，新增该路径Filefile1=newFile(filePath);if(file1.exists()){file1.mkdir();}//实际文件路径Filedest=newFile(filePath+System.getProperty("file.separator")+fileName);//存储到数据库的相对文件地址StringstoreAvatorPath="/img/AdminPic/"+fileName;try{avatorFile.transferTo(dest);AdminGuanliadminGuanli=newAdminGuanli();adminGuanli.setId(id);adminGuanli.setPic(storeAvatorPath);booleanflag=AdminGuanliService.update(adminGuanli);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"上传成功");jsonObject.put("pic",storeAvatorPath);returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败");returnjsonObject;}catch(IOExceptione){jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败"+e.getMessage());}finally{returnjsonObject;}}}

（2）垃圾信息增删改查

/***添加垃圾信息**/@RequestMapping(value="/add",method=RequestMethod.POST)publicObjectaddGarbage(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringname=request.getParameter("name").trim();Stringtype=request.getParameter("type").trim();Stringintroduction=request.getParameter("introduction").trim();//保存到垃圾信息的对象当中Garbagegarbage=newGarbage();garbage.setName(name);garbage.setType(type);garbage.setIntroduction(introduction);booleanflag=GarbageService.insert(garbage);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"添加成功");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"添加失败");returnjsonObject;}/***修改垃圾信息**/@RequestMapping(value="/update",method=RequestMethod.POST)publicObjectupdateGarbage(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringid=request.getParameter("id").trim();Stringname=request.getParameter("name").trim();Stringtype=request.getParameter("type").trim();Stringintroduction=request.getParameter("introduction");//保存到垃圾信息的对象中去Garbagegarbage=newGarbage();garbage.setId(Integer.parseInt(id));garbage.setName(name);garbage.setType(type);garbage.setIntroduction(introduction);booleanflag=GarbageService.update(garbage);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"修改成功");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败");returnjsonObject;}/***删除垃圾信息**/@RequestMapping(value="/delete",method=RequestMethod.GET)publicObjectdeleteGarbage(HttpServletRequestrequest){Stringid=request.getParameter("id").trim();booleanflag=GarbageService.delete(Integer.parseInt(id));returnflag;}/***查询垃圾信息**/@RequestMapping(value="/allGarbage",method=RequestMethod.GET)publicObjectallGarbage(HttpServletRequestrequest){returnGarbageService.allGarbage();}}

（3）用户信息增删改查

/***添加用户**/@RequestMapping(value="/add",method=RequestMethod.POST)publicObjectaddUser(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringname=request.getParameter("name").trim();Stringusername=request.getParameter("username").trim();Stringpassword=request.getParameter("password").trim();Stringsex=request.getParameter("sex").trim();Stringpic=request.getParameter("pic").trim();Stringbirth=request.getParameter("birth").trim();Stringlocation=request.getParameter("location").trim();Stringcontact=request.getParameter("contact").trim();DateFormatdateFormat=newSimpleDateFormat("yyyy-MM-dd");DatebirthDate=newDate();try{birthDate=dateFormat.parse(birth);}catch(ParseExceptione){e.printStackTrace();}System.out.println(name);//保存到用户的对象中Useruser=newUser();user.setName(name);user.setUsername(username);user.setPassword(password);user.setSex(newByte(sex));user.setPic(pic);user.setBirth(birthDate);user.setLocation(location);user.setContact(contact);booleanflag=UserService.insert(user);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"添加成功");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"添加失败");returnjsonObject;}/***修改用户**/@RequestMapping(value="/update",method=RequestMethod.POST)publicObjectupdateUser(HttpServletRequestrequest){JSONObjectjsonObject=newJSONObject();Stringid=request.getParameter("id").trim();Stringname=request.getParameter("name").trim();Stringusername=request.getParameter("username").trim();Stringpassword=request.getParameter("password").trim();Stringsex=request.getParameter("sex").trim();Stringpic=request.getParameter("pic").trim();Stringbirth=request.getParameter("birth").trim();Stringlocation=request.getParameter("location").trim();Stringcontact=request.getParameter("contact").trim();DateFormatdateFormat=newSimpleDateFormat("yyyy-MM-dd");DatebirthDate=newDate();try{birthDate=dateFormat.parse(birth);}catch(ParseExceptione){e.printStackTrace();}//保存到用户的对象中Useruser=newUser();user.setId(Integer.parseInt(id));user.setName(name);user.setPassword(password);user.setSex(newByte(sex));user.setPic(pic);user.setBirth(birthDate);user.setLocation(location);user.setContact(contact);booleanflag=UserService.update(user);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"修改成功");System.out.println("11111111111111111");returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败");returnjsonObject;}/***删除用户**/@RequestMapping(value="/delete",method=RequestMethod.GET)publicObjectdeleteUser(HttpServletRequestrequest){Stringid=request.getParameter("id").trim();booleanflag=UserService.delete(Integer.parseInt(id));returnflag;}/***查询用户**/@RequestMapping(value="/selectByPrimaryKey",method=RequestMethod.GET)publicObjectselectByPrimaryKey(HttpServletRequestrequest){Stringid=request.getParameter("id").trim();returnUserService.selectByPrimaryKey(Integer.parseInt(id));}@RequestMapping(value="/allUser",method=RequestMethod.GET)publicObjectallUser(HttpServletRequestrequest){returnUserService.allUser();}@RequestMapping(value="/UserOfName",method=RequestMethod.GET)publicObjectUserOfName(HttpServletRequestrequest){Stringname=request.getParameter("name").trim();returnUserService.userOfName("%"+name+"#");}/***更新用户图片**/@RequestMapping(value="/updateUserPic",method=RequestMethod.POST)publicObjectupdateUserPic(@RequestParam("file")MultipartFileavatorFile,@RequestParam("id")intid){JSONObjectjsonObject=newJSONObject();if(avatorFile.isEmpty()){jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"文件上传失败");returnjsonObject;}//文件名=当前时间到毫秒+原来文件名StringfileName=System.currentTimeMillis()+avatorFile.getOriginalFilename();//文件路径StringfilePath=System.getProperty("user.dir")+System.getProperty("file.separator")+"img"+System.getProperty("file.separator")+"userPic";//如果文件路径不存在，新增该路径Filefile1=newFile(filePath);if(file1.exists()){file1.mkdir();}//实际文件路径Filedest=newFile(filePath+System.getProperty("file.separator")+fileName);//存储到数据库的相对文件地址StringstoreAvatorPath="/img/userPic/"+fileName;try{avatorFile.transferTo(dest);Useruser=newUser();user.setId(id);user.setPic(storeAvatorPath);booleanflag=UserService.update(user);if(flag){jsonObject.put(Consts.CODE,1);jsonObject.put(Consts.MSG,"上传成功");jsonObject.put("pic",storeAvatorPath);returnjsonObject;}jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败");returnjsonObject;}catch(IOExceptione){jsonObject.put(Consts.CODE,0);jsonObject.put(Consts.MSG,"修改失败"+e.getMessage());}finally{returnjsonObject;}}}

3.解决跨域问题

publicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/**").allowCredentials(true)/*访问是否需要验证*/.allowedOriginPatterns("*").allowedMethods("*");}}