基于Spirng+vue+小程序的校园二手平台改管理系统设计与实现

一、 项目背景与意义

随着高校学生规模的扩大和消费观念的转变，校园内闲置物品（如教材、电子产品、生活用品等）的流转需求日益旺盛。传统的线下交易或QQ群、微信群等非正式渠道存在信息不对称、交易效率低、缺乏信任保障等问题。因此，开发一个集信息发布、商品管理、在线沟通、交易保障于一体的校园二手平台管理系统，具有重要的现实意义。

项目意义：

• 资源循环利用：促进校园内闲置物品的流通，践行绿色环保理念。
• 便利学生生活：为学生提供一个安全、便捷、高效的二手交易渠道，降低生活成本。
• 技术实践平台：项目融合了前后端分离、微服务（可选）、移动端开发等主流技术栈，是计算机相关专业学生进行全栈开发的优秀实践案例。
• 培养商业意识：通过平台运营，可初步了解用户运营、商品管理、订单处理等基本商业逻辑。

二、 技术栈选型

本项目采用前后端分离的架构设计，后端提供RESTful API，前端（Web管理端和微信小程序）独立开发部署。

2.1 后端技术栈 (Spring Boot)

• 核心框架：Spring Boot 2.7.x / 3.x
• 安全框架：Spring Security + JWT (JSON Web Token) 实现认证与授权。
• 数据持久层：MyBatis-Plus (简化CRUD操作) 或 Spring Data JPA。
• 数据库：MySQL 8.0 (主库)，Redis (缓存、会话存储、验证码)。
• API文档：Swagger2 / Knife4j 或 SpringDoc OpenAPI。
• 消息队列（可选）：RabbitMQ 或 Kafka，用于异步处理订单状态变更、消息通知等。
• 文件存储：本地存储、FastDFS 或 阿里云OSS/腾讯云COS (用于商品图片、用户头像)。
• 其他：Lombok (简化代码)，Hutool (工具集)，Druid (数据库连接池)。

2.2 前端技术栈 (Web管理端 - Vue.js)

• 核心框架：Vue 3 (Composition API) 或 Vue 2。
• 构建工具：Vite 或 Vue CLI。
• UI组件库：Element Plus (Vue 3) 或 Element UI (Vue 2)。
• 状态管理：Pinia (Vue 3) 或 Vuex (Vue 2)。
• 路由：Vue Router。
• HTTP客户端：Axios。
• 工具：ESLint, Prettier (代码规范)。

2.3 移动端技术栈 (微信小程序)

• 开发框架：微信小程序原生框架 或 uni-app (跨端方案)。
• UI组件：Vant Weapp 或 WeUI。
• 网络请求：微信小程序原生 wx.request 或封装后的库。
• 地图服务：微信小程序地图组件 (用于显示交易地点)。
• 支付：微信支付接口 (实现平台担保交易或直接支付)。
• 云开发（可选）：微信云开发，可快速实现部分后端能力。

2.4 开发与部署

• 版本控制：Git。
• 项目管理：Maven (后端)，npm/yarn/pnpm (前端)。
• 容器化：Docker, Docker Compose。
• 持续集成/部署 (CI/CD)：Jenkins 或 GitLab CI。

三、 系统核心功能模块设计

系统主要分为三个角色：超级管理员、普通管理员（可分配给院系）、学生用户（卖家/买家）。

3.1 学生端（微信小程序）核心功能

• 用户中心：注册/登录（微信一键登录）、个人信息管理、实名认证。
• 商品模块：商品发布（图文描述、价格、分类、位置）、商品管理（上架/下架、编辑、删除）、商品浏览（列表、搜索、筛选、详情）。
• 交易模块：收藏商品、在线聊天（集成WebSocket或第三方SDK）、下单、支付（可选）、订单管理（查看、取消、确认收货）、评价系统。
• 消息模块：系统通知、交易消息推送。
• 社区模块（可选）：论坛、失物招领、拼单。

3.2 管理端（Vue.js Web系统）核心功能

• 仪表盘：数据概览（用户数、商品数、交易额、订单趋势图）。
• 用户管理：用户列表、信息查看、封禁/解封、实名审核。
• 商品管理：全平台商品审核（防止违规信息）、分类管理、下架违规商品。
• 订单管理：查看所有订单、处理纠纷、人工介入。
• 内容管理：公告发布、轮播图管理、客服消息。
• 系统管理：管理员账号与权限管理（RBAC）、操作日志、系统设置。

四、 核心代码示例

4.1 后端核心代码 (Spring Boot)

