【107】前端模块获取与运行

最新推荐文章于 2024-08-25 09:57:22 发布

时叶Shey

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量308

点赞数 3

分类专栏： OJ OnlineJudge 二开记录与学习文章标签：前端

本文链接：https://blog.csdn.net/m0_73331512/article/details/140275843

版权

OJ OnlineJudge 二开记录与学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

获取代码

访问官方代码仓库：
GitHub - QingdaoU/OnlineJudgeFE: A multiple pages app built for OnlineJudge
复制仓库的下载地址：

https://github.com/QingdaoU/OnlineJudgeFE.git

下载到本地

打开 WSL Ubuntu，打开专门放这个 OJ 代码的文件夹，并进入这个文件夹：

将 OnlineJudgeDeploy 代码仓库下载到本地（直接复制下面的命令）：

git clone https://github.com/QingdaoU/OnlineJudgeFE.git && cd OnlineJudgeFE

慢慢等待下载到本地就可以了，不行的话多试几遍：

打开前端项目

安装 VS Code

在此之前，先要安装 VS Code，并添加到环境变量中，方便后面的操作。
Visual Studio Code - Code Editing. Redefined

具体安装过程不写了，记得勾选添加到环境就行。

使用 VS Code 打开项目

先切换到前端项目的文件夹：

输入 VS Code 的命令：

code .

调用 VS Code 打开（期间要下载支持，全部允许就行了）：

目录结构

