1. 项目简介
项目名称:校园周边美食探索及分享平台
项目背景:针对校园师生对周边美食信息的需求,构建一个集美食推荐、鉴赏、评论互动及社交功能于一体的平台,帮助用户发现优质美食资源并进行分享交流。
主要目标:
- 提供校园周边美食的详细信息展示与搜索功能
- 支持用户对美食进行评价、收藏及分享
- 实现用户间的社交互动(好友添加、评论交流)
- 构建管理员后台,实现内容与用户的高效管理
核心功能:
- 美食鉴赏模块:展示美食名称、类别、介绍、价格、推荐指数等信息
- 用户管理模块:支持用户注册、登录、个人信息管理
- 社交互动模块:评论、收藏、好友管理功能
- 后台管理模块:内容审核、用户权限控制、系统配置
2. 技术栈
2.1 后端技术
- 核心框架:Spring Boot 2.2.2.RELEASE
- ORM 框架:MyBatis + MyBatis-Plus 2.1.1
- 数据库:MySQL 5.7.32
- 安全框架:Apache Shiro 1.3.2
- 数据校验:javax.validation 2.0.1
- JSON 处理:FastJSON 1.2.8
- 工具类库:Hutool 4.0.12、Apache Commons Lang3 3.0
2.2 前端技术
- 核心框架:Vue.js
- UI 组件库:Element UI
- 路由管理:Vue Router
- 状态管理:未明确提及(基础 Vuex 配置)
- HTTP 客户端:Axios
- 图表可视化:ECharts(Macarons 主题)
- 富文本编辑:自定义 Editor 组件
- 地图服务:高德地图 API(Vue-AMap)
2.3 开发与构建工具
- 构建工具:Maven
- 开发工具:SQLyog(数据库管理)
- 打包工具:Maven Jar Plugin 3.1.1
3. 详细介绍
3.1 系统架构
采用前后端分离架构:
- 前端:单页应用(SPA),基于 Vue 组件化开发
- 后端:Spring Boot RESTful API 服务
- 数据库:关系型数据库 MySQL,采用 InnoDB 引擎
- 部署方式:Jar 包独立部署(内置 Tomcat)
3.2 数据库设计
核心数据表结构:
表名 | 主要字段 | 功能描述 |
---|---|---|
meishijianshang | id, meishimingcheng, meishileibie, meishijieshao, shangpinjiage | 存储美食信息,包括名称、类别、介绍、价格等 |
yonghu | id, yonghuming, mima, xingming, shouji, youxiang | 用户信息表,存储登录凭证及个人资料 |
discussmeishijianshang | id, refid, userid, content, reply | 美食评论表,关联美食 ID 和用户 ID |
storeup | id, userid, refid, tablename, name | 用户收藏表,支持收藏不同类型内容 |
wodehaoyou | id, yonghuming, xingming, userid | 好友关系表,存储用户间社交关系 |
config | id, name, value | 系统配置表,存储轮播图等全局配置 |
表关系:
- 美食表(meishijianshang)与评论表(discussmeishijianshang)通过 refid 关联
- 用户表(yonghu)与收藏表(storeup)通过 userid 关联
- 用户表(yonghu)与好友表(wodehaoyou)通过 userid 关联
3.3 核心功能模块
3.3.1 美食鉴赏模块
-
功能描述:展示校园周边美食信息,支持按类别、推荐指数筛选
-
数据流程:
- 用户访问美食列表页,前端发送请求至后端
- 后端通过 MyBatis 查询 meishijianshang 表数据
- 返回结果经 FastJSON 序列化后传递至前端
- 前端使用 Vue 组件渲染美食卡片及详情
3.3.2 用户管理模块
-
功能描述:实现用户注册、登录、信息修改功能
-
安全控制:
- 基于 Shiro 框架实现身份认证
- 密码存储采用 MD5 加密(前端 js-md5)
- Token 机制维持登录状态(token 表存储)
3.3.3 社交互动模块
- 评论功能:用户可对美食进行评论,支持回复互动
- 收藏功能:用户可收藏感兴趣的美食内容
- 好友管理:添加好友、查看好友列表
3.3.4 后台管理模块
- 管理员权限:用户管理、内容审核、系统配置
- 数据统计:基于 ECharts 实现简单数据可视化
- 文件上传:支持美食图片等资源上传
3.4 前端页面结构
主要页面:
- 首页:轮播图展示推荐美食
- 美食列表页:分页展示美食信息,支持筛选
- 美食详情页:展示美食完整信息及评论
- 用户中心:个人信息、收藏列表、好友管理
- 后台管理:基于 Element UI 的管理界面
4. 部分代码
4.1 数据库表设计(MySQL)
sql
-- 美食鉴赏表结构
CREATE TABLE `meishijianshang` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',`addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`fabushijian` date DEFAULT NULL COMMENT '发布时间',`meishimingcheng` varchar(200) DEFAULT NULL COMMENT '美食名称',`meishileibie` varchar(200) DEFAULT NULL COMMENT '美食类别',`meishijieshao` longtext COMMENT '美食介绍',`shangpusuozaidi` varchar(200) DEFAULT NULL COMMENT '商铺所在地',`tuijianzhishu` varchar(200) DEFAULT NULL COMMENT '推荐指数',`meishizhaopian` varchar(200) DEFAULT NULL COMMENT '美食照片',`shangpinjiage` varchar(200) DEFAULT NULL COMMENT '商品价格',`yonghuming` varchar(200) DEFAULT NULL COMMENT '用户名',`xingming` varchar(200) DEFAULT NULL COMMENT '姓名',`thumbsupnum` int(11) DEFAULT '0' COMMENT '赞',`crazilynum` int(11) DEFAULT '0' COMMENT '踩',`clicktime` datetime DEFAULT NULL COMMENT '最近点击时间',`clicknum` int(11) DEFAULT '0' COMMENT '点击次数',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1615554447073 DEFAULT CHARSET=utf8 COMMENT='美食鉴赏';
4.2 Spring Boot 配置(pom.xml 片段)
xml
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.2.RELEASE</version><relativePath/> <!-- lookup parent from repository -->
</parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.1</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>1.3.2</version></dependency><!-- 百度AI SDK --><dependency><groupId>com.baidu.aip</groupId><artifactId>java-sdk</artifactId><version>4.4.1</version></dependency>
</dependencies>
4.3 Vue 路由配置(router-static.js 片段)
javascript
const routes = [{path: '/index',name: '首页',component: Index,children: [{path: '/',name: '首页',component: Home,meta: {icon:'', title:'center'}},{path: '/meishijianshang',name: '美食鉴赏',component: meishijianshang},{path: '/yonghu',name: '用户',component: yonghu},{path: '/discussmeishijianshang',name: '美食鉴赏评论',component: discussmeishijianshang}]},{ path: '/login', name: 'login', component: Login },{ path: '/', redirect: '/index' }
]
4.4 前端 API 调用(http.js)
javascript
import axios from 'axios'
import router from '@/router/router-static'
import storage from '@/utils/storage'const http = axios.create({timeout: 1000 * 86400,withCredentials: true,baseURL: '/springboot35l3z',headers: {'Content-Type': 'application/json; charset=utf-8'}
})// 请求拦截器添加Token
http.interceptors.request.use(config => {config.headers['Token'] = storage.get('Token')return config
}, error => {return Promise.reject(error)
})// 响应拦截器处理401
http.interceptors.response.use(response => {if (response.data && response.data.code === 401) { router.push({ name: 'login' })}return response
}, error => {return Promise.reject(error)
})export default http
5. 部分截图
6. 项目总结
6.1 项目亮点
- 完整的功能体系:涵盖美食展示、用户互动、社交管理等核心功能
- 成熟的技术选型:基于 Spring Boot+Vue 的主流前后端分离架构,稳定性高
- 良好的用户体验:响应式设计,适配不同设备,交互流程清晰
- 可扩展架构:模块化设计,便于功能扩展和维护
6.2 实现难点与解决方案
- 难点 1:用户认证与权限控制
解决方案:集成 Shiro 框架,实现基于角色的访问控制(RBAC) - 难点 2:图片资源管理
解决方案:统一文件上传路径,数据库存储图片 URL,前端懒加载优化 - 难点 3:数据交互效率
解决方案:使用 MyBatis-Plus 简化 CRUD 操作,添加适当索引优化查询
6.3 总结
本项目成功构建了一个功能完整的校园美食分享平台,基于 Spring Boot 和 Vue 技术栈实现了前后端分离架构。通过合理的数据库设计和模块划分,保证了系统的可扩展性和可维护性。项目不仅满足了基本的美食信息展示需求,还通过社交功能增强了用户粘性,为校园师生提供了便捷的美食探索工具。
在线演示:
后台:http://springboot35l3z.xiaobias.com/springboot35l3z/admin/dist/index.html
前台:http://springboot35l3z.xiaobias.com/springboot35l3z/front/index.html
管理员:abo/12356
用户:用户1/123456,用户2/123456
资源:https://fifteen.xiaobias.com/source/35