基于springboot+vue如何實(shí)現(xiàn)垃圾分類管理系統(tǒng)
本篇內(nèi)容主要講解“基于springboot+vue如何實(shí)現(xiàn)垃圾分類管理系統(tǒng)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“基于springboot+vue如何實(shí)現(xiàn)垃圾分類管理系統(tǒng)”吧!
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)云和免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
一、項(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）登陸功能
通過和數(shù)據(jù)庫(kù)建立聯(lián)系后，數(shù)據(jù)庫(kù)內(nèi)的用戶和管理員可在登錄頁(yè)面輸入賬號(hào)和密碼登陸網(wǎng)頁(yè)。
（2）數(shù)據(jù)的增、查、改、刪功能
① 垃圾的增、查、改、刪
② 管理員的增、查、改、刪
③ 用戶的增、查、改、刪
（3）通過餅狀圖，柱狀圖可顯示用戶的性別比例，入庫(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í)間到毫秒+原來文件名
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í)間到毫秒+原來文件名
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.解決跨域問題
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true) /*訪問是否需要驗(yàn)證*/
.allowedOriginPatterns("*")
.allowedMethods("*");
}
}三、功能演示
1.跟隨前端網(wǎng)址訪問網(wǎng)頁(yè)
2.登陸主頁(yè)
3.查看垃圾信息
4.用戶管理頁(yè)面
5.管理員管理頁(yè)面
到此，相信大家對(duì)“基于springboot+vue如何實(shí)現(xiàn)垃圾分類管理系統(tǒng)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)站名稱：基于springboot+vue如何實(shí)現(xiàn)垃圾分類管理系統(tǒng)
標(biāo)題URL：http://chinadenli.net/article0/gehioo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站設(shè)計(jì)公司：成都網(wǎng)站建設(shè)人性化設(shè)計(jì) 最容易忽略的三點(diǎn) 2017-02-14
- 上海網(wǎng)站設(shè)計(jì)公司和上海網(wǎng)站建設(shè)公司fighting 2020-11-09
- 上海網(wǎng)站建設(shè)公司,上海網(wǎng)站設(shè)計(jì)公司如何引領(lǐng)建站發(fā)展 2020-11-05
- 成都網(wǎng)站建設(shè)：你會(huì)選擇便宜的網(wǎng)站設(shè)計(jì)公司嗎 2013-07-23
- 網(wǎng)站設(shè)計(jì)公司哪個(gè)好？更專業(yè)靠譜是哪個(gè)？ 2016-10-16
- 網(wǎng)站設(shè)計(jì)公司：讓用戶體驗(yàn)更完美的7個(gè)網(wǎng)頁(yè)設(shè)計(jì)原則 2017-02-15
- 上海網(wǎng)站建設(shè)公司、上海網(wǎng)站設(shè)計(jì)公司中我們有哪些注意事項(xiàng)？ 2020-11-03
- 上海網(wǎng)站設(shè)計(jì)公司和上海網(wǎng)站建設(shè)公司免費(fèi)幫你維護(hù)更新網(wǎng)站 2020-11-09
- 成都網(wǎng)站設(shè)計(jì)公司分享網(wǎng)頁(yè)設(shè)計(jì)的交互性 2022-06-11
- 上海網(wǎng)站設(shè)計(jì)公司、上海網(wǎng)站建設(shè)公司在互聯(lián)網(wǎng)行業(yè)中發(fā)揮了那些作用和優(yōu)勢(shì) 2020-11-06
- 網(wǎng)站設(shè)計(jì)公司介紹_營(yíng)銷型網(wǎng)站建設(shè)應(yīng)該怎么做才能符合要求？ 2016-10-23
- 網(wǎng)站設(shè)計(jì)公司：成都網(wǎng)站建設(shè)公司提醒設(shè)計(jì)師要不斷充電 2017-02-14