大家好，我是魚(yú)皮。

經(jīng)過(guò)了總時(shí)長(zhǎng)超過(guò) 30 小時(shí)的直播，我在?自己的編程導(dǎo)航?的第 6 個(gè)?全程直播開(kāi)發(fā)?的微服務(wù)項(xiàng)目 —— 魚(yú) OJ 在線(xiàn)判題系統(tǒng)，完結(jié)啦！

實(shí)話(huà)說(shuō)，帶大家做這個(gè)項(xiàng)目的確把我累的夠嗆。

因?yàn)槲規(guī)Т蠹易龅拿總€(gè)項(xiàng)目都是全程直播的?保姆級(jí)教程?，每一行代碼都是直播帶大家寫(xiě)的、每一個(gè)坑都是直播帶大家踩的，大家跟著做就完事了。相比于網(wǎng)上很多所謂大而全的文字項(xiàng)目教程，大家學(xué)習(xí)上的卡點(diǎn)會(huì)更少。

真心換真心，我的付出也得到了很多同學(xué)的認(rèn)可：

所以魚(yú)皮對(duì)這次的新項(xiàng)目做一個(gè)分享和總結(jié)，希望讓更多需要它的同學(xué)看到，把它變成自己的項(xiàng)目~

文末有加入學(xué)習(xí)方式

項(xiàng)目簡(jiǎn)介

這次帶做的是一個(gè)讓很多同學(xué) “望而生畏” 的硬項(xiàng)目， 基于 Vue 3 + Spring Boot + Spring Cloud 微服務(wù) + Docker 的?編程題目在線(xiàn)評(píng)測(cè)系統(tǒng)?（簡(jiǎn)稱(chēng) OJ）。

在系統(tǒng)前臺(tái)，管理員可以創(chuàng)建、管理題目；用戶(hù)可以自由搜索題目、閱讀題目、編寫(xiě)并提交代碼。

在系統(tǒng)后端，能夠根據(jù)管理員設(shè)定的題目測(cè)試用例在?代碼沙箱?中對(duì)代碼進(jìn)行編譯、運(yùn)行、判斷輸出是否正確。

其中，代碼沙箱可以作為獨(dú)立服務(wù)，提供給其他開(kāi)發(fā)者使用。

題目搜索頁(yè)面：

在線(xiàn)做題頁(yè)面，支持代碼編輯器、代碼高亮：

題目提交列表頁(yè)面：

創(chuàng)建題目頁(yè)面，包含 Markdown 富文本編輯器、動(dòng)態(tài)增刪測(cè)試用例：

項(xiàng)目業(yè)務(wù)流程圖：

感興趣的同學(xué)可以?免費(fèi)試看?第一期項(xiàng)目回放：https://yuyuanweb.feishu.cn/wiki/SePYwTc9tipQiCktw7Uc7kujnCd

為什么帶大家做這個(gè)項(xiàng)目？

1. 資料少：OJ 系統(tǒng)網(wǎng)上幾乎找不到教程

2. 比較新穎，有亮點(diǎn)、有區(qū)分度（人家寫(xiě)外賣(mài)，你寫(xiě) OJ）

3. 能學(xué)到東西：能夠?qū)W到很多傳統(tǒng) CRUD 開(kāi)發(fā)外的知識(shí)點(diǎn)和編程思想

4. 復(fù)雜度 “高”：很多同學(xué)覺(jué)得 OJ 是個(gè)很復(fù)雜的項(xiàng)目，一起攻克它

5. 可擴(kuò)展性強(qiáng)，有很多區(qū)別于 CRUD 的功能可做

項(xiàng)目特點(diǎn)和收獲

該項(xiàng)目選題非常?新穎?，不同于泛濫的管理系統(tǒng)、博客、商城，不同于只有增刪改查的業(yè)務(wù)系統(tǒng)，本項(xiàng)目會(huì)基于?Docker 虛擬化技術(shù) + 多種設(shè)計(jì)模式?，從 0 開(kāi)始手把手帶大家實(shí)現(xiàn)一個(gè)安全的、可復(fù)用的?代碼沙箱?，并通過(guò)?微服務(wù)架構(gòu)?實(shí)現(xiàn)一個(gè)可擴(kuò)展的在線(xiàn)判題系統(tǒng)。

魚(yú)皮?從 0 到 1 全程直播無(wú)剪輯?地帶大家開(kāi)發(fā)完成項(xiàng)目，總課程時(shí)長(zhǎng)超?30 小時(shí)?！從需求分析、技術(shù)選型、系統(tǒng)設(shè)計(jì)、項(xiàng)目初始化、前后端開(kāi)發(fā)，每個(gè)環(huán)節(jié)我都?從理論到實(shí)踐?給大家講的明明白白、每個(gè)細(xì)節(jié)都不放過(guò)！

