如何使用springboot及vue实现垃圾分类管理系统
短信预约 -IT技能 免费直播动态提醒
本篇内容介绍了“如何使用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(" .allowedOriginPatterns("*") .allowedMethods("*"); }}三、功能演示
跟随前端网址访问网页
登陆主页
查看垃圾信息
用户管理页面
管理员管理页面
“如何使用springboot及vue实现垃圾分类管理系统”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
