前后端分离的简单垃圾分类信息管理系统

前言

本项目以IntelIDEA，Visual Studio Code，为开发工具，使用Mysql，Navicat工具，借助spring boot后台开发框架以及vue前端架构，创建web端的垃圾分类信息管理系统，实现垃圾分类信息管理系统中对垃圾分类信息、用户数据信息以及管理员数据信息进行基本增删改查操作功能，并实现简易的数据统计及数据可视化功能。

---

实验要求与目标

1. 基础登录功能，实现前后端分离时前端与后台服务器以及数据库的连接
2. 垃圾分类信息增、删、改、查操作功能。
3. 用户信息增、删、改、查操作功能。
4. 管理员信息增、删、改、查操作功能。
5. 前端对相关数据的可视化显示。

---

相关资料

SpringBoot所具备的特征有：

• （1）可以创建独立的Spring应用程序，并且基于其Maven或Gradle插件，可以创建可执行的JARs和WARs；
• （2）内嵌Tomcat或Jetty等Servlet容器；
• （3）提供自动配置的“starter”项目对象模型（POMS）以简化Maven配置；
• （4）尽可能自动配置Spring容器；
• （5）提供准备好的特性，如指标、健康检查和外部化配置；
• （6）绝对没有代码生成，不需要XML配置。

• Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
• Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
• Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。

来源：百度百科

---

实验思路

---

实验过程与部分代码

实验主要分为以下步骤：
1、数据库的设计。
2、前端界面的实现。
3、后端逻辑代码。
4、前后端连接。

相关核心代码

数据库的设计：

admin：

garbage:

user:

由于部分功能类似，故展现部分代码。

数据库的设计：

类的设计：

配置类：

【1】管理员图片：AdminPicConfig
【2】用户图片：UserPicConfig

package com.javaclimb.test.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/*
* 定位管理员图像
* */
@Configuration
public class AdminPicConfig implements WebMvcConfigurer {
   

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
   
        registry.addResourceHandler("/img/AdminPic/**").addResourceLocations(
                "file:"+System.getProperty("user.dir")+System.getProperty("file.separator")+"img"
                        +System.getProperty("file.separator")+"AdminPic"+System.getProperty("file.separator")
        );
    }
}

Controller层：

@RestController
@RequestMapping("/admin")
public class AdminGuanliController {
   

    @Autowired
    private AdminGuanliService AdminGuanliService;


    /*判断是否登录成功*/
    @RequestMapping(value="/login/status",method = RequestMethod.POST)
    public Object loginStatus(HttpServletRequest request, HttpSession session){
   
        JSONObject jsonObject=new JSONObject();
        String name=request.getParameter("name");
        String password=request.getParameter("password");
        boolean flag=AdminGuanliService.verifyPassword(name,password);
        if(flag){
   
            jsonObject.put(Consts.CODE,1);
            jsonObject.put(Consts.MSG,"登录成功");
            session.setAttribute(Consts.NAME,name);
            return jsonObject;
        }
        else{
   
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"用户名或密码错误");
            return jsonObject;
        }
    }

    /*
    * 添加管理员
    * */
    @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)