如何使用SpringBoot及Vue实现垃圾分类管理系统

引言

随着城市化进程的加快，垃圾处理问题日益严重。垃圾分类作为一种有效的垃圾处理方式，逐渐被广泛推广。为了更好地管理和推广垃圾分类，开发一个垃圾分类管理系统显得尤为重要。本文将介绍如何使用SpringBoot和Vue.js技术栈来实现一个简单的垃圾分类管理系统。

系统架构设计

技术选型

• 后端: SpringBoot
• 前端: Vue.js
• 数据库: MySQL
• 构建工具: Maven (后端), npm (前端)
• API文档: Swagger

系统功能模块

1. 用户管理模块

   • 用户注册、登录
   • 用户信息管理

2. 垃圾分类模块

   • 垃圾分类查询
   • 垃圾分类记录

3. 数据统计模块

   • 垃圾分类数据统计
   • 用户行为分析

4. 系统管理模块

   • 管理员登录
   • 系统配置

后端实现

1. 项目初始化

使用Spring Initializr快速生成一个SpringBoot项目，添加以下依赖：

• Spring Web
• Spring Data JPA
• MySQL Driver
• Lombok
• Swagger

2. 数据库设计

创建以下表结构：

• 用户表 (user)

  • id (主键)
  • username (用户名)
  • password (密码)
  • email (邮箱)
  • role (角色)

• 垃圾分类表 (garbage_category)

  • id (主键)
  • name (垃圾名称)
  • category (分类)
  • description (描述)

• 垃圾分类记录表 (garbage_record)

  • id (主键)
  • user_id (用户ID)
  • garbage_id (垃圾ID)
  • date (记录日期)

3. 实体类与Repository

@Entity
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String email;
    private String role;
}

@Entity
@Data
public class GarbageCategory {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String category;
    private String description;
}

@Entity
@Data
public class GarbageRecord {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Long userId;
    private Long garbageId;
    private LocalDate date;
}

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByUsername(String username);
}

public interface GarbageCategoryRepository extends JpaRepository<GarbageCategory, Long> {
    List<GarbageCategory> findByCategory(String category);
}

public interface GarbageRecordRepository extends JpaRepository<GarbageRecord, Long> {
    List<GarbageRecord> findByUserId(Long userId);
}

4. 控制器与业务逻辑

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @PostMapping("/register")
    public ResponseEntity<User> register(@RequestBody User user) {
        user.setPassword(passwordEncoder.encode(user.getPassword()));
        User savedUser = userRepository.save(user);
        return ResponseEntity.ok(savedUser);
    }

    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestBody User user) {
        // 实现登录逻辑
    }
}

@RestController
@RequestMapping("/api/garbage")
public class GarbageController {
    @Autowired
    private GarbageCategoryRepository garbageCategoryRepository;

    @GetMapping("/categories")
    public ResponseEntity<List<GarbageCategory>> getCategories(@RequestParam String category) {
        List<GarbageCategory> categories = garbageCategoryRepository.findByCategory(category);
        return ResponseEntity.ok(categories);
    }
}

5. 配置Swagger

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.garbage"))
                .paths(PathSelectors.any())
                .build();
    }
}

前端实现

1. 项目初始化

使用Vue CLI创建一个新的Vue项目：

vue create garbage-management-system

2. 安装依赖

安装必要的依赖：

npm install axios vue-router vuex

3. 路由配置

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Register from './views/Register.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
  ]
});

4. Vuex状态管理

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    login({ commit }, credentials) {
      // 实现登录逻辑
    },
    register({ commit }, user) {
      // 实现注册逻辑
    }
  }
});

5. 页面组件

Home.vue

<template>
  <div>
    <h1>垃圾分类管理系统</h1>
    <div v-if="user">
      <p>欢迎, {{ user.username }}</p>
      <button @click="logout">退出</button>
    </div>
    <div v-else>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  methods: {
    logout() {
      this.$store.commit('setUser', null);
      this.$store.commit('setToken', null);
      this.$router.push('/login');
    }
  }
};
</script>

Login.vue

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="login">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      });
    }
  }
};
</script>

Register.vue

<template>
  <div>
    <h2>注册</h2>
    <form @submit.prevent="register">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <input v-model="email" placeholder="邮箱" />
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      email: ''
    };
  },
  methods: {
    register() {
      this.$store.dispatch('register', {
        username: this.username,
        password: this.password,
        email: this.email
      });
    }
  }
};
</script>

前后端联调

1. 配置跨域

在SpringBoot项目中配置跨域支持：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

2. 前端请求封装

在Vue项目中封装axios请求：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8080/api',
  headers: {
    'Content-Type': 'application/json'
  }
});

export default {
  login(credentials) {
    return apiClient.post('/users/login', credentials);
  },
  register(user) {
    return apiClient.post('/users/register', user);
  },
  getCategories(category) {
    return apiClient.get(`/garbage/categories?category=${category}`);
  }
};

3. 调用API

在Vuex的actions中调用API：

import api from '@/services/api';

export default {
  login({ commit }, credentials) {
    return api.login(credentials).then(response => {
      commit('setUser', response.data.user);
      commit('setToken', response.data.token);
    });
  },
  register({ commit }, user) {
    return api.register(user).then(response => {
      commit('setUser', response.data.user);
      commit('setToken', response.data.token);
    });
  }
};

总结

本文介绍了如何使用SpringBoot和Vue.js技术栈实现一个简单的垃圾分类管理系统。通过前后端分离的架构设计，系统具备了良好的扩展性和维护性。未来可以在此基础上进一步扩展功能，如增加垃圾分类的智能识别、数据可视化等模块，以提升系统的实用性和用户体验。