姬轩亦1. 苍穹外卖项目概述与环境搭建实战指南
作为一款面向餐饮行业的SaaS系统，"苍穹外卖"项目涵盖了从用户下单到商家接单、骑手配送的全流程管理。这个系列教程将从零开始带大家完成整个项目的开发，今天我们先搞定最基础也最重要的环境搭建环节。
我去年参与过一个类似的外卖平台重构项目，深刻体会到环境配置不当会给后续开发埋下多少坑。比如MySQL字符集设置错误导致订单备注乱码、Redis连接池配置不合理引发高峰期系统崩溃等等。这些问题的根源往往就在于初始环境搭建时没做好规范。
1.1 项目技术栈解析
苍穹外卖采用主流的前后端分离架构：
- 前端：Vue3 + Element Plus + WebSocket实时通信
- 后端：Spring Boot 2.7 + MyBatis-Plus + Redis + RabbitMQ
- 数据库：MySQL 8.0 + MongoDB（用于日志存储）
- 中间件：Nginx + Elasticsearch（商品搜索）
特别说明WebSocket的应用场景：当骑手接单后，系统需要实时推送订单状态给商家和用户。传统轮询方式会造成服务器压力过大，而WebSocket建立长连接后可以实现真正的双向实时通信。
1.2 开发环境准备清单
在开始安装前，建议准备：
- 硬件配置：至少8GB内存（Redis和MySQL比较吃内存）
- 操作系统：Windows 10/11或macOS（Linux环境配置会略有不同）
- 必要软件：
- JDK 17（注意Spring Boot 2.7对Java版本的要求）
- Node.js 16.x（前端依赖）
- Docker Desktop（用于快速部署中间件）
重要提示：所有软件的安装路径不要包含中文和空格！这是很多初学者容易忽略的点，会导致后续配置出现各种诡异问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 后端开发环境搭建
2.1 Java环境配置
bash复制# 验证Java安装（应显示17.x版本）
java -version
javac -version
如果版本不对，需要到Oracle官网下载JDK 17。安装完成后配置环境变量：
- 新建JAVA_HOME：指向JDK安装目录（例如C:\Java\jdk-17）
- Path中添加：%JAVA_HOME%\bin
常见问题排查：
- 如果java命令可用但javac不可用，说明只装了JRE没装JDK
- 版本显示1.8.x：检查是否之前装过Java8，需要卸载旧版本
2.2 IDE的选择与配置
推荐使用IntelliJ IDEA Ultimate版（社区版缺少Spring Boot支持）：
- 安装时勾选"Add launchers dir to the PATH"
- 首次启动后安装插件：
- Lombok（必装）
- MyBatisX（SQL映射辅助）
- GitToolBox（版本控制增强）
项目导入后需要配置：
- File -> Project Structure -> Project SDK 选择Java 17
- 设置Maven的settings.xml（配置阿里云镜像加速依赖下载）
2.3 数据库环境搭建
使用Docker快速部署MySQL 8.0：
bash复制docker run -d \
--name mysql8 \
-p 3306:3306 \
-e MYSQL_ROOT_PASSWORD=yourpassword \
-e MYSQL_DATABASE=sky_takeout \
-v /path/to/data:/var/lib/mysql \
mysql:8.0 \
--character-set-server=utf8mb4 \
--collation-server=utf8mb4_unicode_ci
关键参数说明：
- utf8mb4字符集：支持存储emoji等特殊字符（外卖场景常见）
- 数据卷挂载：保证数据持久化
- 初始数据库：创建名为sky_takeout的空数据库
3. 前端开发环境配置
3.1 Node.js与包管理
建议通过nvm管理Node版本：
bash复制nvm install 16.14.0
nvm use 16.14.0
配置npm淘宝镜像：
bash复制npm config set registry https://registry.npmmirror.com
3.2 Vue脚手架安装
bash复制npm install -g @vue/cli
vue create sky-takeout-web
选择配置时注意：
- 手动选择特性：Babel, Router, Vuex, CSS Pre-processors
- Vue版本：3.x
- 路由模式：History（需要后端配合）
- CSS预处理器：Sass/SCSS
3.3 WebSocket连接测试
在src/utils目录下创建websocket.js：
javascript复制export function initWebSocket(url) {
const socket = new WebSocket(url)
socket.onopen = () => {
console.log('WebSocket连接建立')
}
socket.onmessage = (event) => {
const data = JSON.parse(event.data)
// 处理订单状态更新等消息
}
return socket
}
在main.js中全局引入：
javascript复制import { initWebSocket } from './utils/websocket'
// 开发环境使用ws://localhost:8080/ws
Vue.prototype.$ws = initWebSocket(process.env.VUE_APP_WS_URL)
4. 中间件环境部署
4.1 Redis缓存服务
Docker部署命令：
bash复制docker run -d \
--name redis \
-p 6379:6379 \
-v /path/to/redis/data:/data \
redis:6 \
--requirepass "yourpassword" \
--appendonly yes
Spring Boot配置示例：
yaml复制spring:
redis:
host: localhost
port: 6379
password: yourpassword
lettuce:
pool:
max-active: 20 # 根据并发量调整
max-wait: 1000
4.2 RabbitMQ消息队列
带管理界面的部署方式：
bash复制docker run -d \
--name rabbitmq \
-p 5672:5672 \
-p 15672:15672 \
-e RABBITMQ_DEFAULT_USER=admin \
-e RABBITMQ_DEFAULT_PASS=secret \
rabbitmq:3-management
订单超时取消的典型应用场景：
- 用户下单后发送延迟消息（30分钟）
- 消费者收到消息时检查订单状态
- 若未支付则自动取消订单
5. 常见问题解决方案
5.1 端口冲突处理
常见端口及冲突解决方案：
- 8080被占用：修改server.port=8081
- 3306被占用：停止本地MySQL或改用其他端口
- 6379被占用：临时用redis-cli shutdown
快速查找占用端口的进程（Windows）：
bash复制netstat -ano | findstr "8080"
taskkill /PID 1234 /F # 替换为实际PID
5.2 依赖下载失败
Maven加速方案：
- 修改settings.xml中的mirror配置：
xml复制<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
- 清理本地仓库后重新下载：
bash复制mvn clean install -U
5.3 前端跨域问题
开发环境解决方案（vue.config.js）：
javascript复制devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
生产环境需要通过Nginx配置：
nginx复制location /api {
proxy_pass http://backend;
proxy_set_header Host $host;
}
6. 项目结构规范建议
6.1 后端分层架构
推荐的项目结构：
code复制src/main/java
├── config # 配置类
├── constant # 常量定义
├── controller # 控制器层
├── dto # 数据传输对象
├── entity # 数据库实体
├── enums # 枚举类
├── exception # 异常处理
├── mapper # MyBatis接口
├── service # 业务逻辑层
└── utils # 工具类
6.2 前端目录结构
Vue项目优化结构：
code复制src/
├── api # 接口定义
├── assets # 静态资源
├── components # 公共组件
├── router # 路由配置
├── store # Vuex状态管理
├── styles # 全局样式
├── utils # 工具函数
└── views # 页面组件
6.3 代码提交规范
推荐的Git提交消息格式：
code复制feat: 新增用户登录功能
fix: 修复订单金额计算错误
docs: 更新API接口文档
style: 调整代码格式不影响逻辑
refactor: 重构优惠券发放逻辑
可以使用husky配合commitlint实现提交校验：
json复制// package.json
{
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
经过这样的环境搭建和基础配置，苍穹外卖项目已经具备了完整的开发基础。在实际操作中我发现，初期花时间做好环境标准化配置，能为后续团队协作节省大量沟通成本。特别是在多人协作时，建议将Docker配置、IDE设置等纳入版本控制，保持团队环境一致。