1. 项目概述校园美食探索平台的技术架构这个校园周边美食探索及分享平台采用经典的SpringBootVue前后端分离架构是一套完整可运行的信息管理系统源码。作为校园生活服务类应用它主要解决三个核心问题一是帮助学生快速发现周边优质餐饮资源二是构建用户生成内容UGC的分享社区三是为商家提供精准的学生客群触达渠道。技术栈选择上后端采用SpringBoot 2.7.x框架配合MyBatis-Plus实现数据持久化前端使用Vue 3组合式API开发数据库选用MySQL 8.0这种技术组合在当前企业级应用中非常普遍。整套源码开箱即用已经配置好Maven依赖和Vue CLI环境开发者导入IDE后只需修改数据库连接配置即可启动。提示项目默认使用3306端口MySQL建议提前安装好MySQL Workbench或Navicat等管理工具。实测在16GB内存的开发机上完整启动时间约35秒。2. 核心功能模块解析2.1 用户系统设计采用RBAC基于角色的访问控制模型区分普通用户、商家管理员和系统管理员三种角色。用户表(users)关键字段包括CREATE TABLE users ( user_id bigint NOT NULL AUTO_INCREMENT COMMENT 雪花算法ID, username varchar(50) NOT NULL COMMENT 登录账号, nickname varchar(50) DEFAULT NULL COMMENT 显示名称, avatar varchar(255) DEFAULT NULL COMMENT 头像URL, role enum(user,merchant,admin) DEFAULT user, school_id int DEFAULT NULL COMMENT 所属院校 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;密码存储采用BCrypt强哈希加密Spring Security配置类中关键代码如下Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(12); }2.2 美食数据管理核心数据表包括店铺表(shops)、菜品表(dishes)和评论表(reviews)表关系设计如下表名关键字段索引设计shopsshop_id, name, location(地理坐标), avg_price, opening_hours空间索引(location), 全文索引(name)dishesdish_id, shop_id, name, price, image_url普通索引(shop_id)reviewsreview_id, user_id, shop_id, content, rating, images联合索引(shop_id, create_time)后端采用阿里云OSS存储图片资源前端通过预签名URL实现安全上传。特别要注意的是地理位置查询接口的实现GetMapping(/nearby) public ResultListShop findNearbyShops( RequestParam Double lat, RequestParam Double lng, RequestParam Double radius) { String sql SELECT *, ST_Distance_Sphere(point(?, ?), point(longitude, latitude)) as distance FROM shops WHERE ST_Distance_Sphere(point(?, ?), point(longitude, latitude)) ? ORDER BY distance; return Result.success(shopMapper.selectByDistance(lat, lng, radius)); }2.3 实时交互功能收藏与点赞系统采用Redis缓存热门店铺的收藏数ZSET结构实现排行榜// 添加收藏 redisTemplate.opsForZSet().incrementScore(shop:popular, shopId, 1); // 获取Top10 SetZSetOperations.TypedTupleString topShops redisTemplate.opsForZSet().reverseRangeWithScores(shop:popular, 0, 9);即时消息通知通过WebSocket实现新评论提醒前端使用SockJS客户端const socket new SockJS(/ws-notification); stompClient Stomp.over(socket); stompClient.connect({}, () { stompClient.subscribe(/user/queue/notice, (message) { showNotification(JSON.parse(message.body)); }); });3. 前后端协同开发要点3.1 接口规范设计采用RESTful风格响应体统一包装interface ApiResultT { code: number; message: string; data: T; timestamp: number; }Axios拦截器配置示例service.interceptors.response.use( response { if (response.data.code ! 200) { Message.error(response.data.message); return Promise.reject(new Error(response.data.message)); } return response.data.data; }, error { if (error.response.status 401) { router.push(/login); } return Promise.reject(error); } );3.2 跨域解决方案SpringBoot后端配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .maxAge(3600); } }Vue开发环境代理配置vue.config.jsdevServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } }4. 部署与性能优化4.1 数据库优化策略索引优化为高频查询字段添加适当索引如ALTER TABLE reviews ADD INDEX idx_shop_rating (shop_id, rating);查询优化使用EXPLAIN分析慢查询避免全表扫描。对于复杂统计使用物化视图CREATE MATERIALIZED VIEW shop_stats AS SELECT shop_id, COUNT(*) as review_count, AVG(rating) as avg_rating FROM reviews GROUP BY shop_id;4.2 缓存层设计采用多级缓存策略本地Caffeine缓存高频访问的店铺基础信息Redis缓存热门排行榜和临时会话数据MySQL持久化存储Spring Cache配置示例Configuration EnableCaching public class CacheConfig { Bean public CacheManager cacheManager() { CaffeineCacheManager manager new CaffeineCacheManager(); manager.setCaffeine(Caffeine.newBuilder() .expireAfterWrite(10, TimeUnit.MINUTES) .maximumSize(1000)); return manager; } }4.3 前端性能调优路由懒加载const ShopDetail () import(./views/ShopDetail.vue);图片懒加载使用Intersection Observer APIimg v-lazyimageUrl alt菜品图片组件按需引入如Element Plus的自动导入配置Components: { resolvers: [ElementPlusResolver()] }5. 典型问题排查实录5.1 跨域Cookie失效问题现象前端无法携带认证Cookie 解决方案后端设置Credentialsregistry.addMapping(/**) .allowCredentials(true) .allowedOriginPatterns(*);前端axios配置axios.defaults.withCredentials true;5.2 Vue路由刷新404问题Nginx配置需添加location / { try_files $uri $uri/ /index.html; }5.3 MySQL时区异常在JDBC连接字符串添加参数jdbc:mysql://localhost:3306/food_db?useSSLfalseserverTimezoneAsia/Shanghai6. 扩展功能建议智能推荐系统基于用户历史行为实现协同过滤# 伪代码示例 from surprise import KNNBasic algo KNNBasic() algo.fit(trainset) predictions algo.test(testset)扫码点餐集成接入微信/支付宝小程序API配送跟踪功能集成高德地图Web服务API数据可视化大屏使用ECharts展示消费趋势这套系统我在实际部署时发现当并发用户超过500时需要特别注意Redis连接池配置。建议将lettuce连接池最大活跃连接数设置为CPU核心数的2倍spring: redis: lettuce: pool: max-active: 16 max-wait: 1000ms