魚(yú)皮給大家講的都是通用的項(xiàng)目開(kāi)發(fā)方法和架構(gòu)設(shè)計(jì)套路，從這個(gè)項(xiàng)目中你可以學(xué)到：

• 如何從設(shè)計(jì)到開(kāi)發(fā)一套完整系統(tǒng)？

• 如何在應(yīng)用中使用 Docker 隔離程序？

• 如何從 0 打造前端項(xiàng)目模板？

• 單體項(xiàng)目如何改造為微服務(wù)？

• 如何保證用戶(hù)執(zhí)行代碼的安全？

• 如何使用消息隊(duì)列解耦程序？

• 如何巧妙利用設(shè)計(jì)模式來(lái)優(yōu)化代碼？

此外，還能學(xué)會(huì)很多作圖、思考問(wèn)題、對(duì)比方案的方法，提升排查問(wèn)題、自主解決 Bug 的能力。

值得一提的是，我?guī)Т蠹易鲞@個(gè)項(xiàng)目的過(guò)程是先做完單體項(xiàng)目、再改造為微服務(wù)，所以哪怕你還沒(méi)接觸過(guò)微服務(wù)、或者時(shí)間緊急，也可以分階段來(lái)學(xué)習(xí)~ 而且學(xué)完這個(gè)操作后，你的任何單機(jī)項(xiàng)目都可以升級(jí)成微服務(wù)了，不用再單獨(dú)做一個(gè)微服務(wù)新項(xiàng)目，大幅節(jié)省時(shí)間。

本項(xiàng)目適合的同學(xué)

本項(xiàng)目同時(shí)適合前端和后端，是一套完整的全棧項(xiàng)目。

如果你是后端，已經(jīng)學(xué)習(xí)過(guò) Java Web 開(kāi)發(fā)技術(shù)，希望做一個(gè)新穎的、有亮點(diǎn)的、寫(xiě)在簡(jiǎn)歷上加分的項(xiàng)目，學(xué)習(xí) OJ 系統(tǒng)的設(shè)計(jì)實(shí)現(xiàn)、微服務(wù)項(xiàng)目的設(shè)計(jì)實(shí)現(xiàn)、Docker 技術(shù)的實(shí)戰(zhàn)運(yùn)用、設(shè)計(jì)模式的實(shí)戰(zhàn)運(yùn)用、提升自己的編程和架構(gòu)設(shè)計(jì)能力，那么非常歡迎來(lái)學(xué)習(xí)！

如果你是前端，最好已經(jīng)學(xué)習(xí)過(guò) Vue 或 React 框架，可以通過(guò)本項(xiàng)目學(xué)習(xí)到快速開(kāi)發(fā)前端項(xiàng)目的技巧、自主編寫(xiě)一套前端通用模板的方法。

再介紹下這個(gè)項(xiàng)目用到的技術(shù)。

技術(shù)選型（全棧項(xiàng)目）

這次不僅用到了主流的技術(shù)，還包含了一些大家可能都沒(méi)聽(tīng)說(shuō)過(guò)的技術(shù)~

前端

• Vue 3

• Vue-CLI 腳手架

• Vuex 狀態(tài)管理

• Arco Design 組件庫(kù)

• 前端工程化：ESLint + Prettier + TypeScript

• ?? 手寫(xiě)前端項(xiàng)目模板（通用布局、權(quán)限管理、狀態(tài)管理、菜單生成）

• ?? Markdown 富文本編輯器

• ?? Monaco Editor 代碼編輯器

• ?? OpenAPI 前端代碼生成

后端

• ?? Java Spring Cloud + Spring Cloud Alibaba 微服務(wù)

• Nacos 注冊(cè)中心

• OpenFeign 客戶(hù)端調(diào)用

• GateWay 網(wǎng)關(guān)

• 聚合接口文檔

• Java Spring Boot（萬(wàn)用后端模板）

• Java 進(jìn)程控制

• ?? Java 安全管理器

• ?? Docker 代碼沙箱實(shí)現(xiàn)

• ?? 虛擬機(jī) + 遠(yuǎn)程開(kāi)發(fā)

• MySQL 數(shù)據(jù)庫(kù)

• MyBatis-Plus 及 MyBatis X 自動(dòng)生成

• Redis 分布式 Session

• ?? RabbitMQ 消息隊(duì)列

• ?? 多種設(shè)計(jì)模式

• 策略模式

• 工廠模式

• 代理模式

• 模板方法模式

• 其他：部分并發(fā)編程、JVM 小知識(shí)

