在線判題項(xiàng)目簡(jiǎn)歷寫法
在線判題項(xiàng)目簡(jiǎn)歷寫法
注意，以下簡(jiǎn)歷寫法僅供參考，根據(jù)你自己的簡(jiǎn)歷豐富度、以及對(duì)于項(xiàng)目的理解情況有選擇地去寫。如果你自己還沒有實(shí)現(xiàn)項(xiàng)目或者不理解，建議趕緊跟著教程把它弄懂，再寫到簡(jiǎn)歷上！ 此外，本項(xiàng)目系統(tǒng)設(shè)計(jì)的思路，設(shè)計(jì)模式、異步化、應(yīng)用解耦的編程思想、Docker 和單體項(xiàng)目改造微服務(wù)的實(shí)踐，其實(shí)是可以運(yùn)用到你做的其他項(xiàng)目中的，可以把該項(xiàng)目的部分亮點(diǎn)和你之前的項(xiàng)目進(jìn)行整合。
專業(yè)技能
●熟悉前端 Vue 3 開發(fā)，能夠自定義通用的前端開發(fā)模板，包括 Vuex 狀態(tài)管理、權(quán)限管理、布局切換、菜單生成等功能。
●熟悉前端代碼規(guī)范，并能夠使用 ESLint + Prettier + TypeScript 等技術(shù)保證前端項(xiàng)目質(zhì)量。
●熟悉 Arco Design、ByteMD、 Monaco Editor 等組件的使用
●能夠使用 Vue-CLI 腳手架、openapi-typescript-codegen 代碼生成器、VS Code、WebStorm IDE 等開發(fā)工具快速開發(fā)前端項(xiàng)目
項(xiàng)目經(jīng)歷
項(xiàng)目名稱：XX OJ 在線判題系統(tǒng) 建議自己想個(gè)有區(qū)分度的名字，其他名稱參考：
●XX 在線評(píng)測(cè)系統(tǒng) ●XX 題目測(cè)評(píng)系統(tǒng) ●XX 代碼練習(xí)平臺(tái) ●XX 編程學(xué)習(xí)系統(tǒng) ●XX OJ 在線訪問(wèn)：xxx（建議自己部署一下，提供可訪問(wèn)的、簡(jiǎn)短的線上地址） GitHub：xxx（建議把項(xiàng)目放到代碼倉(cāng)庫(kù)中，并且在主頁(yè)文檔里補(bǔ)充項(xiàng)目架構(gòu)圖等信息）
項(xiàng)目介紹
以下文字，括號(hào)里的內(nèi)容表示可選項(xiàng)、或者備注，比如不熟悉前端的同學(xué)就不要寫 Vue 等和前端相關(guān)的內(nèi)容了
精簡(jiǎn)版 適合簡(jiǎn)歷內(nèi)容豐富的同學(xué)
基于 Spring Cloud 微服務(wù) + MQ + Docker（+ Vue 3 + Arco Design）的編程題目評(píng)測(cè)系統(tǒng)。系統(tǒng)能夠根據(jù)管理員預(yù)設(shè)的題目用例對(duì)用戶提交的代碼進(jìn)行執(zhí)行和評(píng)測(cè)；系統(tǒng)中 自主實(shí)現(xiàn)的代碼沙箱 可作為獨(dú)立服務(wù)供其他開發(fā)者調(diào)用。 詳細(xì)版 適合簡(jiǎn)歷內(nèi)容不多的同學(xué) 基于 Spring Boot + Spring Cloud 微服務(wù) + Docker（+ Vue 3 + Arco Design）的編程題目在線評(píng)測(cè)系統(tǒng)。 在系統(tǒng)前臺(tái)，管理員可以創(chuàng)建、管理題目；用戶可以自由搜索題目、閱讀題目、編寫并提交代碼。 在系統(tǒng)后端，能夠根據(jù)管理員設(shè)定的題目測(cè)試用例在 自主實(shí)現(xiàn)的代碼沙箱 中對(duì)代碼進(jìn)行編譯、運(yùn)行、判斷輸出是否正確。 其中，代碼沙箱可以作為獨(dú)立服務(wù)，提供給其他開發(fā)者使用。 主要工作 根據(jù)自己的方向選 6 個(gè)左右去寫并適當(dāng)調(diào)整文案，靈活一點(diǎn)。 強(qiáng)烈建議結(jié)合下面的擴(kuò)展思路多完善下項(xiàng)目，增加一些區(qū)分度！
前端
1 基于 Vue3 + Arco Design 組件庫(kù)，自主實(shí)現(xiàn)了在線做題、題目檢索和管理、提交列表、用戶登錄等頁(yè)面。
2 使用 Vue-CLI 腳手架初始化項(xiàng)目，并自行開發(fā)了全局頁(yè)面布局和通用前端項(xiàng)目模板，便于后續(xù)復(fù)用。
3 使用 TypeScript + ESLint + Prettier + Husky 保證項(xiàng)目編碼和提交規(guī)范，提高項(xiàng)目的質(zhì)量。（雖然是由腳手架自動(dòng)幫你整合了，但你要知道這些技術(shù)各自的作用）
4 全局導(dǎo)航生成：基于 Vue Router 的路由配置文件自動(dòng)生成導(dǎo)航菜單，并通過(guò)給路由的 meta 屬性增加 hidden 字段實(shí)現(xiàn)集中控制頁(yè)面的顯隱。
5 全局權(quán)限管理：通過(guò)給 Vue Router 路由的 meta 屬性增加 access 字段來(lái)定義頁(yè)面權(quán)限，然后通過(guò) beforeEach 全局路由守衛(wèi)集中校驗(yàn)用戶進(jìn)入頁(yè)面的權(quán)限，并進(jìn)一步將權(quán)限管理相關(guān)代碼統(tǒng)一封裝為 access.ts 模塊，簡(jiǎn)化用戶使用。
6 全局狀態(tài)管理：基于 Vuex 定義 User Module 實(shí)現(xiàn)了對(duì)登錄用戶的狀態(tài)存儲(chǔ)，并通過(guò)組合式 API（useStore）在頁(yè)面中訪問(wèn)用戶信息。
7 前后端聯(lián)調(diào)：使用 openapi-typescript-codegen 工具根據(jù)后端 Swagger 接口文檔自動(dòng)生成請(qǐng)求后端的代碼，大幅提高開發(fā)效率。
8 為提高前端開發(fā)效率，使用 IDEA 的 Live Templates 功能自定義了一套基礎(chǔ)前端代碼模板，能夠通過(guò)快捷鍵高效生成代碼。
9 選用 ByteMD 開源 Markdown 文本編輯器組件，引入 gfm 插件（支持表格語(yǔ)法）并進(jìn)一步自行封裝了可復(fù)用的 Editor 和 Viewer，實(shí)現(xiàn)了題目?jī)?nèi)容及答案的編輯功能。
10 基于 Webpack 整合了 Monaco Editor 開源代碼編輯器組件，并進(jìn)一步基于 ref 自行封裝了可復(fù)用的 Editor 和 Viewer，實(shí)現(xiàn)了用戶編寫代碼功能，支持多種語(yǔ)言的高亮。
11 使用 Arco Design 的 Table 組件實(shí)現(xiàn)了題目檢索頁(yè)面，并通過(guò)自定義插槽將后端返回的 JSON 數(shù)據(jù)解析為美觀的格式。
后端
1 系統(tǒng)架構(gòu)：根據(jù)功能職責(zé)，將系統(tǒng)劃分為負(fù)責(zé)核心業(yè)務(wù)的后端模塊、負(fù)責(zé)校驗(yàn)結(jié)果的判題模塊、負(fù)責(zé)編譯執(zhí)行代碼的可復(fù)用代碼沙箱。各模塊相互獨(dú)立，并通過(guò) API 接口和分包的方式實(shí)現(xiàn)協(xié)作。
2 庫(kù)表設(shè)計(jì)：根據(jù)業(yè)務(wù)流程自主設(shè)計(jì)用戶表、題目表、題目提交表，并通過(guò)給題目表添加 userId 索引提升檢索性能。（感興趣的同學(xué)可以自己測(cè)試一下性能的提高比例）
3 自主設(shè)計(jì)判題機(jī)模塊的架構(gòu)，定義了代碼沙箱的抽象調(diào)用接口和多種實(shí)現(xiàn)類（比如遠(yuǎn)程 / 第三方代碼沙箱），并通過(guò) 靜態(tài)工廠模式 + Spring 配置化 的方式實(shí)現(xiàn)了對(duì)多種代碼沙箱的靈活調(diào)用。
4 使用 代理模式 對(duì)代碼沙箱接口進(jìn)行能力增強(qiáng)，統(tǒng)一實(shí)現(xiàn)了對(duì)代碼沙箱調(diào)用前后的日志記錄，減少重復(fù)代碼。
5 由于判題邏輯復(fù)雜、且不同題目的判題算法可能不同（比如 Java 題目額外增加空間限制），選用 策略模式 代替 if else 獨(dú)立封裝了不同語(yǔ)言的判題算法，提高系統(tǒng)的可維護(hù)性。
6 使用 Java Runtime 對(duì)象的 exec 方法實(shí)現(xiàn)了對(duì) Java 程序的編譯和執(zhí)行，并通過(guò) Process 類 的輸入流獲取執(zhí)行結(jié)果，實(shí)現(xiàn)了 Java 原生代碼沙箱。
7 通過(guò)編寫 Java 腳本自測(cè)代碼沙箱，模擬了多種程序異常情況并針對(duì)性解決，如使用守護(hù)線程 + Thread.sleep 等待機(jī)制實(shí)現(xiàn)了對(duì)進(jìn)程的超時(shí)中斷、使用 JVM -Xmx 參數(shù)限制用戶程序占用的最大堆內(nèi)存、使用 黑白名單 + 字典樹 的方式實(shí)現(xiàn)了對(duì)敏感操作的限制。（選 1 - 2 種即可）
8 使用 Java 安全管理器和自定義的 Security Manager 對(duì)用戶提交的代碼進(jìn)行權(quán)限控制，比如關(guān)閉寫文件、執(zhí)行文件權(quán)限，進(jìn)一步提升了代碼沙箱的安全性。
9 為保證沙箱宿主機(jī)的穩(wěn)定性，選用 Docker 隔離用戶代碼，使用 Docker Java 庫(kù)創(chuàng)建容器隔離執(zhí)行代碼，并通過(guò) tty 和 Docker 進(jìn)行傳參交互，從而實(shí)現(xiàn)了更安全的代碼沙箱。
10 使用 VMware Workstation 虛擬機(jī)軟件搭建 Ubuntu Linux + Docker 環(huán)境，并通過(guò) JetBrains Client 連接虛擬機(jī)進(jìn)行實(shí)時(shí) 遠(yuǎn)程開發(fā) ，提高了開發(fā)效率。
11 為提高 Docker 代碼沙箱的安全性，通過(guò) HostConfig 限制了容器的內(nèi)存限制和網(wǎng)絡(luò)隔離，并通過(guò)設(shè)置容器執(zhí)行超時(shí)時(shí)間解決資源未及時(shí)釋放的問(wèn)題。
12 由于 Java 原生和 Docker 代碼沙箱的實(shí)現(xiàn)流程完全一致（編譯、執(zhí)行、獲取輸出、清理），選用模板方法模式定義了一套標(biāo)準(zhǔn)的流程并允許子類自行擴(kuò)展部分流程，提高代碼一致性并大幅簡(jiǎn)化冗余代碼。
13 為防止用戶惡意請(qǐng)求代碼沙箱服務(wù)，（采用 API 簽名認(rèn)證的方式，）給調(diào)用方分配簽名密鑰，并通過(guò)校驗(yàn)請(qǐng)求頭中的密鑰保證了 API 調(diào)用安全。
14 為保證項(xiàng)目各模塊的穩(wěn)定性，選用 Spring Cloud Alibaba 重構(gòu)單體項(xiàng)目，（使用 Redis 分布式 Session 存儲(chǔ)登錄用戶信息，并將項(xiàng)目）劃分為用戶服務(wù)、題目服務(wù)、判題服務(wù)、公共模塊。
15 使用阿里云原生腳手架初始化微服務(wù)項(xiàng)目，并結(jié)合 Maven 子父模塊的配置，保證了微服務(wù)各模塊依賴的版本一致性，避免依賴沖突。
16 通過(guò)工具（JetBrains 的 Find Usage 功能 + 表格整理）梳理微服務(wù)間的調(diào)用關(guān)系，并通過(guò) Nacos + OpenFeign 實(shí)現(xiàn)了各模塊之間的相互調(diào)用，如判題服務(wù)調(diào)用題目服務(wù)來(lái)獲取題目信息。
17 使用 Spring Cloud Gateway 對(duì)各服務(wù)接口進(jìn)行聚合和路由，保護(hù)服務(wù)的同時(shí)簡(jiǎn)化了客戶端的調(diào)用（前端不用根據(jù)業(yè)務(wù)請(qǐng)求不同端口的服務(wù)），并通過(guò)自定義 CorsWebFilter Bean 全局解決了跨域問(wèn)題。
18 使用 Knife4j Gateway 在網(wǎng)關(guān)層實(shí)現(xiàn)了對(duì)各服務(wù) Swagger 接口文檔的統(tǒng)一聚合，無(wú)需通過(guò)切換地址查看各服務(wù)的文檔。
19 為保護(hù)內(nèi)部服務(wù)接口，給接口路徑統(tǒng)一設(shè)置 inner 前綴，并通過(guò)在網(wǎng)關(guān)自定義 GlobalFilter（全局請(qǐng)求攔截器）實(shí)現(xiàn)對(duì)內(nèi)部請(qǐng)求的檢測(cè)和攔截，集中解決了權(quán)限校驗(yàn)問(wèn)題。
20 為防止判題操作執(zhí)行時(shí)間較長(zhǎng)，系統(tǒng)選用異步的方式，在題目服務(wù)中將用戶提交 id 發(fā)送給 RabbitMQ 消息隊(duì)列，并通過(guò) Direct 交換機(jī)轉(zhuǎn)發(fā)給判題隊(duì)列，由判題服務(wù)進(jìn)行消費(fèi)，異步更新提交狀態(tài)。相比于同步，響應(yīng)時(shí)長(zhǎng)由 xx 秒減少至 xx 秒，且系統(tǒng) qps 提升了 xx%（需要自己使用 JMeter 等工具進(jìn)行測(cè)試）。
21 基于自己二次開發(fā)的 Spring Boot 初始化模板 + MyBatis X 插件，快速生成圖表、用戶數(shù)據(jù)的增刪改查。 通用 1 在系統(tǒng)設(shè)計(jì)階段，通過(guò)繪制時(shí)序圖、功能模塊圖、流程圖、分層架構(gòu)圖來(lái)幫助自己梳理業(yè)務(wù)流程。
擴(kuò)展思路 需要大家自行實(shí)現(xiàn)
前端
1 增強(qiáng)前端通用模板的能力，支持在路由文件中配置多套布局
2 增強(qiáng)前端通用模板的能力，支持自動(dòng)生成包含嵌套路由的多級(jí)導(dǎo)航欄
3 優(yōu)化題目管理頁(yè)面，將 json 配置分為多列更美觀地展示 4 題目提交列表頁(yè)面增加一個(gè)刷新、定時(shí)自動(dòng)刷新的按鈕，保證獲取到題目提交的最新狀態(tài)（前端輪詢）
5 增加對(duì)用戶個(gè)人提交題目的管理頁(yè)面
6 增加對(duì)題目提交情況的統(tǒng)計(jì)分析頁(yè)面，給管理員使用 7 使用 Monaco Editor 的 diff editor 功能來(lái)對(duì)比用戶代碼和標(biāo)準(zhǔn)答案代碼的區(qū)別
后端
1 把微服務(wù)項(xiàng)目部署上線，參考教程： 如何快速部署微服務(wù)項(xiàng)目？保姆級(jí)教程
2 增加題目的通過(guò)數(shù)、提交數(shù)統(tǒng)計(jì)，計(jì)算通過(guò)率
3 限制代碼沙箱中最多允許同時(shí)啟動(dòng)的 Docker 容器數(shù)，防止系統(tǒng)過(guò)載（甚至還可以用池化技術(shù)復(fù)用 Docker 容器） 4 更多類型的代碼沙箱實(shí)現(xiàn)，比如使用 AI 進(jìn)行判題？使用第三方服務(wù)（judge0 api）進(jìn)行判題？
6 限制單個(gè)用戶的同時(shí)最大提交數(shù)，合理分配資源。
7 限制單個(gè)用戶的提交頻率，可以通過(guò) Redisson 或者 Sentinel 網(wǎng)關(guān)層限流實(shí)現(xiàn)。
8 實(shí)現(xiàn) ACM 模式（通過(guò)代碼進(jìn)行輸入輸出）的代碼沙箱
9 用同樣的思路或者 Linux 的 cgroup 語(yǔ)法實(shí)現(xiàn)一種其他編程語(yǔ)言的代碼沙箱
10 實(shí)現(xiàn) Special Judge 特判程序的邏輯
11 給判題過(guò)程中的每個(gè)測(cè)試用例增加一個(gè)獨(dú)立的內(nèi)存、時(shí)間占用的統(tǒng)計(jì)
12 可以使用 JWT Token 實(shí)現(xiàn)用戶登錄，在網(wǎng)關(guān)層面通過(guò) token 獲取登錄信息，實(shí)現(xiàn)鑒權(quán)
13 處理消息隊(duì)列的消息重試，避免消息積壓（可以選用死信隊(duì)列）
個(gè)人評(píng)價(jià)
1 有較強(qiáng)的文檔閱讀能力，曾閱讀 Spring Cloud Alibaba 等官方文檔自主學(xué)習(xí)，并能夠運(yùn)用到項(xiàng)目中。
2 有較強(qiáng)的問(wèn)題解決能力，能夠利用 GitHub Issues 區(qū)、AI 工具、搜索引擎、Stack Overflow 等自主解決問(wèn)題
面試題
前端
部分面試題可以參考伙伴匹配系統(tǒng)或聚合搜索平臺(tái)的前端面試題，都是 Vue 項(xiàng)目
**項(xiàng)目中使用了 Vue-CLI 腳手架來(lái)初始化項(xiàng)目，請(qǐng)解釋一下腳手架的作用？**背誦類題目，可以加主觀回答 Vue CLI 是一個(gè)用于快速搭建 Vue.js 項(xiàng)目的腳手架工具，可以通過(guò)交互式命令行的方式快速創(chuàng)建項(xiàng)目初始代碼，并且有選擇地整合前端常用工具和類庫(kù)，能夠快速啟動(dòng)和打包項(xiàng)目。 本項(xiàng)目就是使用了 Vue CLI 工具進(jìn)行初始化的，腳手架自動(dòng)整合了版本相互兼容的 ESLint、TypeScript、Prettier、Webpack 等工具和類庫(kù)，并且提供了本地調(diào)試（dev）和打包（build）命令，我可以更加專注于業(yè)務(wù)頁(yè)面的開發(fā)。 可以通過(guò)閱讀官方文檔進(jìn)一步了解 Vue CLI：https://cli.vuejs.org/zh/guide/ 在項(xiàng)目中使用了 TypeScript、ESLint、Prettier 和 Husky 來(lái)保證項(xiàng)目的編碼規(guī)范，解釋一下它們各自的作用？ 主觀回答 我通過(guò)一系列的工具和技術(shù)保證項(xiàng)目編碼規(guī)范，包括 TypeScript、ESLint、Prettier 和 Husky。
各技術(shù)的作用如下：
●TypeScript：支持靜態(tài)類型檢查功能，用于增強(qiáng)代碼的類型安全性，減少類型相關(guān)的錯(cuò)誤。
●ESLint：代碼檢查工具，用于檢測(cè) JavaScript 的代碼質(zhì)量、風(fēng)格等問(wèn)題，強(qiáng)制開發(fā)者遵守編碼規(guī)范。
●Prettier：代碼格式化工具，能夠根據(jù)配置自動(dòng)格式化代碼，確保代碼的可讀性和一致性。
●Husky：用于管理 Git 鉤子的工具，在 Git 提交操作前自動(dòng)運(yùn)行代碼檢查腳本，確保提交的代碼質(zhì)量和規(guī)范。 如果是團(tuán)隊(duì)協(xié)作開發(fā)的項(xiàng)目，還可以使用代碼審查機(jī)制，讓其他人幫忙審查代碼，減少潛在的 Bug 和編碼不規(guī)范問(wèn)題。
請(qǐng)介紹一下你自定義的前端項(xiàng)目模板的主要功能？ 主觀回答 首先我使用 Vue-CLI 腳手架創(chuàng)建初始化項(xiàng)目，自動(dòng)整合了 TypeScript、ESLint、Prettier、Husky 代碼質(zhì)量保證相關(guān)工具類庫(kù)，并且支持使用 Webpack 完成打包。 在此基礎(chǔ)上，我自主開發(fā)了以下通用功能：
1 全局頁(yè)面布局：復(fù)用導(dǎo)航欄、底部 Footer 欄，并且支持根據(jù)路由切換多套布局
2 全局權(quán)限管理：通過(guò)路由配置指定各頁(yè)面的權(quán)限，當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)自動(dòng)攔截并鑒權(quán)
3 全局狀態(tài)管理：實(shí)現(xiàn)用戶自動(dòng)登錄邏輯，并在 Vuex 中存儲(chǔ)用戶登錄態(tài)
4 導(dǎo)航菜單生成：根據(jù)路由配置自動(dòng)生成導(dǎo)航菜單，支持控制菜單的顯隱
5 用戶登錄注冊(cè)：簡(jiǎn)潔的用戶登錄和注冊(cè)頁(yè)面
6 常用組件引入：引入 ByteMD 文本編輯器、Monaco Editor 代碼編輯器、Moment 日期處理庫(kù)等 后續(xù)開發(fā)新項(xiàng)目時(shí)，我可以直接基于此模板進(jìn)行開發(fā)，無(wú)需重復(fù)編寫業(yè)務(wù)無(wú)關(guān)代碼，大幅提高開發(fā)效率。
項(xiàng)目中使用了 Vue Router 來(lái)進(jìn)行全局導(dǎo)航生成，請(qǐng)?jiān)敿?xì)解釋一下如何根據(jù)路由配置文件自動(dòng)生成導(dǎo)航菜單？ 主觀回答 關(guān)鍵步驟如下：
1 新建全局導(dǎo)航組件
2 組件內(nèi)加載 routes 路由配置文件，獲取所有的路由信息，通過(guò) v-for 遍歷路由生成菜單
3 給菜單綁定跳轉(zhuǎn)事件，點(diǎn)擊后觸發(fā) router.push 進(jìn)行頁(yè)面跳轉(zhuǎn)
4 根據(jù)當(dāng)前 url 修改菜單的 active 狀態(tài)，高亮當(dāng)前頁(yè)面對(duì)應(yīng)的菜單項(xiàng)
5 通過(guò)在 routes 路由配置的 meta 屬性中添加 hideInMenu 字段來(lái)控制菜單的顯隱（權(quán)限控制同理）
項(xiàng)目中使用了全局權(quán)限管理，請(qǐng)?jiān)敿?xì)描述如何通過(guò) Vue Router 的路由守衛(wèi)來(lái)實(shí)現(xiàn)全局權(quán)限控制？ 主觀回答 關(guān)鍵步驟如下：
1 在 routes 路由配置文件中，通過(guò) meta 屬性中添加 access 字段來(lái)定義某個(gè)路由的訪問(wèn)權(quán)限
2 在全局權(quán)限管理文件 access.ts 中，使用 Vue Router 的全局前置路由守衛(wèi)對(duì)頁(yè)面的跳轉(zhuǎn)進(jìn)行監(jiān)聽和攔截，并且在項(xiàng)目入口文件 main.ts 中引入 access.ts 開啟全局權(quán)限管理。 3 每次訪問(wèn)頁(yè)面時(shí)，根據(jù)頁(yè)面對(duì)應(yīng)路由的 access 字段、結(jié)合當(dāng)前用戶的登錄信息，判斷用戶是否有對(duì)應(yīng)的訪問(wèn)權(quán)限。 4 如果滿足權(quán)限，跳轉(zhuǎn)到目標(biāo)頁(yè)面；如果不滿足權(quán)限，重定向頁(yè)面到 403 或者登錄頁(yè)。
項(xiàng)目中使用 Vuex 來(lái)進(jìn)行全局狀態(tài)管理，請(qǐng)解釋為什么在項(xiàng)目中需要全局狀態(tài)管理以及如何使用 Vuex？ 主觀回答 項(xiàng)目中使用 Vuex 來(lái)存儲(chǔ)各頁(yè)面或組件可能都需要獲取的全局信息，比如當(dāng)前登錄用戶信息，便于各個(gè)頁(yè)面和組件之間共享這些信息，不必通過(guò)復(fù)雜的父子組件來(lái)傳遞數(shù)據(jù)，從而簡(jiǎn)化了項(xiàng)目的代碼。 我參考 Vuex 的官方文檔將其運(yùn)用到項(xiàng)目中，大概步驟如下： 1 使用 store 目錄獨(dú)立存儲(chǔ)所有的狀態(tài)文件 2 使用 Vuex 的 modules 特性，定義用戶模塊，用于存儲(chǔ)用戶相關(guān)的狀態(tài) 3 在用戶模塊中，編寫存放登錄用戶信息的 state、更改用戶信息的 mutations 和遠(yuǎn)程獲取用戶信息的 actions 4 在項(xiàng)目的其他組件或頁(yè)面中，可以通過(guò) store.state.user 訪問(wèn)用戶信息、通過(guò) store.dispatch 加載登錄用戶信息。
項(xiàng)目中使用了 Arco Design 的 Table 組件，請(qǐng)介紹下你是如何使用 Table 組件的、使用了其哪些功能？ 主觀回答 我參考官方文檔提供的示例代碼在項(xiàng)目中引入 Table 組件，通過(guò) Table 組件的 columns 數(shù)組屬性定義表格的列，通過(guò) data 屬性傳遞表格的數(shù)據(jù)。 對(duì)于后端返回的復(fù)雜 JSON 字符串，我使用 Table 組件的自定義渲染功能，通過(guò)插槽的語(yǔ)法，自定義了從 JSON 字符串中取值并格式化展示的邏輯，讓表格的展示效果更精美。
項(xiàng)目中使用了 Monaco Editor 開源代碼編輯器組件，請(qǐng)解釋一下它的特點(diǎn)和在項(xiàng)目中的應(yīng)用？ 主觀回答 Monaco Editor 是由微軟開源的代碼編輯器組件，也是知名開發(fā)工具 VS Code 內(nèi)置的編輯器組件，不僅輕量，而且功能十分強(qiáng)大。 比如支持多種編程語(yǔ)言、語(yǔ)法高亮、代碼補(bǔ)全、各種編輯功能、自定義主題、代碼 Diff 等。 在項(xiàng)目中，我引入 Monaco Editor 作為在線做題頁(yè)面的代碼編輯器，給用戶良好的代碼編輯體驗(yàn)。
項(xiàng)目中使用了 ByteMD 文本編輯器組件，請(qǐng)解釋下你是如何封裝了可復(fù)用的 Editor 和 Viewer 組件？ 主觀回答 ByteMD 是由字節(jié)跳動(dòng)開源的 Markdown 文本編輯組件，為了在項(xiàng)目中更方便地使用它，我在其基礎(chǔ)上封裝了 Editor（文本編輯器）和 Viewer（文本瀏覽器）組件。 以 Editor 組件為例，我在組件內(nèi)初始化了 ByteMD 的 editor 并且引入了 gfm、highlight 插件，還給組件提供了 value、handleChange、mode 屬性，便于父組件獲取文本編輯器當(dāng)前的內(nèi)容、根據(jù)需求改變文本編輯器的模式，降低使用成本。
你是如何使用 JetBrains 的 Live Templates 功能來(lái)自定義代碼模板的？ 主觀回答 在項(xiàng)目開發(fā)過(guò)程中，經(jīng)常有一些相似的代碼需要重復(fù)編寫，為了提高效率，我使用 JetBrains 開發(fā)工具自帶的 Live Templates 功能，自己定義了一套代碼模板，具體過(guò)程如下： 1 創(chuàng)建自定義模板分組
2 創(chuàng)建具體的代碼模板，比如新的 Vue 前端頁(yè)面模板，可以通過(guò)自定義表達(dá)式變量動(dòng)態(tài)生成內(nèi)容、或者使用 ?? ?? ?? END 內(nèi)置變量指定生成代碼后光標(biāo)的位置。
3 為該模板配置縮寫（通過(guò)哪些關(guān)鍵字快捷使用模板）和上下文（在哪些編程語(yǔ)言或文件觸發(fā)） 示例模板代碼： 什么是前端的組件？組件之間如何傳遞屬性和事件？ 背誦類題目 前端的組件是指可復(fù)用的、獨(dú)立的 UI 元素，組件通常封裝了特定功能或視圖，可以在項(xiàng)目中被多次使用。組件化也是一種重要的開發(fā)模式，適當(dāng)?shù)胤庋b和復(fù)用組件，有助于提高代碼的可維護(hù)性、可擴(kuò)展性和重用性。
在 Vue 框架中，組件之間可以通過(guò)以下幾種方式傳遞屬性和事件：
1 Props（父?jìng)髯樱和ㄟ^(guò) props 屬性，父組件可以向子組件傳遞數(shù)據(jù)。子組件通過(guò) props 接收父組件傳遞的數(shù)據(jù)。
2 自定義事件（子傳父）：子組件可以通過(guò) $emit 方法觸發(fā)自定義事件，然后父組件通過(guò)在子組件上使用 @或 v-on 指令監(jiān)聽這些事件，以接收子組件的消息。
3 事件總線（兄弟組件）：通過(guò)創(chuàng)建一個(gè)事件總線實(shí)例，不同組件可以通過(guò)事件總線來(lái)進(jìn)行通信。這是一種適用于兄弟組件之間的通信方式。
4 Vuex（狀態(tài)管理）：Vuex 是 Vue.js 的官方狀態(tài)管理庫(kù)，用于管理全局狀態(tài)。不同組件可以通過(guò) Vuex 來(lái)共享和管理應(yīng)用程序的狀態(tài)。
5 $refs（父子組件）：父組件可以通過(guò) ref 屬性引用子組件，并直接訪問(wèn)子組件的屬性和方法。這種方式主要用于父組件控制子組件的行為。
6 插槽（分發(fā)內(nèi)容）：插槽允許父組件將內(nèi)容分發(fā)到子組件的特定位置，以實(shí)現(xiàn)更靈活的組件復(fù)用和布局控制。
什么是 openapi-typescript-codegen 工具？它是如何生成接口調(diào)用代碼的？ 主觀回答 openapi-typescript-codegen 是一個(gè)能夠根據(jù) OpenAPI 文檔自動(dòng)生成 JavaScript 和 TypeScript 客戶端調(diào)用代碼的工具。 使用這個(gè)工具，前端開發(fā)者無(wú)需人工閱讀接口文檔并編寫對(duì)應(yīng)的請(qǐng)求代碼，大幅提高開發(fā)效率。 用法很簡(jiǎn)單，用 npm 安裝完工具后，通過(guò) openapi 命令指定接口文檔地址、輸出目錄以及使用的請(qǐng)求客戶端（比如 Axios）即可。
項(xiàng)目中使用了 Webpack 整合 Monaco Editor，請(qǐng)解釋一下 Webpack 的作用，以及如何整合 Monaco Editor？ 主觀回答 Webpack 是一個(gè) JavaScript 應(yīng)用程序打包工具，它的主要作用是將多個(gè) JavaScript 文件及其依賴打包成一個(gè)或多個(gè)靜態(tài)資源文件，以減少網(wǎng)絡(luò)請(qǐng)求，提高應(yīng)用性能，并且支持處理各種前端資源，如樣式、圖片、字體等。 在本項(xiàng)目中，由于使用了 Vue-CLI 腳手架初始化項(xiàng)目，需要在 vue.config.js 文件中定義 Webpack 的資源整合配置。這里參考了 monaco-editor-webpack-plugin 的官方文檔，通過(guò)引入 MonacoWebpackPlugin 來(lái)引入 Monaco Editor，示例代碼如下：
請(qǐng)介紹一下 Vue 3 的新特性和與 Vue 2 相比有哪些變化？ 背誦類題目，也可以有主觀回答 詳細(xì)參考官方文檔： Vue 3 遷移指南 | Vue 3 遷移指南 1）更快的渲染性能：Vue 3 引入了新的響應(yīng)式系統(tǒng)（Proxy-based），相比 Vue 2 的 Object.defineProperty，提供了更高效的數(shù)據(jù)監(jiān)聽和更新機(jī)制，從而提高了渲染性能。 2）Composition API：Composition API 是 Vue 3 的核心特性之一，它允許開發(fā)者更靈活地組織和重用組件邏輯。它將組件的邏輯拆分為可復(fù)用的函數(shù)式組合，并提供了 setup () 函數(shù)來(lái)配置組件。 3）Teleport：Vue 3 引入了 Teleport 組件，可以輕松將內(nèi)容渲染到 DOM 中的不同位置，這在處理模態(tài)框、對(duì)話框等場(chǎng)景時(shí)非常有用。 4）Fragments：Vue 3 支持 Fragments，允許組件返回多個(gè)根節(jié)點(diǎn)，而無(wú)需包裹額外的 HTML 元素。 需要注意的是，雖然 Vue 3 引入了許多新特性，但它仍然保持了 Vue 2 的核心理念和語(yǔ)法，因此 Vue 2 的開發(fā)者可以相對(duì)容易地遷移到 Vue 3，并逐步采用新的特性和優(yōu)化。
什么是 Vue 中的響應(yīng)式變量？ 背誦類題目，但可以加主觀回答 響應(yīng)式變量是一種特殊的 JavaScript 變量，它與 Vue 的數(shù)據(jù)綁定系統(tǒng)緊密關(guān)聯(lián)。Vue 會(huì)自動(dòng)監(jiān)視響應(yīng)式變量，當(dāng)響應(yīng)式變量的值發(fā)生變化時(shí)，相關(guān)的 Vue 組件會(huì)自動(dòng)更新視圖以反映這些變化。 在項(xiàng)目開發(fā)中，我們通常會(huì)把后端接口返回的數(shù)據(jù)存到響應(yīng)式變量中，從而更方便地驅(qū)動(dòng)頁(yè)面視圖的更新，展示返回的數(shù)據(jù)。 Vue 2 項(xiàng)目中，通常把響應(yīng)式變量定義在 Data 屬性中；Vue 3 項(xiàng)目中，可以使用 ref 或者 reactive 定義響應(yīng)式變量。
項(xiàng)目是否有上線？你是如何實(shí)現(xiàn)前端頁(yè)面部署的？ 主觀回答 項(xiàng)目有實(shí)際上線。我是通過(guò)本地打包 + Nginx 實(shí)現(xiàn)了前端頁(yè)面部署。 具體過(guò)程如下： 1 購(gòu)買云服務(wù)器
2 安裝和初始化寶塔 Linux 面板，會(huì)自動(dòng)安裝 Nginx 服務(wù)器
3 在寶塔上創(chuàng)建一個(gè)網(wǎng)站
4 本地使用 npm run build 命令打包項(xiàng)目，得到 dist 網(wǎng)站靜態(tài)文件目錄
5 上傳本地打包好的 dist 目錄到服務(wù)器，然后配置 Nginx 指向文件目錄路徑，即可訪問(wèn)前端靜態(tài)文件 還有其他的部署方式，比如使用 Vercel 等 Serverless 服務(wù)一鍵部署到第三方托管服務(wù)器，但由于本人有服務(wù)器、并且想實(shí)踐下 Nginx 配置，所以沒有選擇這種方式。
通用 請(qǐng)介紹一下本項(xiàng)目的完整業(yè)務(wù)流程？ 管理員創(chuàng)建題目、添加題目的測(cè)試用例 => 用戶自由搜索題目 => 用戶閱讀題目、編寫并提交代碼 => 系統(tǒng)后端調(diào)用 代碼沙箱，對(duì)代碼進(jìn)行編譯、運(yùn)行 => 判題服務(wù)根據(jù)管理員設(shè)定的題目測(cè)試用例判斷用戶提交是否正確 => 用戶可以查看提交記錄和判題結(jié)果。 其中，代碼沙箱可以作為獨(dú)立服務(wù)，提供給其他開發(fā)者使用。
有調(diào)研過(guò) OJ 系統(tǒng)的實(shí)現(xiàn)方案么？ 有的，我在開發(fā) OJ 系統(tǒng)前，調(diào)研了非常多的開源項(xiàng)目，比如 HOJ、hustoj 等，總結(jié)了 5 種常見的實(shí)現(xiàn)方案。 1 自部署現(xiàn)成的開源 OJ 系統(tǒng) 2 使用現(xiàn)成的執(zhí)行代碼接口 3 自主開發(fā) OJ 系統(tǒng)和代碼沙箱 4 利用 AI 實(shí)現(xiàn)判題 5 通過(guò)類似爬蟲的方式調(diào)用其他網(wǎng)站的判題接口 詳情可以閱讀：OJ 系統(tǒng)的主流實(shí)現(xiàn)方案
請(qǐng)介紹一下判題的具體流程和方法？ 判題步驟如下： 1 首先根據(jù)用戶的提交 id 獲取到用戶的代碼、選擇的編程語(yǔ)言、題目測(cè)試用例、題目執(zhí)行限制等信息。 2 判題服務(wù)調(diào)用代碼沙箱服務(wù)執(zhí)行用戶代碼，獲取到每組測(cè)試用例對(duì)應(yīng)的輸出結(jié)果、代碼執(zhí)行信息（比如內(nèi)存、時(shí)間占用等）。 3 對(duì)比用戶的輸出結(jié)果和正確的輸出結(jié)果，并判斷代碼的執(zhí)行信息是否符合題目執(zhí)行限制，得出判題結(jié)果，并修改數(shù)據(jù)庫(kù)內(nèi)對(duì)應(yīng)的提交信息。 請(qǐng)介紹一下代碼沙箱的作用？代碼沙箱和判題服務(wù)有什么關(guān)系？ 代碼沙箱的作用：在隔離的環(huán)境中編譯并執(zhí)行代碼，得到運(yùn)行結(jié)果?？梢宰鳛楠?dú)立的項(xiàng)目或服務(wù)，提供給其他的需要執(zhí)行代碼的項(xiàng)目去使用。
代碼沙箱和判題服務(wù)的關(guān)系： ●代碼沙箱：只負(fù)責(zé)接受代碼和輸入，返回編譯運(yùn)行的結(jié)果，不負(fù)責(zé)判題 ●判題模塊：調(diào)用代碼沙箱，把代碼和輸入用例交給代碼沙箱去執(zhí)行 具體交互過(guò)程如下圖： (一組程序輸出，執(zhí)行信息，執(zhí)行狀態(tài)，執(zhí)行環(huán)境信息) 根據(jù)規(guī)則來(lái)判題 (比如對(duì)比輸入輸出是否一致 1, 發(fā)送題目的代碼，題目的輸入用例 二者通過(guò) AP 交互，實(shí)現(xiàn)解幫 得到一組運(yùn)行結(jié)果 3, 返回執(zhí)行結(jié)果 , 編譯執(zhí)行代碼 編程語(yǔ)言等 判題模塊 代碼沙箱 在開發(fā)過(guò)程中，你遇到過(guò)比較復(fù)雜的技術(shù)問(wèn)題或挑戰(zhàn)嗎？如果有，請(qǐng)談?wù)勀闶侨绾谓鉀Q這些問(wèn)題的？ 可以從以上任意一道主觀的面試題出發(fā)去講，比如你在開發(fā)多種代碼沙箱的實(shí)現(xiàn)方式（Java 原生和 Docker）發(fā)現(xiàn)有大量的重復(fù)代碼，不利于修改和維護(hù)，想到使用模板方法來(lái)解決；或者改造項(xiàng)目為微服務(wù)后發(fā)現(xiàn)無(wú)法在題目服務(wù)中獲取到用戶信息，想到把項(xiàng)目登錄方式由本地 Session 改造為基于 Redis 的分布式 Session 等。
#投遞幾十家公司，到現(xiàn)在0offer，大家都一樣嗎##?？蛣?chuàng)作賞金賽##面試之前應(yīng)該如何準(zhǔn)備？##如何看待應(yīng)屆生身份？#
這個(gè)oj項(xiàng)目在哪找捏
