“碳路者”—— 基于 SpringBoot+Vue 的环保守望平台设计与实现

摘要：本文提出并实现了一种基于 SpringBoot 与 Vue 的环保守望平台——“碳路者”，通过多角色体系和数据可视化，实现公众参与、网格化管理、管理员监控及决策者分析的功能。平台结合前端 Vue 框架与 ElementUI 组件库，实现动态界面与任务养成系统，后端基于 SpringBoot 与 MyBatis 提供高效数据处理能力，数据库采用 MySQL 和 Redis，实现实时数据存储与缓存管理。系统支持空气质量监测、污染物反馈、积分记录和低碳管理，并配合 AI 人脸识别模块，实现安全登录与身份验证，为环保信息管理和公众参与提供技术支撑。

关键词：碳路者；SpringBoot；Vue

引言

随着社会对环保和低碳生活的重视程度日益提高，信息化平台应用于环保监管越来越普遍。“碳路者”环保守望平台是用SpringBoot和Vue开发的一款多角色管理、任务养成以及数据分析的应用程序。该平台有四种角色：公众监督员、网格员、管理员以及管理者，在前端进行交互，在后端进行数据处理及数据库操作以达到对环境进行监测并及时反馈的目的。平台设有积分和成就系统鼓励人们参与环保工作并通过图形化展示空气质量以及污染情况帮助管理人员更好地进行管理工作。

一、系统特色

（一）多角色协同管理

平台设有公众监督员、网格员、管理员以及决策者四种不同的用户角色，进行分层管理和功能设置。公众监督员可以在注册并登陆后提出污染举报、查看任务完成情况以及最新的新闻动态，还可以参与到低碳任务养成中来。网格员在登录之后可以得到自己负责地区的空气质量监测任务并且上传监测数据，也可以查看以往的数据以及浏览最新的新闻信息。管理员则是在管理端可以对用户的管理、网格的数据统计、低碳积分的管理、空气的质量管理和发布新闻，在整个平台中起到一个总览的作用。决策者可以通过登录平台中的大屏幕看到各地的空气质量、AQI分布以及各种污染物的数量，在做出决定时起到辅助作用^[1]。

（二）任务养成与积分系统

平台设有环保任务养成模块，包括每日任务、环保答题、积分以及成就等级等。用户完成低碳任务或者答题之后，系统会自动保存任务完成情况，获得相应积分，积分到一定数量即可提升一个成就等级。任务和积分都是由后端MyBatis存入数据库，然后用Axios获取并展示给前端，在养成系统的页面上可以看到每天的任务完成进度、积分数值以及成就情况，还有排行版，能够即时了解所有人的任务完成情况，增加用户的积极性。

二、环保守望平台设计

（一）前端界面设计

前端使用 Vue 框架以及 ElementUI 组件库进行开发，实现模块化页面和响应式布局。系统首页有多个功能区入口，“碳路者·养成记”入口、公众监督员登录入口和环保助手，使用 CSS 和 Echarts 组件来展示动态进度条及图表。公众监督员部分通过表单校验以及注册登录组件，实现在线填写信息并完成身份认证。网格员部分展示个人信息、网格概况以及空气质量检测情况等信息，可分页查看历史信息。管理员前端页面整体风格一致，在 Echarts 中展示空气质量检测结果柱状图、折线图、饼图等，支持不同级别用户查看相应数据。决策者大屏使用地图和图表组件，展示各省份、城市的空气质量分布情况。

在组件交互设计上，系统利用Axios向后端接口发送请求，获取空气质量数据、任务完成情况以及用户的反馈意见并将其展示在页面上的图表或者表格中；表单提交有注册、登录、反馈信息、任务操作、答题记录等，在前端进行异步验证保证数据正确性之后再发送到服务器并马上刷新当前页面；Echarts图表配置配合数据接口可以达到自动更新以及对于用户交互的响应，比如点击某个区域展示更多内容^[2]。

（二）后端接口实现

