实战项目|苍穹外卖|SpringBoot+Vue全栈开发入门

1. 苍穹外卖项目概述第一次接触苍穹外卖这个项目时我和很多初学者一样感到既兴奋又迷茫。这是一个典型的SpringBootVue全栈项目包含了PC端后台管理系统和微信小程序用户端非常适合想要入门全栈开发的同学。不同于美团、饿了么这样的多商家平台苍穹外卖模拟的是单一餐厅自营的外卖系统技术复杂度适中但又涵盖了企业级应用的核心功能模块。这个项目最吸引我的地方在于它的完整性 - 从前端页面到后端接口从数据库设计到API文档甚至包括Nginx部署配置完整走完整个开发流程后你能真正理解一个线上系统是如何运作的。记得我第一次成功让前端页面调通后端接口时那种成就感至今难忘。下面我就把自己在开发过程中积累的经验特别是那些容易踩坑的环节用最直白的方式分享给大家。2. 开发环境搭建2.1 前端环境配置前端部分我们使用Vue3Element Plus组合。安装Node.js时有个小技巧不要安装最新版建议选择LTS版本目前是18.x这样可以避免一些兼容性问题。安装完成后在命令行执行npm install -g vue/cli vue create sky-takeout-frontend选择Manually select features时记得勾选Router和Vuex这两个是构建管理系统的核心组件。项目创建完成后进入目录安装Element Pluscd sky-takeout-frontend npm install element-plus --save我遇到过最头疼的问题是代理配置。在vue.config.js中需要这样设置module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }2.2 后端环境准备后端使用SpringBoot 2.7.x版本JDK建议用11。创建项目时除了常规的Web依赖还需要特别添加Lombok简化实体类编写MyBatis-Plus数据库操作Knife4jAPI文档生成数据库我推荐使用MySQL 8.0创建数据库时要注意字符集设置CREATE DATABASE sky_takeout CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行SQL脚本时如果报错很可能是MySQL模式问题可以在连接字符串后加上?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue3. Nginx配置实战3.1 基础部署配置Nginx在这个项目中承担两个重要角色前端资源服务器和API反向代理。安装Nginx后关键配置在nginx.conf的http块内server { listen 80; server_name localhost; location / { root html/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; } }这里有个大坑Windows下路径要使用正斜杠且不能有中文。我曾在路径问题上折腾了半天最后发现是目录名包含空格导致的。3.2 跨域问题解决虽然我们在Vue和SpringBoot中都配置了跨域但生产环境最好在Nginx层统一处理location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; }遇到502 Bad Gateway错误时先检查后端服务是否启动再查看Nginx错误日志tail -f /var/log/nginx/error.log4. 核心功能实现4.1 登录与权限控制密码加密采用Spring Security的BCryptPasswordEncoder比MD5更安全Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }前端存储token时要注意Vuex在页面刷新后会丢失状态建议配合sessionStorage使用// 登录成功后 context.commit(SET_TOKEN, res.data.token) sessionStorage.setItem(token, res.data.token)4.2 菜品管理模块使用MyBatis-Plus实现CRUD时特别注意分页查询的配置Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }上传图片时建议使用七牛云等第三方存储本地存储配置示例sky: path: D:/upload/4.3 订单流程设计订单状态机是个重点我们采用枚举定义状态public enum OrderStatus { PENDING(1, 待付款), PAID(2, 已付款), COMPLETED(3, 已完成), CANCELLED(4, 已取消); // 构造方法和getter }微信支付对接时建议使用官方SDK注意证书路径要使用绝对路径。5. 接口文档与联调5.1 Knife4j集成比原生Swagger更好用的Knife4j配置时容易漏掉静态资源映射Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(doc.html) .addResourceLocations(classpath:/META-INF/resources/); registry.addResourceHandler(/webjars/**) .addResourceLocations(classpath:/META-INF/resources/webjars/); }接口注释示例Api(tags 员工管理模块) RestController RequestMapping(/admin/employee) public class EmployeeController { ApiOperation(员工登录) PostMapping(/login) public ResultEmployeeLoginVO login(RequestBody EmployeeLoginDTO employeeLoginDTO) { // 方法实现 } }5.2 前后端联调技巧推荐使用Postman先测试接口再对接前端。常见问题排查顺序检查控制台Network标签看请求是否发出确认请求地址和参数是否正确查看后端日志是否收到请求检查数据库操作是否成功对于复杂的数据结构建议前后端先约定好DTO格式interface MenuItem { id: number name: string price: number description?: string image: string category: string }6. 微信小程序对接小程序端使用uni-app框架可以节省开发成本。需要注意域名必须备案且支持HTTPS请求接口要配置合法域名用户登录流程走微信官方API获取openid的示例代码uni.login({ provider: weixin, success: function (res) { uni.request({ url: https://yourdomain.com/api/wx/login, method: POST, data: { code: res.code } }) } })7. 项目优化与部署7.1 性能优化建议数据库层面可以添加索引ALTER TABLE order_detail ADD INDEX idx_order_id (order_id);缓存高频访问的数据Cacheable(value dishCache, key #categoryId) public ListDish list(Long categoryId) { // 查询逻辑 }7.2 生产环境部署推荐使用Docker compose编排服务version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root volumes: - ./mysql/data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql nginx: image: nginx:alpine ports: - 80:80 volumes: - ./nginx.conf:/etc/nginx/nginx.conf - ./frontend/dist:/usr/share/nginx/html在开发过程中我最大的体会是不要怕遇到问题每个错误都是学习的机会。记得有一次为了解决Nginx的413请求实体过大错误我花了三小时才发现是漏配了client_max_body_size参数。这些经验现在回想起来都是成长路上最宝贵的财富。