基于springboot+vue实现垃圾分类管理系统

2024-07-31 17:04:54

本文实例为大家分享了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.管理员管理页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

SpringBoot+Shiro+LayUI权限管理系统项目源码

1.项目介绍本项目旨在打造一个基于RBAC架构模式的通用的.并不复杂但易用的权限管理系统.通过本项目可以较好的理解权限系统的常见业务同时学习掌握Springboot和Shiro等诸多技术点. 2.项目源码百度网盘链接: 链接: https://pan.baidu.com/s/1GGTe_uf0H7CvMQBP_NCRxg 提取码: 1jwr 3.功能介绍部门管理对于一个公司来说,下设众多部门.此处以组织机构树形式动态扩展. 角色管理包括角色信息的增删改查.权限授予.取消操作. 权限管理
基于VUE实现简单的学生信息管理系统

一.主要功能本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为: 1.显示所有学生的信息(默认为10个) 2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息 3. 增加学生信息 4. 要求使用VUE中父子组件间通信二.实现思路 1.数据管理:使用json数组的方式来管理储存数据 2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件.主页(父组件)使用v-for循环显示子组件. 3.按单双号筛选查找学生:
vue实现户籍管理系统

本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下户籍管理系统,v-model,v-for的引用界面预览步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
vue实现信息管理系统

最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
使用Springboot实现健身房管理系统

项目编号:BS-XX-076 开发技术:springboot+springmvc+mybatis+shiro 前端技术:BootStrap+Jquery+Ajax+Echarts 开发工具:IDEA或ECLIPSE 数据库:MYSQL5.7 运行启动:GymxmjpaApplication启动类项目说明: 本系统基于Springboot技术开发实现,同时采用SSM框架进行系统的后台开发,前端采用Bootstrap技术实现页面的设计与人机交互,数据库采用MYSQL5.7进行数据存储.为保证用户信
springboot搭建访客管理系统的实现示例

项目介绍 springboot搭建的访客管理系统,针对高端基地做严格把控来访人员信息管理,用户后端可以设置多个管理员帐号,给予不同部门的管理层使用,用户管理可以增加/修改内部成员的基本信息,需要到访的人员必须通过进入程序,在访客预约里面提交预约申请,预约后管理员可查询预约记录以及访客出入记录. 项目适用人群正在做毕设的学生,或者需要项目实战练习的Java学习者开发环境 jdk 8 intellij idea tomcat 8.5.40 mysql 5.7 所用技术 springboot my
vue实现图书管理系统

本文实例为大家分享了vue实现图书管理系统的具体代码,供大家参考,具体内容如下组件代码 <template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id" v-focus> 编
10k+点赞的 SpringBoot 后台管理系统教程详解

其实项目网上有很多了,但是教程比较详细的没多少,今天分享的项目从安装部署到代码具体功能都有很详细都说明 eladmin 是一款基于 Spring Boot 2.1.0 . Jpa. Spring Security.redis.Vue 的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前后端代码,支持动态路由. 这个开源项目基本稳定,并且后续作者还会继续优化.完全开源!这个真的要为原作者点个赞,如果大家觉得这个项目有用的话,建议可
vue实现学生信息管理系统

本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下界面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title>  <script src="https://cdn.jsdelivr
VueJS实现用户管理系统

本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

基于springboot+vue实现垃圾分类管理系统

一、项目概述

二、具体实现

三、功能演示

相关推荐

随机推荐