.
├── LICENSE
├── README.md
├── build																					项目构建相关webpack相关
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vendor-manifest.json
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.dll.conf.js
│   └── webpack.prod.conf.js
├── config																				项目配置目录，端口之类的
│   ├── dev.env.js																开发环境的配置文件
│   ├── index.js
│   └── prod.env.js																生产环境的配置文件
├── deploy																				部署相关配置和脚本
│   ├── Dockerfile
│   ├── nginx.conf
│   ├── run.sh
│   └── sentry_release.sh
├── package-lock.json															锁定依赖版本，确保安装的依赖版本一致
├── package.json																	项目配置文件
├── src																						主要目录，页面等
│   ├── assets																		静态资源文件，如图片、图标等
│   ├── i18n																			国际化文件，包含不同语言的翻译
│   │   ├── admin																	后台管理国际化文件
│   │   │   ├── en-US.js													英语（US）
│   │   │   ├── zh-CN.js													中文简体
│   │   │   └── zh-TW.js													中文繁体
│   │   ├── index.js
│   │   └── oj																		前台国际化文件
│   │       ├── en-US.js
│   │       ├── zh-CN.js
│   │       └── zh-TW.js
│   ├── pages																			页面组件，服务端渲染
│   │   ├── admin																	后台管理页面
│   │   │   ├── App.vue
│   │   │   ├── api.js
│   │   │   ├── components												组件
│   │   │   │   ├── Accordion.vue									手风琴组件
│   │   │   │   ├── CodeMirror.vue								
│   │   │   │   ├── KatexEditor.vue								Katex编辑器组件
│   │   │   │   ├── Panel.vue
│   │   │   │   ├── ScreenFull.vue
│   │   │   │   ├── SideMenu.vue									侧边菜单组件
│   │   │   │   ├── Simditor.vue
│   │   │   │   ├── TopNav.vue										顶部导航组件
│   │   │   │   ├── btn
│   │   │   │   │   ├── Cancel.vue								取消按钮组件
│   │   │   │   │   ├── IconBtn.vue								图标按钮组件
│   │   │   │   │   └── Save.vue									保存按钮组件
│   │   │   │   ├── infoCard.vue									信息卡片组件
│   │   │   │   └── simditor-file-upload.js
│   │   │   ├── index.html
│   │   │   ├── index.js
│   │   │   ├── router.js
│   │   │   ├── style.less
│   │   │   └── views															视图界面
│   │   │       ├── Home.vue											管理首页
│   │   │       ├── contest												竞赛管理页面
│   │   │       │   ├── Contest.vue
│   │   │       │   └── ContestList.vue
│   │   │       ├── general												通用
│   │   │       │   ├── Announcement.vue					公共页面
│   │   │       │   ├── Conf.vue
│   │   │       │   ├── Dashboard.vue
│   │   │       │   ├── JudgeServer.vue						判题服务
│   │   │       │   ├── Login.vue									登录管理页面
│   │   │       │   ├── PruneTestCase.vue
│   │   │       │   └── User.vue									用户管理页面
│   │   │       ├── index.js
│   │   │       └── problem
│   │   │           ├── AddPublicProblem.vue			增加公共题目
│   │   │           ├── ImportAndExport.vue				导入和导出题目
│   │   │           ├── Problem.vue								题目
│   │   │           └── ProblemList.vue						题目列表
│   │   └── oj																		前台页面
│   │       ├── App.vue
│   │       ├── api.js
│   │       ├── components												组件
│   │       │   ├── CodeMirror.vue								
│   │       │   ├── Highlight.vue									高亮
│   │       │   ├── NavBar.vue										导航条
│   │       │   ├── Pagination.vue
│   │       │   ├── Panel.vue
│   │       │   ├── mixins
│   │       │   │   ├── emitter.js
│   │       │   │   ├── form.js
│   │       │   │   ├── index.js
│   │       │   │   └── problem.js
│   │       │   └── verticalMenu
│   │       │       ├── verticalMenu-item.vue
│   │       │       └── verticalMenu.vue
│   │       ├── index.html
│   │       ├── index.js
│   │       ├── router
│   │       │   ├── index.js
│   │       │   └── routes.js
│   │       └── views															页面
│   │           ├── contest												竞赛页面
│   │           │   ├── ContestDetail.vue					竞赛详情
│   │           │   ├── ContestList.vue						竞赛列表
│   │           │   ├── children									子页面
│   │           │   │   ├── ACMContestRank.vue
│   │           │   │   ├── ACMHelper.vue
│   │           │   │   ├── ContestProblemList.vue
│   │           │   │   ├── ContestRank.vue
│   │           │   │   ├── OIContestRank.vue
│   │           │   │   └── contestRankMixin.js
│   │           │   └── index.js
│   │           ├── general												通用
│   │           │   ├── 404.vue
│   │           │   ├── Announcements.vue
│   │           │   └── Home.vue
│   │           ├── help													帮助
│   │           │   ├── About.vue
│   │           │   └── FAQ.vue
│   │           ├── index.js
│   │           ├── problem												问题页面
│   │           │   ├── Problem.vue
│   │           │   ├── ProblemList.vue
│   │           │   └── chartData.js
│   │           ├── rank													排序页面
│   │           │   ├── ACMRank.vue
│   │           │   └── OIRank.vue
│   │           ├── setting												设置页面
│   │           │   ├── Settings.vue
│   │           │   ├── children
│   │           │   │   ├── AccountSetting.vue
│   │           │   │   ├── ProfileSetting.vue
│   │           │   │   └── SecuritySetting.vue
│   │           │   └── index.js
│   │           ├── submission										提交页面
│   │           │   ├── SubmissionDetails.vue
│   │           │   └── SubmissionList.vue
│   │           └── user													用户相关页面
│   │               ├── ApplyResetPassword.vue
│   │               ├── Login.vue									登录
│   │               ├── Logout.vue								登出
│   │               ├── Register.vue							注册
│   │               ├── ResetPassword.vue					重置密码
│   │               └── UserHome.vue							用户首页
│   ├── plugins																		插件目录，包含项目使用的插件
│   │   ├── highlight.js													高亮插件
│   │   └── katex.js															Katex数学插件
│   ├── store																			状态管理目录，用于应用的状态管理
│   │   ├── index.js
│   │   ├── modules
│   │   │   ├── contest.js												竞赛状态管理
│   │   │   └── user.js														用户状态管理
│   │   └── types.js
│   ├── styles																		样式文件，包含项目的LESS样式
│   │   ├── common.less
│   │   ├── index.less
│   │   ├── iview-custom.less
│   │   └── markdown.less
│   └── utils																			工具函数目录，包含项目中用到的辅助函数
│       ├── constants.js
│       ├── filters.js
│       ├── sentry.js
│       ├── storage.js														本地化存储
│       ├── time.js
│       └── utils.js
├── static																				静态文件，js,css文件
│   ├── css
│   │   └── loader.css
│   └── js
│       └── vendor.dll.b64803b.js
└── yarn.lock