后端使用 SpringBoot 开发，通过 MyBatis 进行数据库操作映射。系统有用户管理接口、任务管理接口、积分管理接口、空气质量管理和决策者数据接口等。用户管理接口包括注册、登录、授权以及查看个人信息，用 Spring Security 进行鉴权与授权。任务管理接口有获取任务、提交结果并获得相应积分的功能。空气质量管理接口用于网格员上报信息、查看过去的数据以及统计污染物数量，返回 JSON 给前端展示。

后端接口采用RESTful风格设计，实现对资源增删改查功能，对于重要接口添加事务以及异常处理来保证数据一致性以及系统的正常运行，接口的设计包括分页查询、数据过滤、条件排序以及状态等，以便满足不同角色的需求，任务完成信息、积分信息以及低碳成就等信息都是通过接口保存和调用，在前端页面上显示准确，数据接口对接收到的数据进行验证。

（三）数据库设计

数据库使用MySQL进行数据存储，通过Redis提高缓存效率。用户表包含公众监督员、网格员、管理员和决策者的个人信息如姓名、电话号码、注册日期以及身份标签等；任务表保存低碳任务和答题任务的内容，有任务类型、任务状态、积分数量和完成时间等字段；反馈表保存用户举报的信息，有污染类别、位置、时间和处理状态等；空气质量表记录每个网格点的AQI、CO、SO₂、PM2.5等数据以及对应的上传时间和网格员ID。

Redis 缓存用于存储热点数据，例如排行榜数据、每日任务列表以及空气质量统计数据等，在前端发送请求时可以直接到缓存中读取这些数据提高了数据读取速度，数据库设计有主键索引、外键关系以及唯一性约束，保证了数据一致性，多表连接实现了用户任务、积分以及反馈信息的一次性获取，便于管理员或者相关人员进行分析操作使用。

（四）系统安全与人脸识别

平台在登录页面接入人脸识别，在前端使用百度人脸识别大模型API，实现公众监督员、网格员以及决策者身份识别。用户在前端拍摄一张自己的脸部照片上传到后端接口中，系统调用人脸识别AI模型进行比对并给出对比结果，对比成功后给予相应角色权限，对比失败让用户重新拍照或者由管理员审核。系统的用户密码是经过加密之后保存到数据库中的。

系统在前端和后端实现输入校验、接口防刷、敏感数据脱敏等功能来保护用户的个人信息安全。任务提交、反馈上传以及积分计算接口都进行了参数校验与身份验证以保证其正确性。数据传输使用HTTPS协议进行加密，数据库备份和日志记录可以防止数据丢失并且便于追踪。系统结合人工智能技术、加密存储以及权限管理等手段对各种不同的用户进行管理和登录的安全性和操作的安全性考虑周到^[3]。

结论

本论文实现了基于Spring Boot和Vue的环保守望平台“碳路者”，利用前端页面交互、后端接口调用、数据库设计以及人脸识别技术，实现多个角色共同管理。“碳路者”具有公众监督员职责、网格员空气质量检测、管理员全面管理和领导人员数据分析等功能，完成任务分配、积分统计以及低碳生活全过程。“碳路者”运用前端动态渲染、后端接口以及缓存优化使数据可以及时显示并且可以查看之前的数据。

参考文献

[1]汤智宏. 基于SpringBoot+Vue的线上书店设计与实践[J].电脑编程技巧与维护,2025,(09):71-73.

[2]薛楠楠,张伟,钟化雨,等. 基于SpringBoot+Vue的事故报告数据库系统设计与实现[J].计算机仿真,2025,42(07):456-462+570.

[3]朱建军,古岳. 环保卫士真情守望可可西里[J].大陆桥视野,2003,(05):52-53.

作者简介：张岩（1991.1.12），性别：男，籍贯：吉林 大安，民族：汉族，学历：本科，职称：系统架构设计师，研究方向：领域驱动设计、微服务、架构演进、敏捷开发、项目管理等。