跳到主要内容

前端开发

基于 React - Next.js 项目搭建的前端，具备一定的知识有利于开发。

前端项目在 jnoj/web 目录下。

注意，由于项目是用 docker 部署的，如果你是在部署后，对文件改动是不会立即生效的，需要你重新构建镜像并运行。

你可通过这几个命令让改动生效：

cd jnoj/deployments
sudo docker-compose -f docker-compose.yaml down web
sudo docker-compose -f docker-compose.yaml build web
sudo docker-compose -f docker-compose.yaml up web -d

定制网站配置​

  1. 修改 logo：替换 jnoj/web/src/assets/logo.png 文件。

  2. 修改网站信息，在 jnoj/web/src/setting.json 文件中，该文件的说明如下：

{
  "name": "JNOJ",  # 网站名称
  "briefDescription": "Online Judge", # 简短说明
  "description": "Online Judge for ICPC/IOI", # 描述
  "beian": "" # 备案号，如有，在此处填写会出现在网站底部
}
  1. 定制网站首页内容，在 jnoj/web/src/home/index.tsx 文件中。可能需要你掌握一定的 HTML、CSS、JS 以及 JSX 的使用。

安装开发环境​

建议安装最新长期支持版 Node.js 和 yarn 工具，根据你的系统环境，在网上自行搜索安装教程。

切换至 jnoj/web 目录，执行 yarn install 安装依赖包，执行 yarn dev 会启动该前端项目。

你可能需要配置一下 jnoj/web/.env.development 文件，修改其后端的 API。

如果你采用 docker 启动的后端，后端暴露出来的端口号定义在 8092，你可检查 jnoj/deployments/docker-compose.yaml 文件来查看端口。