qq_53126706的博客

2021SC@SDUSC文章目录架构设计界面设计导航栏设计数据管理（VueX实战）架构设计SDUOJ 效仿 PTA，通过题目集的方式为用户提供答题功能。教师可随时发布一份题目集，并修改题目集的基础信息，如名称、简介、开放状态等。学生也可进入向自己开放的题目集中选择题目编写代码作答，并可实时查看解题结果。整个题目集页面分为以下几个模块：题目集详情页面：作为题目集的首页面模块，在这里呈现了整个题目集的基本信息。教师可在该页面对自己的发布题目集进行信息更新。题目列表：这个模块将题目集中的所有题目都展

2021SC@SDUSC文章目录前言store.js引入项目前言在上一次博客中，我们简单介绍了一下 Vuex 以及它的用法。在这一篇博客中，我们将实地分析 sduoj 项目中的 Vuex 的使用。【sduoj】初识 Vuexstore.js为了方便维护，我们为 Vuex 专门建立一个 js 文件，store.js ，将其至于 src 目录下。在其内部，我们先将 Vue 和 Vuex 引入：import Vue from 'vue';import Vuex from 'vuex';V

2021SC@SDUSC文章目录VuexVuex简介Vuex安装引入Vuex核心概念State单一状态树在 Vue 组件中获得 Vuex 状态Getters通过属性访问通过方法访问Mutations提交载荷（Payload）对象风格的提交方式Mutation 需遵守 Vue 的响应规则Mutation 必须是同步函数Actions分发 ActionAction 的 PromiseModules模块的局部状态命名空间在最初的几代版本中， SDUOJ 一直依赖组件传参的方式来传递管理整个系统中的数据。然而，

2021SC@SDUSC文章目录前言CodeMirror简介安装依赖vue-codemirror 的使用作为组件引入功能扩展编辑器主题语法高亮前言SDUOJ 是一个旨在提升山东大学学生编程能力的 Online Judge 平台，势必需要设计一个用于编写代码的输入框组件。在该项目中，我们采用了开源的 Vue-CodeMirror ，作为在线代码编辑器。CodeMirror简介CodeMirror是一个用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并带有许多 实现更高级

2021SC@SDUSC文章目录组件介绍组件内部模块核心功能通过压缩包上传测试点数据手动输入单个测试点下载测试点组件介绍组件名称：testPoint组件绝对路径：src / components / newProblem / testPoint.vue主要功能：教师对特定题目上传、修改测试点组件内部模块该模块组成部分较为简单，仅由一个 el-card 作为主体容器，内含 el-table 表格组件用以展示测试点数据。以下是 template 部分代码：<template>

2021SC@SDUSC文章目录组件介绍组件内部模块主容器基本信息表单题面描述表单提交组件复用组件介绍组件名称：publishQuestion组件绝对路径：src / components / newProblem / publishQuestion.vue主要功能：用以编辑当前题目的基本信息组件内部模块该组件同样由若干其他组件共同构成，在这一段落中，我将依次介绍构成该页面的各个组件。主容器该组件通过 Element UI 的 el-card构成。其由头部及主体两部分构成，而大部分功能

2021SC@SDUSC文章目录序言页面结构序言SDUOJ 项目，全称 山东大学学生程序设计能力在线提升平台，作为一款 Online Judge 产品，其自然少不了出题的功能。而这篇博客就将着笔介绍 SDUOJ 项目的出题功能。页面结构对于整个出题系统的结构，可以查看下方列出的树状结构图：└── src/views/Teacher/newProblem.vue ├── src/components/newProblem/publishQuestion.vue ├── src/componen

2021SC@SDUSC文章目录JSZIP安装使用引入实例化JSZIPJSZip是一个用于创建、读取和编辑.zip文件的javascript库，具有好用而简单的 API。安装在sduoj项目中，可通过npm或yarn进行安装npm install jszip或yarn add jszip使用JSZip为开发者提供了诸多API可用于处理各类业务。具体API可参考： JSZip API下面将展示部分示例：引入import JSZip from 'jszip';在script开头

2021SC@SDUSC文章目录序言传统认证方式session认证基于Token的鉴权机制JWTJWT是什么JWT的构成头部（header）载荷（payload）标准中注册的声明公共的声明私有的声明签证（signature）序言由于HTTP协定是不储存状态的，当我们刚刚透过帐号密码验证一个使用者时，下一个request请求就把刚刚的资料忘了。所以我们的程序就不知道谁是谁，就要再验证一次。所以为了保证系统安全易用，我们就需要验证用户否处于登录状态。在大多数前后端分离的项目中，JWT是常见的一个认证标准

2021SC@SDUSC文章目录App.vue模板<template />脚本<script />首页布局Home.vueojheaderojasidelayoutApp.vue该项目是一个由Vue.js框架所搭建的单页面应用（SPA），我们所看见的所有页面实际上均是在App.vue的基础上通过组件之间的切换完成的。以下是App.vue的源代码：<template> <div id="app"> <router-view /> &l

2021SC@SDUSC文章目录项目简介系统功能人员分工前端服务器环境搭建系统配置环境配置更新软件列表安装配置Nginx项目简介该项目名为学生程序设计能力提升平台，是山东大学软件学院学生开发的一套程序在线评测系统。该系统的开发目的是丰富教学活动。在学校与编程相关的课程中，教师可以通过该系统为学生布置一系列编程题，培养学生主动书写代码的习惯，让学生在教师课堂上接受传统课程培养方式的同时，又能通过Online Judge平台亲手测试自己的代码。让学生们能够在实践中不断地提升编程能力。项目采用前后端分离

【sduoj】项目环境配置文章目录本地Node环境搭建下载与安装2021SC@SDUSC本地Node环境搭建Node.js安装可参考博客Node.js最新最详细安装教程下载与安装首先，进入Node.js官网：https://nodejs.org/en/下载LTS版本的安装程序。打开下载好的安装程序，进行安装。安装成功后退出安装程序，打开cmd，输入node -vnpm -v看到终端打印了版本号即说明安装成功。使用npm全局安装@vue/cli以及yarn安装完成后，在c.

2021SC@SDUSC文章目录Element UI简介Element UI的安装ElementUI的安装npm安装CDN安装Element UI 的配置使用 Starter Kit引入ElementUI完整引入按需引入全局配置开始使用Element UI简介ElementUI是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。是山东大学学生程序设计能力提升平台项目web前端部分所使用的主要UI组件库。Element UI的安装ElementUI的安装ElementUI的