本文實例為大家分享了springboot+vue實現垃圾分類管理系統的具體代碼，供大家參考，具體內容如下

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.管理員管理頁面

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。