企业官网建设流程全解析

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！

1. 项目背景与意义

随着城市化进程的加快，生活垃圾产量逐年攀升，垃圾分类已成为城市治理的重要课题。然而，传统垃圾分类宣传方式效果有限，居民参与积极性不高。本系统以「积分激励」为核心机制，将垃圾分类行为与积分兑换挂钩，通过信息化手段提升居民参与度，推动垃圾分类从「被动约束」走向「主动参与」。

系统采用 SpringBoot + Vue3 前后端分离架构，后端负责业务逻辑与数据持久化，前端提供友好的交互界面，整体具备良好的扩展性与维护性。

2. 系统功能模块

本系统围绕「分类投放、积分获取、积分消费」三大核心环节，设计以下功能模块：

• 用户管理：居民注册、登录、个人信息维护、积分余额查询。
• 垃圾分类指南：展示可回收物、有害垃圾、厨余垃圾、其他垃圾的分类标准与投放指引。
• 积分获取：居民正确投放垃圾后，由管理员或智能设备录入积分；支持扫码投放、拍照上传等场景。
• 积分商城：提供生活用品、优惠券等兑换商品，居民使用积分兑换。
• 兑换记录：记录积分变动明细，支持按时间、类型筛选查询。
• 后台管理：管理员对用户、商品、积分规则、投放记录进行统一管理。

3. 技术架构

系统采用前后端分离架构，具体技术选型如下：

4. 数据库设计

系统核心数据表包括用户表、商品表、积分明细表、投放记录表等。以下为主要表结构说明：

• user：用户基本信息，包含用户名、密码、手机号、积分余额、角色等字段。
• product：兑换商品信息，包含商品名称、图片、所需积分、库存等字段。
• points_record：积分变动明细，包含用户ID、变动类型（获取/消费）、变动数量、时间等字段。
• recycle_record：垃圾投放记录，包含用户ID、垃圾类型、投放重量、审核状态等字段。

5. 核心功能实现

5.1 用户登录与 JWT 鉴权

用户登录成功后，后端生成 JWT 令牌返回前端，前端在后续请求中携带令牌，后端通过拦截器校验身份。核心代码如下：

@RestController @RequestMapping("/api/auth") public class AuthController { @Autowired private UserService userService; @Autowired private JwtUtil jwtUtil; @PostMapping("/login") public Result login(@RequestBody LoginDTO dto) { User user = userService.login(dto.getUsername(), dto.getPassword()); String token = jwtUtil.generateToken(user.getId(), user.getUsername()); return Result.success(new LoginVO(token, user)); } }

5.2 积分获取与兑换

居民投放垃圾后，管理员审核通过即增加积分；居民在商城兑换商品时扣除积分。积分变动统一记录到积分明细表，保证数据可追溯。核心代码如下：

@Service public class PointsService { @Autowired private PointsRecordMapper pointsRecordMapper; @Autowired private UserMapper userMapper; @Transactional public void addPoints(Long userId, Integer points, String reason) { User user = userMapper.selectById(userId); user.setPoints(user.getPoints() + points); userMapper.updateById(user); PointsRecord record = new PointsRecord(); record.setUserId(userId); record.setChangeType(1); record.setChangeValue(points); record.setReason(reason); pointsRecordMapper.insert(record); } }

5.3 前端积分商城页面

前端使用 Vue3 组合式 API 实现积分商城列表展示与兑换操作，代码如下：

<script setup> import { ref, onMounted } from 'vue' import { getProductList, exchangeProduct } from '@/api/product' import { ElMessage } from 'element-plus' const productList = ref([]) const loadProducts = async () => { const res = await getProductList() productList.value = res.data } const handleExchange = async (product) => { await exchangeProduct(product.id) ElMessage.success('兑换成功') loadProducts() } onMounted(loadProducts) </script>

6. 系统界面展示

系统主要页面包括登录页、首页、垃圾分类指南页、积分商城页、个人中心页。前端采用 Element Plus 组件库，整体风格简洁清晰，操作路径直观。

7. 总结与展望

本系统通过积分激励机制有效提升了居民参与垃圾分类的积极性，实现了垃圾分类行为的数字化管理。后续可在以下方向继续优化：

• 接入智能回收设备，实现自动识别垃圾类型并自动积分。
• 增加社区排行榜与环保勋章体系，提升用户粘性。
• 对接第三方支付或电商平台，丰富兑换商品种类。