지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > Java > java지도 시간 > springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법

springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법

WBOY
풀어 주다： 2023-05-12 10:01:19
앞으로
1131명이 탐색했습니다.

1. 프로젝트 개요

1. 프로젝트 내용

이 프로젝트는 IDEA, Visual Studio Code 개발 도구와 Mysql, Navicat for MySQL 도구를 사용하여 springboot+vue 기반의 가비지 분류 관리 시스템을 구현합니다. 시스템은 사용자와 관리자라는 두 가지 유형의 사용자에게 서비스를 제공합니다.

2. 기능 구현

(1) 로그인 기능

데이터베이스에 접속한 후, 데이터베이스의 사용자 및 관리자는 로그인 페이지에서 계정 번호와 비밀번호를 입력하여 웹 페이지에 로그인할 수 있습니다.

(2) 데이터 추가, 확인, 수정, 삭제 기능

① 쓰레기 추가, 확인, 수정, 삭제

② 관리자 추가, 확인, 수정, 삭제

③ 사용자 추가, 확인, 수정 , 삭제

(3) 원형 차트와 막대 차트를 통해 사용자의 성별 비율, 창고 내 쓰레기 양 정보, 전체 사용자 수, 전체 관리자 수, 창고 내 쓰레기 양, 창고 내 쓰레기 양, 쿼리 수 등

2. 구체적인 구현

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("*");
    }
}
로그인 후 복사

3. 프런트 엔드 URL을 따라가서 웹페이지에 접속하세요

2. 홈페이지에 로그인하세요

springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법

3. 스팸 메시지 보기

springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법

4. 관리자 관리페이지

springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법

위 내용은 springboot+vue 기반의 쓰레기 분류 관리 시스템 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue springboot
원천：yisu.com
이전 기사：Apache Camel과 Springboot가 파일 전송을 구현하는 방법 다음 기사：springboot에서 자체 시작을 달성하기 위해 Tomcat 컨테이너를 사용하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