1. JWT工具类 (JwtUtil.java)

import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import java.util.Date; import java.util.HashMap; import java.util.Map; @Component public class JwtUtil { @Value("${jwt.secret}") private String secret; @Value("${jwt.expiration}") private Long expiration; // 生成Token public String generateToken(String username, String role) { Map<String, Object> claims = new HashMap<>(); claims.put("username", username); claims.put("role", role); return Jwts.builder() .setClaims(claims) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() + expiration * 1000)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } // 解析Token public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(secret) .parseClaimsJws(token) .getBody(); } // 验证Token是否过期 public boolean isTokenExpired(String token) { return parseToken(token).getExpiration().before(new Date()); } }

2. 商品分页查询接口 (GoodsController.java)

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; @RestController @RequestMapping("/api/goods") public class GoodsController { @Resource private GoodsService goodsService; @GetMapping("/list") public Result<IPage<GoodsVO>> listGoods( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String keyword, @RequestParam(required = false) Integer categoryId) { LambdaQueryWrapper<Goods> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(Goods::getStatus, 1); // 只查询已上架商品 if (keyword != null && !keyword.trim().isEmpty()) { wrapper.like(Goods::getTitle, keyword).or().like(Goods::getDescription, keyword); } if (categoryId != null) { wrapper.eq(Goods::getCategoryId, categoryId); } wrapper.orderByDesc(Goods::getCreateTime); IPage<Goods> page = goodsService.page(new Page<>(pageNum, pageSize), wrapper); // 转换为VO，可能包含图片URL处理等 IPage<GoodsVO> voPage = page.convert(goods -> convertToVO(goods)); return Result.success(voPage); } }

4.2 前端核心代码 (Vue 3 + Element Plus)

1. 商品管理页面组件 (GoodsManagement.vue) - 部分代码

<template> <div class="goods-management"> <el-card> <div class="filter-container"> <el-input v-model="listQuery.keyword" placeholder="搜索商品标题/描述" style="width: 200px;" @keyup.enter="handleFilter" /> <el-select v-model="listQuery.categoryId" placeholder="商品分类" clearable style="width: 120px;"> <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id" /> </el-select> <el-button type="primary" @click="handleFilter">搜索</el-button> <el-button @click="resetFilter">重置</el-button> </div> <el-table :data="tableData" border style="width: 100%; margin-top: 20px;"> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="title" label="商品标题" min-width="150" /> <el-table-column prop="price" label="价格" width="120"> <template #default="scope">¥{{ scope.row.price }}</template> </el-table-column> <el-table-column prop="status" label="状态" width="100"> <template #default="scope"> <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"> {{ scope.row.status === 1 ? '已上架' : '已下架' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="180" fixed="right"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px;" > </el-pagination> </el-card> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import { getGoodsList, deleteGoods } from '@/api/goods' const tableData = ref([]) const total = ref(0) const categoryOptions = ref([]) const listQuery = reactive({ pageNum: 1, pageSize: 10, keyword: '', categoryId: null }) const fetchData = async () => { try { const res = await getGoodsList(listQuery) tableData.value = res.data.records total.value = res.data.total } catch (error) { ElMessage.error('获取商品列表失败') } } const handleFilter = () => { listQuery.pageNum = 1 fetchData() } const resetFilter = () => { listQuery.keyword = '' listQuery.categoryId = null handleFilter() } const handleEdit = (row) => { // 跳转到编辑页面或打开编辑对话框 console.log('编辑商品:', row) } const handleDelete = (row) => { ElMessageBox.confirm('确认删除该商品？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { await deleteGoods(row.id) ElMessage.success('删除成功') fetchData() }).catch(() => {}) } onMounted(() => { fetchData() // 加载分类选项... }) </script>

4.3 微信小程序核心代码 (WXML + JS)

1. 商品列表页 (goods-list.wxml 和 goods-list.js)

<!-- goods-list.wxml --> <view class="page"> <!-- 搜索栏 --> <view class="search-bar"> <input placeholder="搜索闲置好物" bindinput="onSearchInput" value="{{keyword}}" /> <button bindtap="onSearch">搜索</button> </view> <!-- 分类筛选 --> <scroll-view scroll-x class="category-scroll"> <view wx:for="{{categories}}" wx:key="id" class="category-item {{activeCategoryId === item.id ? 'active' : ''}}" bindtap="onCategoryTap">// goods-list.js Page({ data: { keyword: '', activeCategoryId: 0, categories: [], goodsList: [], pageNum: 1, pageSize: 10, loading: false, noMoreData: false }, onLoad(options) {