# 6.4. 使用说明 ## 6.4.1. 安装和初始化 运行本项目需要两个部分，文件夹名分别为frontend和backend，代表前端和后端的代码。 运行前端首先需要下载node js，推荐版本为8.12.0或14.12.0。在frontend文件夹下运行`npm install`命令，该命令会根据package.json文件下载所需的依赖等配置，运行后文件夹里会多出一个名为ndoe\_modules的文件夹。 然后将 NODE\_ENV 环境变量设置为 development，告诉 Node.js 应用程序你正在使用开发环境，对于linux用户，使用 ```bash export NODE_ENV=development ``` 对于windows用户，使用 ```bash set NODE_ENV=development ``` 接下来运行`npm run build:dll`，该命令会使用Webpack打包你的项目中的依赖库，并生成一个 DLL（动态链接库）文件。然后设置TARGET变量为项目的后端地址，如127.0.0.1:8000. 对于linux用户，使用 ```bash export TARGET=http://Your-backend ``` 对于windows用户，使用 ```bash set TARGET=http://Your-backend ``` 可通过查看TARGET变量的值检验是否设置正确。最后使用`npm run dev`指令，前端项目会运行在本地的8080端口上，若最终终端信息如下，说明前端配置成功，并且会自动跳转到前端的页面 ![前端运行成功](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-bc476349c0a2ca000f65697d5bc651a5bc43acaa%2F%E5%89%8D%E7%AB%AF%E8%BF%90%E8%A1%8C%E6%88%90%E5%8A%9F.jpg?alt=media) 运行后端，首先需要一个支持项目运行的环境，具体配置在requirements.txt中，运行`pip install -r requirements.txt`指令安装，推荐使用conda配置虚拟环境。配置好环境后，在backend文件夹下，执行脚本文件init\_db.sh初始化数据库，然后运行`python managy.py runserver 0.0.0.0:8000`，将服务器启动在本地8000端口上，若最终终端信息如下，说明后端配置成功 ![后端运行成功](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-bc2de56db5d4ed3970b9df30fca4917770b72e1b%2F%E5%90%8E%E7%AB%AF%E8%BF%90%E8%A1%8C%E6%88%90%E5%8A%9F.jpg?alt=media) ## 6.4.2. 运行步骤 ### 6.4.2.1. 登陆与注册 登录与注册按钮在页面右上角 ![登录注册](https://github.com/BJUT-Software-Course-Design/docs/blob/main/images/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C.jpg) 若未注册过账户，首先点击注册按钮跳转到注册页面，输入要求信息即可。在角色这一栏有两个选项，分别为学生和教师，因为教师拥有网站的管理员权限，可管理题目和作业，因此为教师设置了邀请码。在具体生产环境中，教师需要询问网站拥有者，也即超级管理员获得邀请码。为方便课设检查，我们在此处给出邀请码：邀请码为12345。 ![注册](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-6052676336c313536aca9ad1f62d7f6d66a69692%2F%E6%B3%A8%E5%86%8C.jpg?alt=media) 注册好后，自动跳转到登录界面，正确输入账号密码后即可登录使用网站 ![登录](https://github.com/BJUT-Software-Course-Design/docs/blob/main/images/%E7%99%BB%E5%BD%95.jpg) ### 6.4.2.2. 使用题库 题库界面如下图所示 ![题库](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-172e27d6b019cbb894b444d85785e12ac32d7ac5%2F%E9%A2%98%E5%BA%93.jpg?alt=media) 点击上方题目选项后进入题库页面，可点击某一道题目进入对应题目的详情页面，如题目A+B, 页面如下 ![题目详情](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-c8710ac9411501ca1c25c7124fc7ba5d3cba6666%2F%E9%A2%98%E7%9B%AE%E8%AF%A6%E6%83%85.jpg?alt=media) 可查看题目描述、题目输入与题目输出的信息，同时提供了测试样例以及题目提示 往下滑动可看到题目的答题部分 ![答题](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-2c1abec3e41142f529cc95c13cb8b924e2d8b14b%2F%E7%AD%94%E9%A2%98.jpg?alt=media) 左上角可选择语言，目前支持C、C++、python、Java。语言下拉框还可选择JavaScript和Golang，不过目前我们没有实现。 语言下拉框旁边两个按钮分别表示重置代码、上传文件，点击右下角提交后，网站会对代码进行编译与评分。 右上角主题会更换代码框的主题，目前有三种，下面展示深色主题 ![深色主题](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-fb73aa6ef9f006c745b9c9c96d6be5a62d0aa667%2F%E6%B7%B1%E8%89%B2%E4%B8%BB%E9%A2%98.jpg?alt=media) 提交后左下角会显示具体的信息 ![提交结果](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-df8f88ded12e1cdc2a8706259225320948d7c8c8%2F%E6%8F%90%E4%BA%A4%E7%BB%93%E6%9E%9C.jpg?alt=media) 点击编译失败按钮可以看到错误详情 ![错误详情](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-7f84c5832efed707b19701b0ad5c7edfc4052bed%2F%E9%94%99%E8%AF%AF%E8%AF%A6%E6%83%85.jpg?alt=media) 点击题目描述页面右上角的提交信息按钮，可看到所有用户在该题目上的提交情况 ![提交信息](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-beb5b829a181a4cc2593fb95afb211e2d08b5b9d%2F%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF.jpg?alt=media) 点击对应题目ID，可查看这次评判的具体情况；点击问题，可进入该题目的详情页面。点击作者，可进入作者个人页面 ![作者个人页面](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-54ea6bff8163765df7b239b09c647d793898179a%2F%E4%BD%9C%E8%80%85%E4%B8%AA%E4%BA%BA%E9%A1%B5%E9%9D%A2.jpg?alt=media) ### 6.4.2.3. 题库管理(仅限教师或管理员) 通过在网址后加上/admin，或者点击右上角的后台管理可进入管理页面 ![后台管理](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-9dd364803fd83d88db297bc31beae50bf63e3e40%2F%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86.jpg?alt=media) ![管理网址](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-27e836b518e654ed1b8fc3ce807caffedbe69d84%2F%E7%AE%A1%E7%90%86%E7%BD%91%E5%9D%80.jpg?alt=media) 教师的管理页面如下 ![教师管理](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-7d48dd99026e3bab5ff284976c20ffcbb85973db%2F%E6%95%99%E5%B8%88%E7%AE%A1%E7%90%86.jpg?alt=media) 问题列表如下 ![问题列表](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-0f8671979e72ffb69fed1039299e5a5569f614ff%2F%E9%97%AE%E9%A2%98%E5%88%97%E8%A1%A8.jpg?alt=media) 右侧三个按钮分别为编辑、下载测试用例和删除题目 编辑题目页面即为增加题目页面 ![编辑题目1](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-77dda83aaa04b084963eec18849518826859bf5d%2F%E7%BC%96%E8%BE%91%E9%A2%98%E7%9B%AE1.jpg?alt=media) ![编辑题目2](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-52577ef98994a5be8a91e84135839c06d45d37cf%2F%E7%BC%96%E8%BE%91%E9%A2%98%E7%9B%AE2.jpg?alt=media) ![编辑题目3](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-755d13a2efab9fd75b7c68aa8df08e264959b547%2F%E7%BC%96%E8%BE%91%E9%A2%98%E7%9B%AE3.jpg?alt=media) ![编辑题目4](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-0a6d53122c38716b9925427f8ccd332882e767b7%2F%E7%BC%96%E8%BE%91%E9%A2%98%E7%9B%AE4.jpg?alt=media) 上方每一个文本框类似日新工大的作业提交框，支持改变字体、添加序号、上传图片和文件等功能，也支持markdown语言，在这里着重说明测试用例的格式。 每一道题的测试用例用x.in、x.out文件表示第x个测试用例的输入与输出，完成后将所有测试用例打包为压缩文件，然后上传到网站即可，上传文件最大为2M。具体如下： ![上传测试用例](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-ab4cadbdae045e2612894fd9838638cf76499673%2F%E4%B8%8A%E4%BC%A0%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B.jpg?alt=media) 下面是导入导出题目界面 ![导入导出题目](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-2fced46be879ba6e15bb01bd9f92dc13cf7541c7%2F%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA%E9%A2%98%E7%9B%AE.jpg?alt=media) 点击左边的方框可选择导出的题目 ![导出题目](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-d695cbb68f98dd86ff120a4182f9e2eaf0975ac0%2F%E5%AF%BC%E5%87%BA%E9%A2%98%E7%9B%AE.jpg?alt=media) 点击export后下载文件。每一道题目文件夹下有两部分，一个是testcase文件夹，存放测试用例，格式和上方的一样；一个是problem.json文件，存放题目的基本信息。 ![导出文件](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-d110680329fd4952a1f894db5234eda67c560c08%2F%E5%AF%BC%E5%87%BA%E6%96%87%E4%BB%B6.jpg?alt=media) 导入题目的格式和上方一致 ![导入题目](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-480aa241e61e3b48b7e7c8470a69dd29108d528b%2F%E5%AF%BC%E5%85%A5%E9%A2%98%E7%9B%AE.jpg?alt=media) ### 6.4.2.4. 作业管理(仅限教师或管理员) 作业管理界面如下 ![作业管理](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-68d9a1400877dac3997c7b9424ef15a2e3c1f156%2F%E4%BD%9C%E4%B8%9A%E7%AE%A1%E7%90%86.jpg?alt=media) 发布作业页面如下，可在作业列表编辑与删除作业 ![发布作业](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-0d764e7731c0ecef2b4aa8aed80c31def669d58f%2F%E5%8F%91%E5%B8%83%E4%BD%9C%E4%B8%9A.jpg?alt=media) 右边四个按钮分别表示编辑作业信息、编辑作业的题目列表、编辑作业公告以及下载作业的提交情况 编辑作业题目页面如下，下方两个按钮分别为创建题目和从公共题库中添加题目。因为教师布置作业可能会考虑到给学生布置一个不同于题库中的题目，所以这里有Create选项。 ![编辑作业题目](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-e30037214d7800e70fc6dfcc8434212e7d583682%2F%E7%BC%96%E8%BE%91%E4%BD%9C%E4%B8%9A%E9%A2%98%E7%9B%AE.jpg?alt=media) 下载作业的提交情况时有个选项为是否排除管理员的提交。因为管理员，也即老师也可以做题目，但老师查看作业情况时并不需要老师的提交，所以会有该选项供用户选择。 ![排除管理员](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-b97e9c54644d408595641326e650a47bda5af177%2F%E6%8E%92%E9%99%A4%E7%AE%A1%E7%90%86%E5%91%98.jpg?alt=media) ### 6.4.2.5. 用户管理(仅限管理员) 用户管理界面如下 ![用户管理](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-0d390ba1c04180cb75bdc0e95649db8ec6f05c3b%2F%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86.jpg?alt=media) 可看到用户的基本信息，右边两个按钮分别表示编辑用户和删除用户。编辑用户界面如下 ![编辑用户](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-c91c7041073fbc7e2968770c8d0cf128e79e059a%2F%E7%BC%96%E8%BE%91%E7%94%A8%E6%88%B7.jpg?alt=media) 用户类型包括普通用户、管理员和超级管理员，问题权限包括无、只拥有自己创建的题目的权限和拥有所有题目的权限 ![用户类型](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-d6f1fdc9ba8c79c7b0cfb14b650dca0e3ba765e9%2F%E7%94%A8%E6%88%B7%E7%B1%BB%E5%9E%8B.jpg?alt=media) ### 6.4.2.6. 查看作业 点击上方的教学按钮跳转到教学页面，也即是作业页面。该页面可查看每一次作业的具体情况。 ![作业](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-039e924f6ce5748f017cd2d51dff98794ecd1a22%2F%E4%BD%9C%E4%B8%9A.jpg?alt=media) 点击作业可进入作业详情页面 ![作业详情](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-1d2e09c1d76b0ade4fb247c2a556908e4502508b%2F%E4%BD%9C%E4%B8%9A%E8%AF%A6%E6%83%85.jpg?alt=media) 点击题目可进入题目界面，该界面与上方的题目界面一致 ![题目详情](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-c8710ac9411501ca1c25c7124fc7ba5d3cba6666%2F%E9%A2%98%E7%9B%AE%E8%AF%A6%E6%83%85.jpg?alt=media) 提交信息处可查看作业的提交情况，具体为作业中每一道题目的提交情况 ![作业提交情况](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-2f6894f2ecbf88f04fe6a0f81358d149250ca289%2F%E4%BD%9C%E4%B8%9A%E6%8F%90%E4%BA%A4%E6%83%85%E5%86%B5.jpg?alt=media) ## 6.4.3. 出错和恢复 ### 6.4.3.1. 无法注册 注册用户时可能遇到无法注册，提示server error，此时可能是服务器出现问题，联系网站负责人进行修复 ![注册失败](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-560afcd406d9115bc715a7a0d0d812d6796264c2%2F%E6%B3%A8%E5%86%8C%E5%A4%B1%E8%B4%A5.jpg?alt=media) ### 6.4.3.2. npm run dev出错 在运行前端时，该指令出错，结果可能如下 ![前端出错](https://3298958597-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZoWwLPkoNctmisIeI7xQ%2Fuploads%2Fgit-blob-5df51291f55a694913c234140f33773725b6176e%2F%E5%89%8D%E7%AB%AF%E5%87%BA%E9%94%99.jpg?alt=media) 可能是依赖问题，重新执行npm run build:dll。若还有问题，可以尝试升级node js版本为v14.12.0或v16。