# fnd-oj **Repository Path**: kchnb/fnd-oj ## Basic Information - **Project Name**: fnd-oj - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-12-27 - **Last Updated**: 2024-03-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Online Judge

## ⚡️ 框架介绍 Online Judge，集成全面的系统配置，优质模板，常用组件，服务于在线做题的前台项目。 使用的技术框架： `Vue3 + Vite + Typescript + Navie UI + Express` ## 💚 特性 - [Naive UI](https://www.naiveui.com/zh-CN/os-theme)：Vue3 的组件库，超过 80 个组件，全量使用 TypeScript 编写，和项目的 TypeScript 项目无缝衔接。 - [Vite](https://cn.vitejs.dev/)：下一代的前端工具链，为开发提供极速响应。 - [Vue3](https://cn.vuejs.org/)：易学易用，性能出色，适用场景丰富的 Web 前端框架。 - [TypeScript](https://ts.nodejs.cn/)：TypeScript 是一种基于 JavaScript 构建的强类型编程语言，可为你提供任何规模的更好工具。 - [Express](https://www.expressjs.com.cn/)：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 ## 🎉 预览 [项目地址](http://182.92.161.222:5199) 自行注册，登录即可 ## 😃 准备 - [Node.js 18.0.0](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境 - [Visual Studio Code ](https://code.visualstudio.com/Download) 安装 ## 🌈 开发使用 - 克隆项目源码 ``` git clone https://gitee.com/kchnb/fnd-oj.git ``` - 进入项目目录 ``` cd fnd-oj ``` - 安装依赖 > 注意：受国内网络环境影响，安装 npm 包比较慢，建议设置国内镜像源 ``` npm config set registry https://registry.npm.taobao.org/ ``` ``` npm install ``` - 配置环境变量（.env 文件） ``` # 后端服务地址 VITE_SERVER_HOST=http://182.92.161.222:8086 # Node端口 VITE_NODE_SERVER_PORT=5199 # 开发环境前端服务端口 VITE_SERVER_PORT=5188 # BASEURL VITE_BASE_URL=/server # 当前环境 NODE_ENV=production ``` - 开发环境运行 > 注意：同时启动 vite 服务和 node 服务 ``` npm run dev ``` - 编译打包 ``` npm run build ``` - 生产环境启动 ``` npm run start ``` - 生产环境守护进程运行 > 注意：需要安装 pm2 插件 ``` pm2 start npm -- run start ``` ## ✨ 开发者须知 1. **服务端服务** - Node 端服务框架使用 [Express.js](https://expressjs.com/)。 - 代码采用 TypeScript 编写，上线之前需要编译，编译代码：`npm run build:server`，编译后的地址为：/dist/server。 - 运行模式分为：development / production 。 上线后需要制定环境变量：`NODE_ENV = "production"` - Node 端及 Vue 端都采用 ESM，禁止使用 commonjs。即不要使用 require， package.json 中添加 ` "type": "module",` ，已强制项目采用 ESM 方式。 - 服务端环境变量暂时只能使用 .env 文件，.env.development，.env.production 及 .env.{mode} 不能读取。 2. **代理转发** - 服务端默认开启代理转发功能,路由由/server 开头的 http 请求都会自动转发到 VITE_SERVER_HOST 变量的服务端地址，如果需要添加多个转发地址，如下修改： ```typescript // express.ts line 20 app.use("/${你的转发开头}", proxy(process.env.OTHER_SERVER_HOST)); ``` - 代理转发到的后端地址需要在环境变量中指定：`OTHER_SERVER_HOST=http://xxx` 3. **日志** Node 端日志采用 winston + morgan 进行采集，输出包括终端和文件，文件最大保留 30 天。 4. **权限指令** - 权限存储于 pinia 中的 account 对象中。 - 权限在 mounted 和 updated 后才会调用，即服务端返回的可能存在用户无权限看到的 dom ，所以请酌情使用。 - 调用权限采用在 dom 上使用 `v-permission:role=”auth”` 即可，表示当前 dom 需要角色 role 或者存在权限 auth 方可显示，角色优先级高于权限：超管（角色为 admin 拥有所有权限）> 角色 > 权限。 - JS 代码中可以调用 `hasPermission(auth)` 来判断当前用户是否拥有 auth 权限。 5. **路由** - 存放于 `src/router/routes/constants.ts` 里的路由是项目包含的所有路由。 - 动态路由由后台返回菜单列表与所有路由配置进行递归查找处理，字段配置见菜单模块，由前端决定，可与后台商议。 6. **状态管理 pinia 模块的使用** - mock 状态管理模块使用相关说明 在项目根目录的 src/store/modules 下根据功能模块划分，书写全局管理状态。 在 src/stores/modules/index.ts 文件中统一导入，并对外暴漏。 - Naive-UI 全局化配置 以状态管理的方式保存到 designSetting.ts 中，并对外暴漏修改方法，统一进行管理。默认：亮色主题，中文。自定义主题配置同样在 designSetting 中，并通过 themeOverrides 向外暴漏。 在 src/plugins/naiveComponent.ts 中使用按需引入的方式，全局引入 Naive-UI 组件，有利于 tree shaking(摇树优化)，减小打包体积。 7. **Meta 支持** 在 vue2 项目中已有比较成熟的解决方案 [vue-meta](https://github.com/nuxt/vue-meta)，但在 vue3 项目中 vue-meta 仍在测试阶段（官网原话，Vue3 support for vue-meta is considered in mostly-stable-alpha stage），且结合路由完成 Meta 自动注入的能力还不具备，因此本系统暂不使用。 通过路由导航守卫（src/router/guard/metainfo.ts）拦截路由信息中 Title 信息，追加到浏览器 Title 中。 ## 🤖 生产配置 - 阿里云地址：`182.92.161.222` - 服务部署地址`/www/node/fnd-oj` ## 👷 开发者 ​ [@kouchuanhua](https://gitee.com/kchnb)