再列舉下項(xiàng)目的大綱，只是部分關(guān)鍵環(huán)節(jié)。此外，直播過(guò)程中還講了很多平時(shí)大家自己看視頻根本學(xué)不到的做項(xiàng)目經(jīng)驗(yàn)和編碼技巧，比如：如何自定義代碼模板、規(guī)范的前后端開(kāi)發(fā)流程、代碼抽象復(fù)用的小技巧等。

項(xiàng)目大綱

這個(gè)項(xiàng)目?jī)?nèi)容非常多，大家可以看看有沒(méi)有自己想學(xué)的知識(shí)點(diǎn)。

第一章：項(xiàng)目誕生

1. 項(xiàng)目介紹 | OJ 系統(tǒng)常用概念

2. 項(xiàng)目介紹 | 企業(yè)項(xiàng)目開(kāi)發(fā)流程

3. 項(xiàng)目介紹 | 主流 OJ 系統(tǒng)調(diào)研

4. 項(xiàng)目介紹 | 核心實(shí)現(xiàn)模塊介紹

5. 項(xiàng)目介紹 | 核心業(yè)務(wù)流程（2 種作圖）

6. 項(xiàng)目介紹 | 系統(tǒng)功能梳理

7. 項(xiàng)目介紹 | 技術(shù)選型

8. 項(xiàng)目介紹 | 系統(tǒng)架構(gòu)設(shè)計(jì)（架構(gòu)設(shè)計(jì)圖）

9. OJ 系統(tǒng)實(shí)現(xiàn)方案（5 種方案講解）

10. 前端項(xiàng)目初始化 | Vue-CLI 初始項(xiàng)目搭建

11. 前端項(xiàng)目初始化 | 組件庫(kù)引入

12. 前端項(xiàng)目初始化 | 項(xiàng)目通用布局開(kāi)發(fā)及優(yōu)化

13. 前端項(xiàng)目初始化 | 全局狀態(tài)管理

14. 前端項(xiàng)目初始化 | 全局權(quán)限管理

15. 前端項(xiàng)目初始化 | 通用菜單組件開(kāi)發(fā)

16. 前端項(xiàng)目初始化 | 全局項(xiàng)目入口

17. 前端項(xiàng)目初始化 | 多套布局支持

18. 后端項(xiàng)目初始化（Spring Boot 萬(wàn)用模板講解）

19. 前后端聯(lián)調(diào) | 用戶(hù)登錄頁(yè)面開(kāi)發(fā)

20. 前后端聯(lián)調(diào) | 前端請(qǐng)求代碼生成

21. 前后端聯(lián)調(diào) | 用戶(hù)自動(dòng)登錄

第二章：?jiǎn)误w項(xiàng)目開(kāi)發(fā)

1. 后端接口開(kāi)發(fā) | 庫(kù)表設(shè)計(jì)

2. 后端接口開(kāi)發(fā) | 數(shù)據(jù)庫(kù)索引知識(shí)

3. 后端接口開(kāi)發(fā) | 后端開(kāi)發(fā)流程講解

4. 后端接口開(kāi)發(fā) | 代碼自動(dòng)生成

5. 后端接口開(kāi)發(fā) | 開(kāi)發(fā)題目相關(guān)接口

6. 前端頁(yè)面開(kāi)發(fā) | 整合 Markdown 編輯器

7. 前端頁(yè)面開(kāi)發(fā) | 整合 Monaco Editor 代碼編輯器

8. 前端頁(yè)面開(kāi)發(fā) | 題目頁(yè)面開(kāi)發(fā)（自定義代碼模板）

9. 前端頁(yè)面開(kāi)發(fā) | 題目管理頁(yè)面開(kāi)發(fā)

10. 前端頁(yè)面開(kāi)發(fā) | 題目更新頁(yè)面開(kāi)發(fā)

11. 前端頁(yè)面開(kāi)發(fā) | 題目列表搜索頁(yè)面開(kāi)發(fā)

12. 前端頁(yè)面開(kāi)發(fā) | 在線(xiàn)做題頁(yè)面開(kāi)發(fā)

13. 判題機(jī)架構(gòu) | 判題機(jī)模塊劃分

14. 判題機(jī)架構(gòu) | 判題服務(wù)開(kāi)發(fā)

15. 判題機(jī)架構(gòu) | 策略模式優(yōu)化

第三章：代碼沙箱實(shí)現(xiàn)

1. 代碼沙箱 Java 原生實(shí)現(xiàn) | 執(zhí)行原理

2. 代碼沙箱 Java 原生實(shí)現(xiàn) | 核心流程開(kāi)發(fā)

