基于springboot+vue實(shí)現(xiàn)垃圾分類管理系統(tǒng)
更新時(shí)間：2021年07月16日 09:44:55 作者：m0_53095268
這篇文章主要為大家詳細(xì)介紹了基于springboot+vue實(shí)現(xiàn)垃圾分類管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了springboot+vue實(shí)現(xiàn)垃圾分類管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下
一、項(xiàng)目概述
1.項(xiàng)目?jī)?nèi)容
本項(xiàng)目利用IDEA，Visual Studio Code 開發(fā)工具，借助Mysql,Navicat for MySQL 工具，實(shí)現(xiàn)了一個(gè)基于springboot+vue的垃圾分類管理系統(tǒng)。系統(tǒng)為兩種類型的用戶提供服務(wù)，用戶和管理員。
2.實(shí)現(xiàn)功能
（1）登陸功能
通過(guò)和數(shù)據(jù)庫(kù)建立聯(lián)系后，數(shù)據(jù)庫(kù)內(nèi)的用戶和管理員可在登錄頁(yè)面輸入賬號(hào)和密碼登陸網(wǎng)頁(yè)。
（2）數(shù)據(jù)的增、查、改、刪功能
① 垃圾的增、查、改、刪
② 管理員的增、查、改、刪
③ 用戶的增、查、改、刪
（3）通過(guò)餅狀圖，柱狀圖可顯示用戶的性別比例，入庫(kù)垃圾的數(shù)量信息，用戶總數(shù)，管理員總數(shù)，入庫(kù)垃圾數(shù)量，查詢次數(shù)等。
二、具體實(shí)現(xiàn)
1.前端登陸界面
<template>
<div class="login-wrap">
<div class="ms-title">垃圾分類信息管理系統(tǒng)</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:"請(qǐng)輸入用戶名",trigger:"blur"}
],
password:[
{required:true,message:"請(qǐng)輸入密碼",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.增刪改查實(shí)現(xiàn)
（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();
//保存到管理員的對(duì)象中
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();
//保存到管理員的對(duì)象中
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;
}
//文件名=當(dāng)前時(shí)間到毫秒+原來(lái)文件名
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();
}
//實(shí)際文件路徑
File dest = new File(filePath+System.getProperty("file.separator")+fileName);
//存儲(chǔ)到數(shù)據(jù)庫(kù)的相對(duì)文件地址
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();
//保存到垃圾信息的對(duì)象當(dāng)中
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");
//保存到垃圾信息的對(duì)象中去
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);
//保存到用戶的對(duì)象中
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();
}
//保存到用戶的對(duì)象中
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;
}
//文件名=當(dāng)前時(shí)間到毫秒+原來(lái)文件名
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();
}
//實(shí)際文件路徑
File dest = new File(filePath+System.getProperty("file.separator")+fileName);
//存儲(chǔ)到數(shù)據(jù)庫(kù)的相對(duì)文件地址
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.解決跨域問(wèn)題
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true) /*訪問(wèn)是否需要驗(yàn)證*/
.allowedOriginPatterns("*")
.allowedMethods("*");
}
}
三、功能演示
1.跟隨前端網(wǎng)址訪問(wèn)網(wǎng)頁(yè)
2.登陸主頁(yè)
3.查看垃圾信息
4.用戶管理頁(yè)面
5.管理員管理頁(yè)面
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Spring boot + jQuery上傳文件(kotlin)功能實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了使用Spring boot + jQuery上傳文件(kotlin) 功能,需要的朋友可以參考下2017-07-07
不喜歡羅里吧嗦，講的很精簡(jiǎn)易懂。從基礎(chǔ)開始講，后續(xù)會(huì)講到JAVA高級(jí)，中間會(huì)穿插面試題和項(xiàng)目實(shí)戰(zhàn)，希望能給大家?guī)?lái)幫助2022-03-03
JVM內(nèi)存管理:OutOfMemoryError異常的問(wèn)題
這篇文章主要介紹了JVM內(nèi)存管理:OutOfMemoryError異常的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
在xml中,有一些符號(hào)作為XML 的標(biāo)記符號(hào)，一些特定情況下，屬性值必須帶有這些特殊符號(hào)。 下面主要是講解一些常用的特殊符號(hào)的處理2016-07-07
SpringBoot使用Validation包進(jìn)行輸入?yún)?shù)校驗(yàn)
Spring Boot 自帶的 spring-boot-starter-validation 包支持以標(biāo)準(zhǔn)注解的方式進(jìn)行輸入?yún)?shù)校驗(yàn),本文即關(guān)注 spring-boot-starter-validation 包所涵蓋的標(biāo)準(zhǔn)注解的使用、校驗(yàn)異常的捕獲與展示、分組校驗(yàn)功能的使用,以及自定義校驗(yàn)器的使用,需要的朋友可以參考下2024-05-05
SpringBoot3+SpringSecurity6前后端分離的項(xiàng)目實(shí)踐
SpringSecurity6 的用法和以前版本的有較大差別,本文主要介紹了SpringBoot3+SpringSecurity6前后端分離的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
pom是maven的基本工作單元,它是一個(gè)XML文件,其中包含有關(guān)項(xiàng)目的信息以及Maven用于構(gòu)建項(xiàng)目的配置詳細(xì)信息,本文給大家介紹maven中的pom詳述,感興趣的朋友一起看看吧2025-10-10
這篇文章主要介紹了在Java中判斷兩個(gè)Long對(duì)象是否相等的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了SpringBoot中MVC的自動(dòng)配置詳解,在實(shí)際開發(fā)過(guò)程中,還有一些老的系統(tǒng)在使用xml格式來(lái)傳輸數(shù)據(jù),SpringBoot也提供了xml格式數(shù)據(jù)的返回,只需要小小的改動(dòng),就可以實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
MyBatis動(dòng)態(tài)SQL之＜choose＞＜when＞＜o(jì)therwise＞標(biāo)簽的使用
MyBatis中動(dòng)態(tài)語(yǔ)句choose-when-otherwise 類似于Java中的switch-case-default語(yǔ)句,本文就來(lái)介紹一下MyBatis動(dòng)態(tài)SQL之＜choose＞＜when＞＜o(jì)therwise＞標(biāo)簽的使用,感興趣的可以了解一下2023-09-09