企业官网建设流程全解析

简介：这份资料面向正在学习 Java Web 开发、准备动手实践外卖系统项目的开发者，围绕「苍穹外卖」环境搭建环节提供可直接参考的工程文件与配置素材。内容覆盖 Spring Boot 后端、MySQL 数据库设计、实体类与 ORM 映射、HTML/CSS/JavaScript 前端页面、RESTful 接口、Maven 构建以及 Nginx 部署配置等完整链路，适合作为课程设计、毕业设计或自学练手的实战起点。压缩包共 181 个文件，约 5.96MB，其中 86 个 java 源文件构成后端主体，另有 21 个 png 图片、8 个 js、6 个 css、5 个 xml、3 个 sql 脚本及 nginx 相关 conf 配置，基本覆盖编码、样式、数据与部署所需。目前已有 4182 人学习下载，说明该环境搭建方案在同类项目中认可度较高。借助这套资料，读者可快速对齐项目目录结构、理解前后端交互与数据库初始化流程，减少环境配置阶段的试错成本，把精力集中到业务逻辑与接口实现上。

1. 苍穹外卖环境搭建：从零把项目跑起来的第一道坎

很多人拿到苍穹外卖的源码包，第一反应是双击打开 IDEA 然后点运行，结果控制台一片红，不是数据库连不上就是 Redis 拒绝连接，折腾一下午连登录页都刷不出来。这个项目本质是一个前后端分离的外卖系统，后端 Spring Boot 提供接口，前端分管理端和用户端两套，中间还夹着 MySQL、Redis、Nginx 这几个中间件。环境搭建之所以成为新手第一道坎，不是代码有多难，而是依赖的服务太多，任何一个环节版本对不上都会连锁翻车。这篇内容面向的是刚学完 Java 基础、想拿一个完整项目练手的同学，也适合工作一两年但没独立搭过分布式环境的开发者。我会把每个中间件的安装、配置、验证拆开讲，参数怎么设、报错怎么看、哪些坑我踩过，都写清楚，让你照着能复现出一个能登录、能下单的完整环境。

2. 先把依赖清单理清楚：苍穹外卖到底需要哪些服务

2.1 后端、前端、中间件的三层依赖关系

苍穹外卖的运行链路可以拆成三层。最底层是数据存储层，MySQL 存业务数据，Redis 存缓存和登录令牌。中间层是后端服务，Spring Boot 应用通过 JDBC 连 MySQL、通过 Lettuce 连 Redis，对外暴露 HTTP 接口。最上层是前端，管理端用 Vue 打包后由 Nginx 托管，用户端可能是小程序或 H5，开发阶段直接用 Nginx 做静态资源服务加反向代理。

理解这个链路很重要，因为排错时你要知道请求卡在哪一层。比如登录页能打开但点登录没反应，问题多半在后端接口或 Nginx 代理；如果后端启动就报错，那基本是 MySQL 或 Redis 没连上。我一般建议按「MySQL → Redis → 后端 → Nginx → 前端」的顺序逐个验证，每步确认通了再往下走，不要五个服务一起启动然后对着满屏报错发呆。

版本选择上有个血泪经验：MySQL 用 8.0 系列，Redis 用 5.0 以上，JDK 用 1.8 或 11 都行，但 Spring Boot 版本要和 JDK 匹配。如果你拿到的源码里 pom.xml 写的是 Spring Boot 2.7.x，那就别用 JDK 17，否则启动时会有模块访问相关的报错。Nginx 用 1.20 以上的稳定版即可，不需要追新。

2.2 用一张表锁定每个服务的版本和端口

环境搭建翻车最多的原因就是端口冲突和版本不匹配。下面这张表是我整理的最小依赖清单，建议你先对照自己的机器检查一遍，把占用的端口腾出来。

端口这块要注意，3306 和 6379 经常被本机已安装的 MySQL、Redis 占用。如果你之前装过又忘了，启动新服务时会报「Address already in use」。Windows 下用netstat -ano | findstr 3306查占用进程，Linux 下用lsof -i:3306，找到后要么停掉旧服务，要么改新服务的端口并同步修改后端配置文件。

提示：改端口不是只改中间件本身，后端 application.yml 里的连接地址也要跟着改，两边不一致照样连不上。

