基於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.管理員管理頁面
相關文章
- 基於 HTML5 WebGL 的垃圾分類系統HTMLWeb
- Axure高保真web端後臺管理系統/垃圾回收分類系統/垃圾回收高保真原型設計 /垃圾分類後臺管理系統/垃圾回收分類平臺//垃圾回收分類智慧管理系統/訂單管理/財務管理/系統管理/庫存管理/裝置管理Web原型
- VR垃圾分類體驗系統：學習垃圾分類知識科普VR
- Springboot+Vue宿舍管理系統Spring BootVue
- 深度學習專案實戰：垃圾分類系統深度學習
- 第7章 基於樸素貝葉斯的垃圾郵件分類
- 智慧垃圾分類回收系統解決方案（經典案例）
- 推薦一個基於Springboot+Vue的開源部落格系統Spring BootVue
- 基於支援向量機的影像分類系統（MATLAB GUI介面版）MatlabGUI
- 系統的分類
- 基於thincmf的內容管理系統
- 基於 hyperf,vuetify,casbin 開發的前後端分離管理系統Vue後端
- SpringBoot+Vue前後端分離系統搭建Spring BootVue後端
- 雲vps管理系統簡單分類
- 零基礎搭建智慧垃圾分類小程式
- 基於RBAC的許可權管理系統
- 基於角色管理的系統訪問控制
- 基於JAVA WEB的醫藥管理系統JavaWeb
- 巧用oracle系統中物料多維分類管理Oracle
- 智慧垃圾分類回收系統開發，需要哪些功能和技術點？
- 綠色城市智慧運營：Web 3D 垃圾分類 GIS 系統Web3D
- 基於 ThinkPHP6 開發的模組化前後臺分離管理系統PHP
- stm32智慧垃圾桶，垃圾分類
- 基於sklearn的分類器實戰
- 基於支援向量機的文字分類文字分類
- IT系統的三種分類
- 基於java的社群居民資訊管理系統Java
- 基於java的客戶關係管理系統Java
- 基於檔案的學生資訊管理系統
- 基於php學生資訊管理系統PHP
- Web 3D 垃圾分類 GIS 系統，智慧城市環保一體化監控系統Web3D
- sh001基於springboot+vue的線上醫院掛號系統[帶LW文件]Spring BootVue
- 基於 KubeSphere 的分級管理實踐
- 基於adminlte的後臺管理系統開發
- 基於Tp23開發的bug管理系統
- 基於HTML5WebGL的地鐵管理系統HTMLWeb
- 基於JSP開發的物流資訊管理系統JS
- 基於SSM開發的物業維修管理系統SSM