苍穹外卖-2025 完成基础配置环节(详细图解)

目录

一、前言

二、基础配置环节

1.前端部分

2.后端部分

3.使用Git进行版本控制

4.数据库环境搭建

5.前后端联调

6.导入接口文档

7.Swagger

---

一、前言

本文主要记录苍穹外卖的基础配置环节，属于本人的学习记录，本人在之前已经看完了黑马阿玮上下部的javase以及24年10月的AI+JavaWeb大部分的内容(学完后端进阶，后面前端进阶和linux暂时没看)。本人使用的是25版的IDEA以及JDK21(苍穹外卖项目换成了JDK17)，本文的配置适用于2025年学习苍穹外卖的小伙伴

二、基础配置环节

1.前端部分

苍穹外卖是一个前后端分离的新手项目，前端部分的配置和javaweb部分一致，都是将资料中的nginx文件夹直接导入(注意nginx文件夹不要放到带中文的路径下，路径必须都是英文)，这里的话我本人就是直接放到D:\Software下了(看着视频里老师也是这么放的，其实也没必要太过纠结)

我实际放的位置如图所示，大家自己按照自己的方式放就行，上面的是苍穹外卖的前端部分，下面的是javaweb的前端部分，注意区分即可

然后点开nginx-1.20.2文件夹，可以发现里面有个nginx.exe可运行程序，双击nginx.exe此时屏幕会快速的闪一下，没看到也没关系。为了确定nginx在运行，我们可以点开任务管理器来查询

这里我是从javaweb无缝衔接过来的，所以当时我在javaweb阶段的nginx.exe在运行，我当时搜了下deepseek，反正还是不建议两个nginx同时运行吧(我自己也没试过)，反正我是在任务管理把之前web阶段的nginx点击结束任务再打开苍穹外卖的nginx

打开任务管理器后，在搜索框内搜索nginx如果下方存在nginx即可

打开chrome输入http://localhost/#/login，能看到前端页面展示就表示前端部分配置成功

2.后端部分

这里当时老师直接一句把后端部分直接导入idea，并没有手把手教，我看老师好像是把资料下载到电脑上然后就直接从idea打开sky-take-out文件夹，我看见老师的文件路径有几级都是含中文的，所以我就自己重新创了一个文件夹(一般开发项目啥的保持项目路径不要包含中文，这是一个很有效避免后续出现问题的好习惯)

这里的话我是先在d盘创建了一个skytakeout-code，路径是D:\skytakeout-code，然后我把资料里的sky-take-out文件夹放到了这个路径里面，即D:\skytakeout-code\sky-take-out，然后再用idea打开sky-take-out

后端部分导入idea如下图所示(刚导入下面文件字体都是白色的，黄色和蓝色都是配置git之后的效果)

这里我一开始也没有老师界面里的sky-take-out.iml文件，这里我按照弹幕指示：Alt + F12 进入终端命令行，在改目录结构下输入命令mvn idea:module之后就有iml文件了

3.使用Git进行版本控制

到这里如果对Git一无所知的话，建议直接跑去瑞吉外卖那里，直接看瑞吉外卖中关于Git这部分的视频再回来(大概两个小时左右吧)，看一遍知道Git是啥东西，创建个gitee啥的，gitee远程仓库怎么用，Git在idea中大概怎么操作再回过头来就很清晰了

瑞吉外卖中Git讲解的IDEA界面和苍穹外卖里面是一样的，但是目前2025版的IDEA关于Git这一部分是变化了的，但是找一下其实也挺好找的，点击左上角的菜单栏

没关联Git之前这里红圈的位置是VSC，剩下部分按照视频正常操作即可

关联Git完毕之后，提交、推送等按键的界面变成下图所示

4.数据库环境搭建

这里我是从AI+Javaweb过来的，所以我这里就展示在datagrip中进行数据库环境搭建(老师用的是MySQL Workbench)

点击左上角的加号，再新建一个console

然后把资料里的sky.sql文件复制到console中，然后全选sql语句搭建数据库

在datagrip中出现sky-take-out数据库就表示数据库环境搭建完成

数据库创建完之后就可以回到IDEA中然后连接上数据库，点击左上角的加号然后选择数据源再选择MySQL

然后用户输入root，密码输入自己设置的密码，输入完后测试连接，如果成功就点击应用再点击确定(实在忘记了就回javaweb那里复习以下)

5.前后端联调

这里按照视频点击compile进行编译，此时大部分人编译都会出错(也可能是在后续运行启动类时出错，我也忘记了，反正大家按照我的方式进行配置吧)

这里的话就以我本人为例，我用的是2025版IDEA，此前用的是JDK21。再编译出错之后，我按照弹幕把sky-take-out的pom.xml文件中lombok的版本改到了1.18.30(也可以改到30以上，大家修改完可以试试再编译行不行)，反正我改完还是不行

 

然后我就直接把SDK改为JDK17再编译发现就可以了，先点击左上角菜单栏，选择项目结构

看到SDK那一栏，我之前的是JDK21，换成JDK17的再点击应用再点击确定即可(没有的就下载JDK，选择版本17，下载路径默认是c盘，建议大家改成d盘下自己设置的路径，下图有下载的界面，供应商按照默认的即可)

上述配置完成之后，如果运行启动类可以正常运行就可以了(下一步就是在前端页面进行登录)，此时我们要修改application-dev.yml文件中数据库的密码为自己的，否则肯定登录不上去

原本的密码好像还是root，反正大家改成自己数据库的密码(注意纯数字密码要加双引号)

出现登录成功的界面就显示前后端联调成功了，有部分报错只要和老师的一样就没有关系(因为后端代码还没完善)

6.导入接口文档

老师演示的时YApi，看着好像就很卡(弹幕也这么说)，我是从AI+Javaweb过来的，所以我就按照弹幕指引在Apifox上导入接口文档，确实也感觉Apifox挺好用的

在Apifox中左上角点击主窗口，然后看到截图部分右上角的新建项目并点击

然后按照和老师一样的命名，分别创建苍穹外卖-管理端接口和苍穹外卖-用户端接口(就是输入项目名称然后新建，其他的都不用动，创建完的效果如上图所示)

第一种方式：在接口管理界面，点击紫色加号再点击导入

第二种方式：在左边可以选择点击到项目设置界面，再点击导入数据

确认是下图的页面，选择YApi然后把资料中的json数据按照项目名称对应拖进来导入即可(后续会显示json文件有多少个接口的界面，直接点击确定导入即可，两个项目分别导入即可)

7.Swagger

看到老师在演示Swagger的时候看到弹幕一直在说Apifox都能做到而且做的更好，还有弹幕一直在提在Apifox中设置前置URL，我爱折腾就搞了一下

在Apifox右上角选择开发环境(原本是空的，javaweb那里选的就是开发环境我照着选的)，然后点击下面的管理环境

在环境管理界面，把前置URL改为http://localhost:8080(原来是一串带dev的默认URL)再点击保存

选择员工登录(成功)，在下面的Body的json中先点击自动生成(原本是完全空白)，然后把自动生成的password改为123456，把自动生成的username改为admin再点击发送

状态码显示200并且下面显示正常的token就可以了

这是我自己摸索的，感觉和老师演示的Swagger看着好像一样(也不知道是不是这个意思，反正感觉就是这样)