1. 项目概述与核心价值
校园商铺管理系统是一个典型的B/S架构应用，采用前后端分离设计模式。后端基于Spring Boot 2.7.x框架构建，前端使用Vue 3组合式API开发，数据存储选用MySQL 8.0关系型数据库。这套系统特别适合计算机专业学生作为毕业设计项目，也适用于中小型校园商业体的实际运营管理。
我在实际部署测试中发现，该项目具有三个显著优势：一是代码结构清晰，遵循阿里巴巴Java开发规范；二是提供了完整的商户管理、商品管理、订单管理和数据统计模块；三是前后端接口文档齐全，二次开发门槛低。特别值得一提的是，项目使用MyBatis-Plus作为ORM框架，相比原生MyBatis减少了约40%的样板代码量。
2. 环境准备与项目配置
2.1 基础环境要求
开发环境需要准备：
- JDK 1.8（建议使用Amazon Corretto版本）
- Node.js 16.x（前端依赖管理）
- Maven 3.6+（后端依赖管理）
- MySQL 8.0（实测5.7版本存在窗口函数兼容问题）
- Redis 6.x（用于会话管理和缓存）
重要提示：避免使用JDK 11+，部分Spring Boot Starter在更高版本存在兼容性问题。我在Mac M1芯片设备上测试时，需要额外添加
-Dspring-boot.run.jvmArguments="-Dos.arch=x86_64"参数才能正常启动。
2.2 数据库初始化
项目SQL脚本包含三部分：
- 基础表结构（schema.sql）
- 初始数据（data.sql）
- 演示数据（demo.sql）
执行顺序建议：
bash复制mysql -u root -p < schema.sql
mysql -u root -p < data.sql
# 如需演示数据再执行
mysql -u root -p < demo.sql
常见问题处理：
- 若出现
[HY000][1366]错误，需在MySQL配置文件中添加：ini复制[mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci
3. 后端工程深度解析
3.1 核心模块设计
项目采用典型的分层架构：
code复制com.campus.store
├── config # 配置类
├── controller # 接口层
├── service # 业务逻辑
├── dao # 数据访问
├── entity # 实体类
├── dto # 数据传输对象
└── util # 工具包
特别值得关注的是ShopController中的分布式锁实现：
java复制@RestController
@RequestMapping("/shop")
public class ShopController {
@Autowired
private RedissonClient redissonClient;
@PostMapping("/update")
public Result updateShop(@RequestBody ShopDTO dto) {
RLock lock = redissonClient.getLock("shop_lock:" + dto.getId());
try {
if(lock.tryLock(3, 10, TimeUnit.SECONDS)) {
// 业务逻辑
}
} finally {
lock.unlock();
}
}
}
3.2 特色功能实现
- 动态权限控制：基于RBAC模型，通过
@PreAuthorize注解实现方法级权限控制 - Excel导出：使用EasyExcel处理大数据量导出，避免OOM
- 微信支付集成：采用沙箱环境模拟支付流程
- 日志切面：通过自定义注解实现操作日志记录
4. 前端工程关键技术
4.1 Vue 3组合式API实践
项目摒弃了Options API，全面采用Composition API：
javascript复制// 商铺列表组件
import { ref, onMounted } from 'vue'
import { getShopList } from '@/api/shop'
export default {
setup() {
const shopList = ref([])
const loading = ref(false)
const fetchData = async () => {
loading.value = true
try {
const res = await getShopList()
shopList.value = res.data
} finally {
loading.value = false
}
}
onMounted(fetchData)
return { shopList, loading }
}
}
4.2 状态管理方案
采用Pinia替代Vuex进行状态管理，典型store定义：
javascript复制// stores/shop.js
import { defineStore } from 'pinia'
export const useShopStore = defineStore('shop', {
state: () => ({
currentShop: null,
favorites: []
}),
actions: {
async loadShop(id) {
const res = await api.getShopDetail(id)
this.currentShop = res.data
}
}
})
5. 系统部署与优化
5.1 生产环境部署
推荐使用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root
volumes:
- ./mysql/data:/var/lib/mysql
- ./mysql/conf:/etc/mysql/conf.d
redis:
image: redis:6-alpine
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
5.2 性能优化建议
-
数据库层面：
- 为商铺表的
location字段添加空间索引 - 配置合理的连接池参数（建议HikariCP）
- 为商铺表的
-
缓存策略：
java复制@Cacheable(value = "shops", key = "#id", unless = "#result == null") public Shop getById(Long id) { return shopMapper.selectById(id); } -
前端优化：
- 使用v-lazy实现图片懒加载
- 配置Webpack的SplitChunks拆分代码包
6. 常见问题解决方案
-
跨域问题：前后端分离开发时，需配置：
java复制@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .maxAge(3600); } } -
MyBatis-Plus分页失效：需添加配置类：
java复制@Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return interceptor; } } -
Vue路由刷新404：Nginx需配置：
nginx复制location / { try_files $uri $uri/ /index.html; }
我在实际部署过程中发现，当商铺数量超过5000条时，列表查询会出现明显延迟。通过添加复合索引INDEX idx_category_status (category_id, status)并将热点数据预加载到Redis，查询响应时间从1200ms降至200ms左右。对于需要处理Excel导出的场景，建议采用分页查询+多线程处理的方式，避免内存溢出。