我干了两个月的大项目，开源了！
大家好，我是程序员鱼皮。我肝了 2 个多月的大项目《智能协同云图库》，终于完结了！https://pic.yupi.icu/1/1735878225578-955f3e74-7033-4ff1-930c-1d03972ef453.png
为了让更多同学到场学习，我特么直接把全部代码 完整开源 ！
开源仓库：https://github.com/liyupi/yu-picture
https://pic.yupi.icu/1/image-20250116123632636.png
光分享源码还不够，我还录制了一套将源码快速上线的视频教程：https://bilibili.com/video/BV1akwGeSERK ，有关这个项目的先容、前后端摆设方法、项目功能演示，都在这个视频里了~
不外虽然代码是开源的，项目的视频教程 + 文字教程 + 简历写法 + 面试题解是仅供 编程导航 的鱼友学习的，毕竟我连续肝了 2 个月嘛。
https://pic.yupi.icu/1/image-20250116124218981.png
下面分享将智能协同云图库项目上线的文字教程，推荐配合前面的视频教程食用。
本节重点内容是项目摆设上线，可以独立学习，希望大家能够掌握这种快速上线项目的方法。
包括：
[*]服务器初始化
[*]摆设规划
[*]安装依赖
[*]后端摆设
[*]前端摆设
[*]测试验证
[*]扩展知识
一、服务器初始化
首先购买一台服务器，各大云服务商的新用户都比较便宜，建议先看 云产物 页面。
推荐选择轻量应用服务器，提供了很多开箱即用的模板，帮我们预装了环境和软件，省时省力。
鱼皮这里选择一台预装了宝塔 Linux 应用的轻量应用服务器，设置为 2 核 2 G，摆设咱们的项目充足了。应用模板一般选择最新版本就好了，如下图：
https://pic.yupi.icu/1/1727248104987-b129e975-2cbd-4a64-a2db-f770c519ac4f.png
宝塔 Linux 是一个可视化 Linux 运维管理工具，提供了很多帮助我们管理服务器的功能，适合中小团队或者个人学习利用。
购买好服务器后，进入控制台，可以看到新增的服务器信息，注意不要主动对外袒露公网 IP！
https://pic.yupi.icu/1/1736820777990-93b3eb0f-fa13-4e52-ba53-93f4d5d43968.png
点击服务器进入详情页，在防火墙标签页中放通 8888 宝塔面板端口，否则无法在自己的电脑上访问宝塔。
https://pic.yupi.icu/1/1736820851710-b8e1df10-dbc1-47c7-8131-bc50816b9c13.png
新版本的轻量应用服务器已经自动为我们放通该端口。否则需要手动新增一条防火墙规则：
https://pic.yupi.icu/1/1727248461577-ddd18cf9-9754-4409-94a0-d62d943f76c0.png
进入应用管理标签页，登录宝塔。
首次登录时，需要先登录服务器，通过输入命令的方式获取宝塔默认账号暗码，如图：
https://pic.yupi.icu/1/1736820908310-2c1e539f-a936-4be7-bfdc-77fd00a0081d.png
点击登录后，进入到 web 终端，复制脚本并执行：
https://pic.yupi.icu/1/1736820955676-2927899e-9af4-4e8e-a15f-a4adc093887c.png
根据终端输出的信息，访问宝塔面板，输入初始用户名和暗码：
https://pic.yupi.icu/1/1727248615289-c68e08eb-e5eb-4e1c-bdc2-83a643d6d849.png
首次进入宝塔时，会提示我们安装环境，这里推荐安装 LNMP（包含 Nginx 服务器），适合摆设前后端分离的项目：
https://pic.yupi.icu/1/1736821032080-4be9c9e5-6dfe-434b-8db8-7eb8d7068a16.png
首次进入宝塔面板时，记得修改面板账号暗码（每次修改完都要重新登录）：
https://pic.yupi.icu/1/1727248755605-f14e4ce0-b33a-4b48-90b5-6faa3a04e9c3.png
二、摆设规划
在正式操作前后端摆设前，我们要先进行一个规划，比如要摆设哪些项目和服务、需要哪些依赖、占用哪些端口等。
1、获取源码
本项目代码开源：https://github.com/liyupi/yu-picture
建议新手学习和摆设 yu-picture-backend 目录，利用传统的分层架构：https://github.com/liyupi/yu-picture/tree/master/yu-picture-backend
有一定经验的同学可以学习摆设 yu-picture-backend-ddd 目录，利用 DDD 领域驱动筹划：https://github.com/liyupi/yu-picture/tree/master/yu-picture-backend-ddd
但这两种架构的摆设方式是一致的~
2、摆设方案
为了提高效率，本项现在端和后端均利用宝塔面板进行摆设，可以很方便地管理服务器。
涉及到具体的摆设方式，前端要遵照 Vue 项目的摆设模式，基于 Nginx 运行；后端可以直接利用宝塔的 Java 项目管理器运行 jar 包。
在鱼皮编程导航的 代码生成器共享平台项目 中，解说过宝塔 + Nginx + 后端 Java 项目管理器（jar 包）的摆设方式。在鱼皮编程导航的 AI 答题应用平台项目 中，解说过 Vercel + Docker + 云托管平台的摆设方式，感兴趣的同学可以学习。基本上学会这几种摆设方式，能够应对绝大多数摆设需求了。
3、地址规划
前端：通过 Nginx 进行转发，访问地址为 http://{域名}。
后端：通过 Nginx 进行转发，访问地址为 http://{域名}/api。实际运行在 8123 端口。JDK 建议选择 17 版本！
为什么要用 Nginx 转发？
前端和后端域名一致，保证不会出现跨域题目。
Nginx：服务器 80 端口，默认已安装。
数据库：服务器 3306 端口，默认已安装。
Redis：服务器 6379 端口，需要手动安装。
4、注意事项
做好规划后，我们需要在腾讯云控制台的防火墙中开通需要外网访问的服务端口，比如 MySQL 和 Redis：
https://pic.yupi.icu/1/1736823033530-55a82571-58ab-420d-b672-1cf0dd77d5bf.png
三、安装依赖
1、数据库
宝塔面板已经自动安装 MySQL 数据库，我们可以直接利用。
先为后端项目添加一个数据库。数据库名称和我们项目需要的数据库名称保持一致（此处为 mianshiya），注意用户名、暗码和访问权限：
https://pic.yupi.icu/1/1736823436494-00acbd12-3e8e-40d0-9ad1-e4f4823289d3.png
在 IDEA 中打开后端项目，通过数据库面板在本地检查连接是否正常：
https://pic.yupi.icu/1/1736823590747-1168f865-d940-4a2b-9bc8-8b534056a93b.png
执行脚本，初始化库表：
https://pic.yupi.icu/1/1736823659602-c1ccd7c5-1b6b-4a8c-b5d2-9dd0ab4fda25.png
记得验证数据库表是否创建成功，如下图：
https://pic.yupi.icu/1/1736823703886-083cb8bd-7124-4007-8427-d048a14de531.png
2、Redis
在宝塔面板的软件商店中，搜索并安装 Redis：
https://pic.yupi.icu/1/1727251186974-06b1690e-ae35-49fa-939f-8423bbdf411f.png
版本选择默认的即可：
https://pic.yupi.icu/1/1736823849973-dc8a0d7e-c4f3-4ec0-9857-5a29bee0f7b3.png
安装完成后，需要设置 Redis，开启远程访问并设置暗码，否则我们自己的电脑是无法连接 Redis 的：
https://pic.yupi.icu/1/1736824403660-f1488a81-a35a-4870-ade2-01828f52db88.png
修改设置后，一定要重载设置才能生效：
https://pic.yupi.icu/1/1736824425493-34028e4b-06bb-4eec-bb28-8a5f324c5c8a.png
最后，在 IDEA 数据库面板中验证本地可否连接远程 Redis：
https://pic.yupi.icu/1/1736824532974-e0a5421f-071d-4f96-a08b-30e570124ad6.png
3、Java 环境
要摆设 Java 项目，必须安装 JDK。在宝塔面板中，可以通过下图的方式快速安装指定版本的 JDK。此处我们先安装 JDK 17：
https://pic.yupi.icu/1/1736824607783-2816da67-3c21-4c06-a150-d759787fc0ae.png
建议多安装几个版本，比如 JDK 8、11、17，需要用哪个版本的时候可以随时切换。
4、其他服务
比如 腾讯云 COS 对象存储、阿里云百炼 AI，可以去对应的官网开通。
假如不会开通的话，可以通过第 4 章教程开通 COS 对象存储，第 9 章教程开通阿里云百炼 AI。
注意，要给对象存储增加该服务器 IP（或者实际访问前端域名）的跨域设置，否则编辑图片时将无法正确加载图片。
https://pic.yupi.icu/1/1736831344317-ff7042af-4a3f-4e15-bd98-afe47369ee6b.png
接下来，我们分别进行后端和前端摆设。
四、后端摆设
1、修改设置
修改 application-prod 生产环境设置，包括数据库、Redis、对象存储、阿里云百炼 AI 的 key 等，替换为上述安装依赖时指定的设置（如用户名、暗码）。
注意为了性能，还要关闭 MyBatis Plus 的日志；为了安全，要给 Knife4j 接口文档设置用户名和暗码。
参考设置如下：
# 线上配置文件<br># @author <a target="_blank" href="https://github.com/liyupi">程序员鱼皮</a><br># @from <a target="_blank" href="https://codefather.cn">编程导航</a><br>server:<br>port: 8123<br>spring:<br> # 数据库配置<br> # todo 需替换配置<br>datasource:<br> driver-class-name: com.mysql.cj.jdbc.Driver<br> url: jdbc:mysql://81.69.229.63:3306/yu_picture<br> username: yu_picture_root<br> password: yu_picture_123456<br> # Redis 配置<br> # todo 需替换配置<br>redis:<br> database: 0<br> host: 81.69.229.63<br> port: 6379<br> timeout: 5000<br> password: 123456<br>mybatis-plus:<br>configuration:<br> # 生产环境关闭日志<br> log-impl: ''<br># 接口文档配置<br>knife4j:<br>basic:<br> enable: true<br> username: root<br> password: 123456<br># 对象存储配置<br>cos:<br>client:<br> host: xxx<br> secretId: xxx<br> secretKey: xxx<br> region: xxx<br> bucket: xxx<br># 阿里云 AI 配置<br>aliYunAi:<br>apiKey: xxx
2、打包摆设
首先更改 pom.xml 文件的打包设置，删除掉主类设置的 skip 设置，才能打包：
<build><br> <plugins><br> <plugin><br> <groupId>org.springframework.boot</groupId><br> <artifactId>spring-boot-maven-plugin</artifactId><br> <version>${spring-boot.version}</version><br> <configuration><br> <mainClass>com.yupi.yupicturebackend.YuPictureBackendApplication</mainClass><br> <skip>true</skip><br> </configuration><br> </plugin><br> </plugins><br></build>在 IDEA 中打开后端项目，忽略测试并打包：
https://pic.yupi.icu/1/1736824989133-cbae0c04-d3dd-414d-9fc5-f9bfb164a6ed.png
打包成功，得到 jar 包文件：
https://pic.yupi.icu/1/1736825047389-eb078b33-601f-4493-a48e-964f7905361b.png
上传 jar 包到服务器，此处为了方便，就放到 web 根目录：
https://pic.yupi.icu/1/1736825857679-13e11acb-80cb-477a-8632-954d5579b1c9.png
然后添加 Java 项目，在项目执行命令中，必须指定生产环境的设置！还可以根据需要调整内存：
https://pic.yupi.icu/1/1736825196166-52539996-d462-482e-bc38-65e41cd73a16.png
启动成功后，能够看到状态和端口占用如图：
https://pic.yupi.icu/1/1736825898998-5227749e-c917-4e16-98b7-06dc9976d3ea.png
假如发现启动失败，需要先观察日志，下图仅为一个示例：
https://pic.yupi.icu/1/1706154336729-f7464cdf-99f8-42ef-8f24-cca2967a131e.png
但是，我们现在无法通过浏览器访问接口文档：http://81.69.229.63:8123/api/doc.html
https://pic.yupi.icu/1/1736825991896-0ce18bfb-3e8b-4e9b-aa97-4050d47c0166.png
这是由于我们的服务器防火墙没有放开 8123 端口。这里我们故意不放开，由于在之前的摆设规划中，后端需要通过 Nginx 进行转发，从而解决跨域题目。
3、Nginx 转发
新建一个 Nginx 站点，域名填写当前服务器 IP 或者自己的域名，根目录随意填写即可（只要不包含中文）：
https://pic.yupi.icu/1/1736826094234-923bc743-4013-4139-8b3e-8c3aaf714783.png
假如访问的是后端接口（地址有 /api 前缀），则 Nginx 将哀求转发到后端服务，对应设置代码如下：
location /api {<br> proxy_pass http://127.0.0.1:8123;<br> proxy_set_header Host $proxy_host;<br> proxy_set_header X-Real-IP $remote_addr;<br> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;<br> proxy_buffering off;<br> proxy_set_header Connection "";<br>}但是，对于本项目，光有 HTTP 转发设置还不够！后端还需要提供 WebSocket 连接，所以也要对 WebSocket 进行转发，再给 Nginx 补充下列设置：
# 代理 WebSocket 连接 (专门用于 WebSocket 请求)<br>location /api/ws {<br> proxy_pass http://127.0.0.1:8123;<br> proxy_http_version 1.1;<br> proxy_set_header Upgrade $http_upgrade;<br> proxy_set_header Connection "upgrade";<br> proxy_set_header Host $host;<br> proxy_set_header X-Real-IP $remote_addr;<br> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;<br> proxy_buffering off;<br> proxy_read_timeout 86400s;<br>}修改 Nginx 设置如图：
https://pic.yupi.icu/1/1736832443490-d839d5c8-0b99-4bcd-8c82-f84ee55e5f88.png
修改完后，就可以通过 80 端口（可以省略）访问到接口了。
一定要解释掉下列设置！否则访问接口文档时，静态资源的加载大概会出错。由于浏览器会从本地缓存加载资源，而不是动态哀求资源。
https://pic.yupi.icu/1/1727258259642-b591c3f0-3e46-4c9e-aaed-736bbc87ac6a.png
五、前端摆设
前端摆设可以参考 Vite 官方文档：https://cn.vitejs.dev/guide/static-deploy.html
分为修改设置、打包摆设和 Nginx 转发这 3 个步骤。
1、修改设置
线上的前端需要哀求线上的后端接口，所以需要修改 request.ts 文件中的哀求地址为线上：
// 区分开发和生产环境<br>const DEV_BASE_URL = "http://localhost:8123";<br>const PROD_BASE_URL = "http://81.69.229.63";<br>// 创建 Axios 实例<br>const myAxios = axios.create({<br> baseURL: PROD_BASE_URL,<br> timeout: 10000,<br> withCredentials: true,<br>});此外，由于本项目用到了 WebSocket，还要同步修改 pictureEditWebSocket.ts 文件中的 WebSocket 的连接地址：
const DEV_BASE_URL = "ws://localhost:8123";<br>const PROD_BASE_URL = "ws://81.69.229.63";<br>const url = `${PROD_BASE_URL}/api/ws/picture/edit?pictureId=${this.pictureId}`
2、打包摆设
1）参考 Vite 官网，在 package.json 文件中定义 pure-build 命令：
{<br> "scripts": {<br> "dev": "vite",<br> "pure-build": "vite build",<br> "build": "run-p type-check \"build-only {@}\" --",<br>}<br>}为什么明明已经有 build 命令了，我们还要自己定义 pure-build 命令呢？
由于脚手架内置的 build 命令会执行类型检查，假如项目代码中有任何类型不规范的地方，都会导致打包失败！
https://pic.yupi.icu/1/1736829734802-1a7a170c-882c-408f-b039-18f503d79a8c.png
虽然可以自己一个个修复类型，但是太影响效率了，得不偿失，所以引入一个更干净的构建命令。
2）执行 pure-build 命令，执行打包构建。
注意，假如 Node.js 版本较低，会构建失败，这时可以到 官网 安装更新的版本，比如 v20.17.0 等长期支持版本。
构建成功后，可以得到用于摆设的静态文件 dist 目录：
https://pic.yupi.icu/1/1736829834651-52dd76c1-b3ba-4731-93c3-a4341f023ae2.png
把 dist 目录下的全部文件上传到服务器上（可以新建一个 yu-picture-frontend 目录）。文件较多时，建议先在本地压缩，上传压缩包到服务器后再解压。如图：
https://pic.yupi.icu/1/1736830043889-35546f3b-d234-41af-90b4-c0f69e9167f9.png
3、Nginx 转发
一般来说，用户无法直接访问服务器上的文件，需要利用 Nginx 提供静态文件的访问本领。
修改已有站点的网站目录设置，指向前端文件根目录：
https://pic.yupi.icu/1/1736830245682-e57f7fa8-7175-4eb6-b34d-4bd95015df38.png
然后访问服务器地址（或者自己设置的域名），就能打开前端网站了：
https://pic.yupi.icu/1/1736830335779-ab219cd4-bfb8-4048-918f-cfd5b02185c3.png
但是经过验证，现在访问除了主页外的其他页面（比如 /add_picture），假如刷新页面，就会出现 404 错误。
https://pic.yupi.icu/1/1706159081942-2f51f135-1218-4fee-b957-08e811a91762.png
这个题目是由于 Vue 是单页面应用（前端路由），打包后的文件只有 index.html，服务器上不存在对应的页面文件（比如 /add_picture.html），所以需要在 Nginx 设置转发。假如找不到某个页面文件，就加载主页 index.html 文件。
修改 Nginx 设置，补充下列代码：
location / {<br> try_files $uri $uri/index.html /index.html;<br>}如图：
https://pic.yupi.icu/1/1736830583864-b9e22db7-a691-4a10-a024-876bcad09d3a.png
保存设置后，再次刷新页面，可以正常访问。
六、测试验证
最后，我们来对上线效果进行验证。
1）用户注册登录
https://pic.yupi.icu/1/1736830672014-427f1d81-a8d2-42a2-97d7-ec3589b6c04b.png
然后通过修改数据库的方式，将该用户的角色设置为管理员，从而利用更多功能。
2）进入图片管理 => 批量创建图片页面，抓取一批图片作为网站的初始数据
https://pic.yupi.icu/1/1736830777790-4720829e-c798-4298-bb68-688212645b09.png
3）进入主页，查看到了公共图库
https://pic.yupi.icu/1/1736830806797-dac95c7c-cc28-4ec1-a899-c210b5d36f51.png
4）创建一个私有空间
https://pic.yupi.icu/1/1736830826161-32b901eb-64cd-44b9-beaf-5a15f71b3489.png
5）通过文件上传和 URL 上传给私有空间上传一些图片：
https://pic.yupi.icu/1/1736830860221-0f7760e3-3a87-405d-b2b1-421e773fb983.png
6）查看私有空间的图片，实验各种搜索功能（比如按颜色搜索）：
https://pic.yupi.icu/1/1736830926145-bd87c0c7-84ff-465b-b813-320ee895f94e.png
7）利用 AI 扩图功能来编辑图片（基于 阿里云百炼 AI 实现）
https://pic.yupi.icu/1/1736831872771-af5680ea-f4fc-4a72-a66a-1bc5a4d8f8d0.png
8）创建团队空间
https://pic.yupi.icu/1/1736830970551-3214da34-1e83-48ac-a374-c48ae52f7578.png
9）给团队添加一位成员，设置角色为 “编辑者”
https://pic.yupi.icu/1/1736831952958-9030ae41-01a7-4bb7-9631-285886fa9595.png
10）给团队空间上传一张图片，然后让 2 名成员同时进入编辑：
https://pic.yupi.icu/1/1736832289546-bc9214e7-8ff6-4e5c-b11a-d3dd40dd07ec.png
假如编辑时，图片无法正常加载，大概是由于对象存储没有设置跨域，补充设置即可。
七、扩展知识
再分享一种更快摆设后端的方法，可以利用 Docker + Docker Compose 快速摆设后端依赖和后端项目本身。
可以把 Docker 容器技术理解为安装操作系统时的镜像、或者安装 APP 时的安装包，只要定义好 Docker 设置文件，就能快速基于设置启动服务或项目。
而 Docker Compose 可以组合编排多个 Docker 容器，按照次序快速启动多个服务或项目。
给大家提供一个示例的 Docker Compose 设置文件，定义了 MySQL、Redis 和 Spring Boot 项目的启动，大家可以基于这个文件进行定制修改：
# Docker Compose 文件，用于 Spring Boot 项目，依赖 MySQL 和 Redis<br><br>version: '3.8'<br><br>services:<br><br> # MySQL 数据库服务<br>mysql:<br> image: mysql:8.0<br> container_name: mysql_db<br> restart: always<br> environment:<br> MYSQL_ROOT_PASSWORD: root # 设置 MySQL root 用户的密码<br> MYSQL_DATABASE: yu_picture # 更新为 yu_picture 数据库<br> MYSQL_USER: root # 更新为 root 用户<br> MYSQL_PASSWORD: 123456 # 更新为 123456 密码<br> TZ: Asia/Shanghai # 设置时区为东八区<br> ports:<br> - "3306:3306" # 映射 MySQL 端口到主机<br> volumes:<br> - mysql_data:/var/lib/mysql # 数据持久化到宿主机（使用 Docker 管理的命名卷）<br> command: --default-authentication-plugin=mysql_native_password<br><br> # Redis 缓存服务<br>redis:<br> image: redis:5.0<br> container_name: redis_cache<br> restart: always<br> ports:<br> - "6379:6379" # 映射 Redis 端口到主机<br> volumes:<br> - redis_data:/data # 数据持久化到宿主机（使用 Docker 管理的命名卷）<br> environment:<br> TZ: Asia/Shanghai # 设置时区为东八区<br><br> # Spring Boot 应用服务<br>springboot_app:<br> image: openjdk:11-jre-slim<br> container_name: springboot_app<br> working_dir: /app<br> volumes:<br> - .:/app # 挂载本地目录到容器中<br> ports:<br> - "8123:8123" # 映射 Spring Boot 端口到主机<br> environment:<br> TZ: Asia/Shanghai # 设置时区为东八区<br> command: [ "java", "-jar", "target/yu-picture-backend-0.0.1-SNAPSHOT.jar", "--spring.profiles.active=prod" ] # 使用 prod 配置文件启动 Spring Boot 应用<br> depends_on:<br> - mysql<br> - redis<br><br># 使用 Docker 管理的命名卷<br>volumes:<br>mysql_data:<br>redis_data:有了设置文件后，就可以利用宝塔面板自带的 Docker 本领，去进行项目的摆设了，感兴趣的同学可以实验一下：
https://pic.yupi.icu/1/1736832698314-27471300-dadd-4683-9bef-9439fd818dec.png
在鱼皮编程导航的 OJ 在线判题项目教程 中，解说过基于 Docker + Docker Compose 快速摆设微服务项目的方法，视频地址：https://www.bilibili.com/video/BV1Cp4y1F7eA
最后
至此，整个项目已经完成上线，希望大家能通过这个项目掌握企业级项目的开辟、优化和上线方法，得到全方面编程技能和程序员素养的提升。
更多编程学习资源
[*]Java前端程序员必做项目实战教程+毕设网站
[*]程序员免费编程学习交换社区（自学必备）
[*]程序员保姆级求职写简历指南（找工作必备）
[*]程序员免费面试刷题网站工具（找工作必备）
[*]最新Java零基础入门学习路线 + Java教程
[*]最新Python零基础入门学习路线 + Python教程
[*]最新前端零基础入门学习路线 + 前端教程
[*]最新数据结构和算法零基础入门学习路线 + 算法教程
[*]最新C++零基础入门学习路线、C++教程
[*]最新数据库零基础入门学习路线 + 数据库教程
[*]最新Redis零基础入门学习路线 + Redis教程
[*]最新盘算机基础入门学习路线 + 盘算机基础教程
[*]最新小程序入门学习路线 + 小程序开辟教程
[*]最新SQL零基础入门学习路线 + SQL教程
[*]最新Linux零基础入门学习路线 + Linux教程
[*]最新Git/GitHub零基础入门学习路线 + Git教程
[*]最新操作系统零基础入门学习路线 + 操作系统教程
[*]最新盘算机网络零基础入门学习路线 + 盘算机网络教程
[*]最新筹划模式零基础入门学习路线 + 筹划模式教程
[*]最新软件工程零基础入门学习路线 + 软件工程教程
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]