3. MySQL 与 Redis 的安装配置：两个最容易卡住的服务

3.1 MySQL 8.0 安装与苍穹外卖数据库初始化

MySQL 安装本身不难，难的是初始化脚本执行和字符集配置。苍穹外卖的建表语句里包含中文注释和大量 varchar 字段，如果数据库字符集不是 utf8mb4，插入中文会乱码甚至报错。安装完成后先确认字符集：

-- 查看当前字符集配置 SHOW VARIABLES LIKE 'character_set%'; SHOW VARIABLES LIKE 'collation%';

如果 character_set_server 不是 utf8mb4，需要修改 MySQL 配置文件。Windows 下是 my.ini，Linux 下是 /etc/mysql/my.cnf，在 [mysqld] 段落下加两行：

[mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_general_ci

改完重启 MySQL 服务。然后创建数据库并导入初始化脚本：

-- 创建苍穹外卖数据库 CREATE DATABASE sky_take_out DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE sky_take_out; -- 然后执行项目提供的 sky_take_out.sql 脚本 SOURCE /path/to/sky_take_out.sql;

这里有个细节：SOURCE 命令的路径要用正斜杠或双反斜杠，Windows 下直接写C:\Users\...会因为反斜杠转义报错。导入完成后用SHOW TABLES;确认表都建出来了，重点看 employee、category、dish、orders 这几张核心表是否存在。

参数说明：utf8mb4 相比 utf8 能存 emoji 和更多字符，苍穹外卖的用户端可能涉及昵称等字段，用 utf8mb4 更稳妥。collation 选 general_ci 还是 unicode_ci 影响不大，但整个库要统一，不要一部分表用这个一部分用那个。

3.2 Redis 安装、密码设置与后端连接验证

Redis 在苍穹外卖里主要干两件事：缓存菜品和套餐数据、存储管理端登录的 JWT 令牌。安装后默认没有密码，本地开发可以不改，但如果你的后端配置文件里写了 password，就必须给 Redis 也设上，否则连接时会报 NOAUTH 错误。

设置密码的方式是修改 redis.conf：

# 在 redis.conf 中找到 requirepass 这一行 requirepass your_password # 保存后重启 Redis redis-server /path/to/redis.conf

重启后用 redis-cli 验证：

redis-cli -h 127.0.0.1 -p 6379 127.0.0.1:6379> AUTH your_password OK 127.0.0.1:6379> PING PONG

返回 PONG 说明 Redis 正常。接下来检查后端 application.yml 里的 Redis 配置，常见写法是：

spring: redis: host: 127.0.0.1 port: 6379 password: your_password database: 0

database 这个参数容易被忽略。Redis 默认有 16 个库（0 到 15），如果你之前用其他项目往 db0 写过数据，苍穹外卖的 key 可能和旧数据冲突。我一般会给这个项目单独分配一个库，比如 database: 1，避免 key 覆盖。改完配置后启动后端，如果控制台没有 Redis 连接相关的异常，说明这层通了。

注意：Redis 服务没启动时，后端启动阶段可能不报错，但一访问需要缓存的接口就会抛连接异常。所以启动后端前先用 redis-cli ping 确认一下。

4. 后端工程导入与启动：IDEA 里的配置细节

4.1 Maven 依赖拉取与 JDK 版本对齐

把后端工程导入 IDEA 后，第一件事不是点运行，而是等 Maven 把依赖拉完。苍穹外卖的 pom.xml 里依赖不少，包括 Spring Boot Starter、MyBatis、Druid 连接池、JWT、Lombok 等。如果公司内网或家里网络访问 Maven 中央仓库慢，可以在 settings.xml 里配阿里云镜像：

<mirror> <id>aliyunmaven</id> <mirrorOf>*</mirrorOf> <name>阿里云公共仓库</name> <url>https://maven.aliyun.com/repository/public</url> </mirror>

配完镜像后右键 pom.xml 选 Maven → Reload Project，观察控制台有没有依赖下载失败的报错。常见问题是某个依赖版本在中央仓库不存在，或者 JDK 版本和 Spring Boot 不匹配。比如 Spring Boot 2.7.x 要求 JDK 至少 8，用 JDK 17 编译时可能报「不支持发行版本 17」或模块访问错误。解决办法是在 IDEA 的 Project Structure 里把 SDK 和 Language Level 都设成 8 或 11，和 pom.xml 里指定的版本保持一致。

Lombok 是另一个高频翻车点。如果代码里 @Data、@Slf4j 这些注解飘红，说明 IDEA 没装 Lombok 插件或没开启注解处理。在 Settings → Build → Compiler → Annotation Processors 里勾上 Enable annotation processing，然后重启 IDEA。

4.2 application.yml 关键参数逐项说明

后端能不能启动，八成看 application.yml 配得对不对。这个文件里几个关键参数我逐个说：

spring: datasource: druid: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/sky_take_out?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true username: root password: your_mysql_password redis: host: localhost port: 6379 password: your_redis_password database: 0

url 里的参数每一个都有用。serverTimezone=Asia/Shanghai 解决时区差 8 小时的问题，不写的话插入的时间字段可能不对。useSSL=false 关掉 SSL，本地开发不需要。allowPublicKeyRetrieval=true 是 MySQL 8.0 用 caching_sha2_password 认证插件时需要的，不写会报「Public Key Retrieval is not allowed」。zeroDateTimeBehavior=convertToNull 处理 MySQL 里的 0000-00-00 日期，避免映射到 Java 的 LocalDateTime 时抛异常。

改完配置后启动主类，观察控制台。如果看到 Tomcat started on port(s): 8080 并且没有异常堆栈，说明后端起来了。这时候可以用浏览器或 Postman 访问一个不需要登录的接口，比如http://localhost:8080/doc.html（如果集成了 Knife4j），能打开接口文档页面就说明后端服务正常。

提示：启动报「Access denied for user 'root'@'localhost'」时，先确认密码有没有写错，再确认 MySQL 里 root 用户的 host 是不是 localhost。有时候安装时只创建了 root@% 没创建 root@localhost，也会连不上。

5. Nginx 与前端联调：把管理端页面跑起来

5.1 Nginx 配置反向代理指向后端

前端管理端打包后是一堆静态文件，直接双击 index.html 打开是不行的，因为接口请求需要代理到后端。Nginx 的作用就是托管静态文件并把 /api 开头的请求转发给后端。一个能用的最小配置：

server { listen 80; server_name localhost; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

try_files 这行是给前端路由用的，Vue 的 history 模式下刷新页面不会 404。proxy_pass 末尾的斜杠要注意，http://localhost:8080/和http://localhost:8080转发后的路径不一样，前者会去掉 /api 前缀，后者会保留。具体用哪种取决于后端接口的路径设计，苍穹外卖一般是去掉 /api 前缀，所以末尾要加斜杠。

改完配置后执行nginx -t检查语法，再nginx -s reload重载。然后浏览器访问http://localhost，能看到登录页就说明 Nginx 这层通了。

5.2 前端打包与接口地址配置

管理端源码一般用 Vue CLI 或 Vite 构建。打包前要确认接口基础地址配置正确，通常在 .env.production 或 config.js 里：

// 开发环境接口地址 const baseURL = '/api' // 或者直接写完整地址 // const baseURL = 'http://localhost:8080'

如果 Nginx 做了反向代理，baseURL 写/api就行，请求会先到 Nginx 再转发到后端。如果没配代理直接写后端地址，会遇到跨域问题。跨域的本质是浏览器同源策略，前端在 localhost:80 后端在 localhost:8080，端口不同就算跨域。解决办法要么配 Nginx 代理，要么后端加 CORS 配置，推荐前者，因为生产环境也是这么部署的。

打包命令一般是npm run build，产物在 dist 目录。把这个目录的路径填到 Nginx 配置的 root 里。如果打包时报 Node 版本相关的错误，检查一下 Node.js 版本，Vue 2 项目用 Node 14 或 16 比较稳，Node 18 以上可能有 OpenSSL 相关的报错，需要设置NODE_OPTIONS=--openssl-legacy-provider。

6. 环境搭建避坑清单：五个我真实踩过的坑

6.1 坑一：MySQL 时区不对导致登录令牌过期时间异常

现象：管理端登录后没多久就提示登录过期，重新登录又能用一会儿。原因：MySQL 的 serverTimezone 没配或配错，JWT 令牌的签发时间和校验时间差了 8 小时，导致令牌一签发就被判定过期。解决：在 JDBC url 里加上serverTimezone=Asia/Shanghai，同时确认 MySQL 全局时区SHOW VARIABLES LIKE '%time_zone%';返回的是 SYSTEM 或 +08:00。

6.2 坑二：Redis 没设密码但配置文件里写了密码

现象：后端启动时报「NOAUTH Authentication required」。原因：application.yml 里写了 redis.password，但 Redis 服务端没设 requirepass，客户端发 AUTH 命令时服务端不认识。解决：要么给 Redis 设上密码，要么把配置文件里的 password 那行删掉或留空。两个地方必须一致，这是最常见的配置不一致问题。

6.3 坑三：Nginx 代理后接口 404 但直接访问后端正常

现象：浏览器访问http://localhost/api/employee/login返回 404，但直接访问http://localhost:8080/employee/login正常。原因：proxy_pass 末尾斜杠没加，导致 /api 前缀被带到了后端，而后端接口路径里没有 /api。解决：把proxy_pass http://localhost:8080;改成proxy_pass http://localhost:8080/;，末尾斜杠会截断 location 匹配的前缀。

6.4 坑四：Lombok 注解不生效导致编译报错

现象：代码里 getter、setter 方法找不到，编译报「cannot find symbol」。原因：IDEA 没开启注解处理，或者 Lombok 插件版本和 IDEA 版本不兼容。解决：Settings → Build → Compiler → Annotation Processors 勾选 Enable，然后在 Plugins 里确认 Lombok 插件已安装并启用。如果还不行，检查 pom.xml 里 Lombok 的 scope 是不是 provided，改成默认的 compile 试试。

6.5 坑五：端口被占用但报错信息不直观

现象：后端启动报「Web server failed to start. Port 8080 was already in use.」原因：8080 被其他进程占了，可能是之前没关干净的 Java 进程，也可能是 Tomcat 或其他服务。解决：Windows 下netstat -ano | findstr 8080找到 PID，任务管理器里结束对应进程；Linux 下lsof -i:8080然后 kill。如果不想杀进程，就在 application.yml 里把server.port改成 8081，同时记得改 Nginx 代理地址。

7. 环境验证的进阶技巧：用一条命令确认全链路通畅

环境搭完不算完，得有一套验证方法确认每个环节都真的通了，而不是碰巧能打开一个页面。我习惯用 curl 从后端接口层开始逐层往上验，这样出问题时能快速定位是哪一层断了。

先验后端接口是否直接可用：

# 测试登录接口，替换成实际的用户名密码 curl -X POST http://localhost:8080/employee/login \ -H "Content-Type: application/json" \ -d '{"username":"admin","password":"123456"}'

如果返回 JSON 里带 token 字段，说明后端、MySQL、Redis 三层都通了。因为登录逻辑要查数据库验证账号，还要往 Redis 写令牌，一个请求把三个服务全串起来了。这一步不通就别急着配 Nginx，先解决后端的问题。

再验 Nginx 代理层：

# 通过 Nginx 访问同一个接口 curl -X POST http://localhost/api/employee/login \ -H "Content-Type: application/json" \ -d '{"username":"admin","password":"123456"}'

返回结果应该和上一步一致。如果这一步 404 或 502，说明 Nginx 配置有问题，502 通常是后端没启动或代理地址写错，404 是路径转发规则不对。

最后验前端页面。浏览器打开http://localhost，按 F12 看 Network 面板，输入账号密码点登录，观察请求的 URL、状态码和响应。如果请求发出去了但返回 401，说明账号密码不对或数据库里没有这个用户；如果请求根本没发出去，检查前端 baseURL 配置和浏览器控制台有没有 JS 报错。

这套验证流程的好处是把「环境问题」和「代码问题」分开。环境搭建阶段，只要三层验证都通过，后面写业务代码时再出问题，就可以排除环境因素，专心看代码逻辑。我见过太多人环境没验透就开始改代码，最后分不清是配置错了还是代码写错了，来回折腾浪费大量时间。

还有一个习惯值得养成：把每个服务的启动命令和验证命令写成一个 shell 脚本或 bat 文件，下次换机器或重装系统时直接跑一遍，几分钟就能确认环境是否完整。环境搭建这件事，第一次慢是正常的，但第二次还慢就是没沉淀。希望帮到你。

本文还有配套的精品资源，点击获取