基于springboot+vue實(shí)現(xiàn)垃圾分類(lèi)管理系統(tǒng)
更新時(shí)間：2021年07月16日 09:44:55 作者：m0_53095268
這篇文章主要為大家詳細(xì)介紹了基于springboot+vue實(shí)現(xiàn)垃圾分類(lèi)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了springboot+vue實(shí)現(xiàn)垃圾分類(lèi)管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下
一、項(xiàng)目概述
1.項(xiàng)目?jī)?nèi)容
本項(xiàng)目利用IDEA，Visual Studio Code 開(kāi)發(fā)工具，借助Mysql,Navicat for MySQL 工具，實(shí)現(xiàn)了一個(gè)基于springboot+vue的垃圾分類(lèi)管理系統(tǒng)。系統(tǒng)為兩種類(lèi)型的用戶提供服務(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ù)量，查詢(xún)次數(shù)等。
二、具體實(shí)現(xiàn)
1.前端登陸界面
<template>
<div class="login-wrap">
<div class="ms-title">垃圾分類(lèi)信息管理系統(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;
}
/**
* 查詢(xún)管理員
**/
@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;
}
/**
* 查詢(xún)垃圾信息
**/
@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;
}
/**
* 查詢(xún)用戶
**/
@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)文章
這篇文章主要介紹了Java彈簧布局管理器使用方法詳解,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹一下Java集合類(lèi)中List的用法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Java有一定幫助，感興趣的可以了解一下2022-07-07
這篇文章主要介紹了restTemplate遇到的編碼問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-10-10
這篇文章主要介紹了@Async異步線程池以及線程的命名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
Java實(shí)戰(zhàn)之用springboot+netty實(shí)現(xiàn)簡(jiǎn)單的一對(duì)一聊天
這篇文章主要介紹了Java實(shí)戰(zhàn)之用springboot+netty實(shí)現(xiàn)簡(jiǎn)單的一對(duì)一聊天,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)Java的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-04-04
JAVA中String介紹及常見(jiàn)面試題小結(jié)
這篇文章主要介紹了JAVA中String介紹及常見(jiàn)面試題,在java面試中經(jīng)常會(huì)被面試官問(wèn)到，小編通過(guò)實(shí)例代碼相結(jié)合給大家詳細(xì)介紹，需要的朋友可以參考下2020-02-02
Java?nacos動(dòng)態(tài)配置實(shí)現(xiàn)流程詳解
使用動(dòng)態(tài)配置的原因是properties和yaml是寫(xiě)到項(xiàng)目中的，好多時(shí)候有些配置需要修改，每次修改就要重新啟動(dòng)項(xiàng)目，不僅增加了系統(tǒng)的不穩(wěn)定性，也大大提高了維護(hù)成本，非常麻煩，且耗費(fèi)時(shí)間2022-09-09
Eclipse手動(dòng)導(dǎo)入DTD文件實(shí)現(xiàn)方法解析
這篇文章主要介紹了Eclipse手動(dòng)導(dǎo)入DTD文件實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
Java中print、printf、println的區(qū)別
這篇文章主要介紹了Java中print、printf、println的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-03-03
ThreadPoolExecutor中的submit()方法詳細(xì)講解
在使用線程池的時(shí)候，發(fā)現(xiàn)除了execute()方法可以執(zhí)行任務(wù)外，還發(fā)現(xiàn)有一個(gè)方法submit()可以執(zhí)行任務(wù)，本文就詳細(xì)的介紹一下ThreadPoolExecutor中的submit()方法，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04