3. 代碼沙箱 Java 原生實(shí)現(xiàn) | Java 程序漏洞講解（6 種）

4. Java 程序安全控制 | 超時(shí)控制

5. Java 程序安全控制 | 資源控制

6. Java 程序安全控制 | 權(quán)限控制

7. Java 程序安全控制 | 安全管理器

8. Java 程序安全控制 | 環(huán)境隔離

9. Docker 從入門(mén)到實(shí)戰(zhàn) | Docker 入門(mén)講解

10. Docker 從入門(mén)到實(shí)戰(zhàn) | 虛擬機(jī) + 遠(yuǎn)程開(kāi)發(fā)環(huán)境搭建

11. Docker 從入門(mén)到實(shí)戰(zhàn) | Docker 命令實(shí)操

12. Docker 從入門(mén)到實(shí)戰(zhàn) | Java 操作 Docker

13. 代碼沙箱 Docker 實(shí)現(xiàn) | 核心流程實(shí)現(xiàn)

14. 代碼沙箱 Docker 實(shí)現(xiàn) | Docker 容器安全性

15. 代碼沙箱優(yōu)化 | 模板方法模式

16. 代碼沙箱開(kāi)放 API（API 安全性）

第四章：項(xiàng)目微服務(wù)化

1. 微服務(wù)入門(mén) | 基本概念

2. 微服務(wù)入門(mén) | 微服務(wù)實(shí)現(xiàn)技術(shù)

3. 微服務(wù)入門(mén) | Spring Cloud Alibaba 入門(mén)

4. 微服務(wù)改造 | Redis Session 分布式登錄

5. 微服務(wù)改造 | 服務(wù)劃分

6. 微服務(wù)改造 | 路由劃分

7. 微服務(wù)改造 | Nacos 注冊(cè)中心

8. 微服務(wù)改造 | Maven 子父工程生成

9. 微服務(wù)改造 | 代碼依賴(lài)同步

10. 微服務(wù)改造 | Open Feign 服務(wù)內(nèi)部調(diào)用

11. Gateway 微服務(wù)網(wǎng)關(guān) | 接口路由

12. Gateway 微服務(wù)網(wǎng)關(guān) | 聚合文檔

13. Gateway 微服務(wù)網(wǎng)關(guān) | 跨域解決

14. Gateway 微服務(wù)網(wǎng)關(guān) | 權(quán)限校驗(yàn)

15. 消息隊(duì)列解耦 | RabbitMQ 項(xiàng)目異步化改造

項(xiàng)目資料

除了項(xiàng)目教程視頻之外，魚(yú)皮還提供了其他的服務(wù)，保證大家都能做出這個(gè)項(xiàng)目，并且直接寫(xiě)到簡(jiǎn)歷上加分！

包括：

• 詳細(xì)的直播筆記

• 完整的項(xiàng)目源碼

• 1 對(duì) 1 答疑解惑

• 專(zhuān)屬項(xiàng)目交流群

• ?? 現(xiàn)成的簡(jiǎn)歷寫(xiě)法（直接寫(xiě)滿(mǎn)簡(jiǎn)歷）

• ?? 項(xiàng)目的擴(kuò)展思路（拉開(kāi)和其他人的差距）

• ?? 項(xiàng)目相關(guān)面試題（提前準(zhǔn)備，面試不懵逼）

加入學(xué)習(xí)

注意，本項(xiàng)目只是《魚(yú)皮原創(chuàng)項(xiàng)目系列教程》的?其中一個(gè)?項(xiàng)目，之前已經(jīng)完結(jié)了 5 個(gè)全棧項(xiàng)目！

如果大家對(duì)魚(yú)皮的原創(chuàng)項(xiàng)目感興趣，歡迎加入?編程導(dǎo)航知識(shí)星球?，加入后不僅可以學(xué)習(xí)往期所有的項(xiàng)目，還能夠跟著魚(yú)皮后續(xù)的直播做新項(xiàng)目。

這樣一套微服務(wù)項(xiàng)目，如果你在其他平臺(tái)去單獨(dú)購(gòu)買(mǎi)，少說(shuō)也要幾百塊了。

已經(jīng)有不少小伙伴學(xué)起來(lái)了，還有很多大家自發(fā)整理的筆記。不得不說(shuō)，做項(xiàng)目真的給了很多同學(xué)一個(gè)堅(jiān)持學(xué)習(xí)的目標(biāo)，大家的動(dòng)力也更足了！沖沖沖！

???? 點(diǎn)擊下方，進(jìn)一步了解魚(yú)皮原創(chuàng)項(xiàng)目系列教程。

https://yuyuanweb.feishu.cn/wiki/SePYwTc9tipQiCktw7Uc7kujnCd