CxCS-OJ-frontend: 一个在线 OJ 判题系统 —— 前端系统技术： Vue3、Vue-CLI脚手架、Vue状态管理、Arco Design组件库、OpenAPI 代码生成

# CxCS OJ 在线算法测评平台
### [项目前端]

## 项目介绍
基于Vue3+Arco Design 组件库，使用Vue-CLI脚手架初始化项目, 自主实现了在线做题、题目检索和管理、提交列表、用户登录等页面。

### 项目技术
1. 使用TypeScript+ESLint+Prettier+Husky 保证项目编码和提交规范，提高项目的质量。
2. 全局导航生成：基于Vue Router 的路由配置文件自动生成导航菜单，并通过给路由的 meta 属性增加 hidden字段实现集中控制页面的显隐。
3. 全局权限管理：通过给Vue Router 路由的meta属性增加 access 字段来定义页面权限，然后通过
beforeEach全局路由守卫集中校验用户进入页面的权限，并进一步将权限管理相关代码统一封装为
access.ts 模块，简化用户使用。
4. 全局状态管理：基于Vuex定义User Module实现了对登录用户的状态存储，并通过组合式API
(useStore）在页面中访问用户信息。
5. 前后端联调：使用 openapi-typescript-codegen 工具根据后端 Swagger 接口文档自动生成请求后端的代
码，大幅提高开发效率。

### 版本

node.js : `18.16.0`

npm : `9.5.1`

### 仓库地址
- [项目后端 (微服务版)](https://gitee.com/frost-blowing-under-dust/cxcs-oj-microservice-backend)
- [项目后端 (非微服务版 当前项目)](https://gitee.com/frost-blowing-under-dust/cxcs-oj-backend)
- [项目前端](https://gitee.com/frost-blowing-under-dust/cxcsoj-frontend)
- [代码沙箱](https://gitee.com/frost-blowing-under-dust/cx-cs-oj-code-sand-box)

## 项目启动

修改 OpenAPI 请求的后端地址
`cxcsoj-frontend\generated\core\OpenAPI.ts`
```ts
export const OpenAPI: OpenAPIConfig = {
    BASE: 'http://localhost:8121', // 普通版后端地址
    // BASE: 'http://localhost:8121', // 微服务版 后端地址
    VERSION: '1.0',
    WITH_CREDENTIALS: true,
    CREDENTIALS: 'include',
    TOKEN: undefined,
    USERNAME: undefined,
    PASSWORD: undefined,
    HEADERS: undefined,
    ENCODE_PATH: undefined,
};
```

### 安装
```
npm install
```

### 启动
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Cli脚手架](https://cli.vuejs.org/config/).

CxCS/CxCS-OJ-frontend

简介

发行版

贡献者

近期动态

CxCS/CxCS-OJ-frontend .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

CxCS/CxCS-OJ-frontend