
全栈项目实战 多多OJ系统
文章平均质量分 74
Vue3 + Springboot + Spring Cloud + Docker 全栈开发项目
前端使用的是 Vue3 VueCLI脚手架 Vuex Arco组件库 前端工程化 Markdowm
后端用Spring 微服务 Mysql MQ消息队列 Redis分布式 Session Docker
Dddddduo_
江苏省高中数学竞赛三等奖 阿里云认证专家博主 字节跳动青训营后端优秀奖
展开
-
OJ在线评测系统 微服务 用分布式消息队列 RabbitMQ 解耦判题服务和题目服务 手搓交换机和队列 实现项目异步化
分布式消息队列是一种用于异步通信的系统,它允许不同的应用程序或服务之间传递消息。消息队列的核心理念是将消息存储在一个队列中,发送方可以将消息发送到队列,而接收方则可以在适当的时候从队列中读取消息。这种机制有助于解耦应用程序,提高系统的可扩展性和可靠性。:发送方和接收方可以在不同的时间工作,不必直接交互。:通过将消息分发到多个消费者,可以有效利用系统资源。:许多消息队列系统支持将消息存储在磁盘上,以防数据丢失。:某些队列支持按顺序处理消息,确保消息的处理顺序。原创 2024-10-07 22:04:11 · 55754 阅读 · 0 评论 -
OJ在线评测系统 微服务高级 网关跨域权限校验 集中解决跨域问题 拓展 JWT校验和实现接口限流降级
集中的去解决一下跨域这段代码是用来配置跨源资源共享(CORS)过滤器的。它创建了一个实例,允许所有方法和头部,并支持凭证(如 Cookies)。方法设置允许的源,这里用"*"表示允许所有来源。最后,使用将该配置应用于所有路径(/**),并返回一个实例,以便在请求时进行 CORS 处理。在网关层面自定义一个跨域的拦截器去给请求的响应头加上一个运行跨域的注解拓展1.JWT校验2.可以在网关实现接口限流降级用于签名和验证JWT的密钥。请确保此密钥保密,并使用安全的方式存储。获取请求头中的。原创 2024-10-07 22:00:27 · 55568 阅读 · 0 评论 -
OJ在线评测系统 微服务高级 Gateway网关接口路由和聚合文档 引入knife4j库集中查看管理并且调试网关项目
各个服务之间已经能相互调用了为什么需要网关因为我们的不同服务是放在不同的端口上面的如果前端调用服务 需要不同的端口 8101 8102 8103 8104我们最好提供一个唯一的 给前端去调用的路径我们学习技术的时候必须要去思考1.为什么要用?2.是什么?所有的服务端口不同 增大了前端调用成本 同时我们的所有服务是分散的 你可能需要进行集中管理操作比如说 集中解决跨域 鉴权 接口文档 服务的路由 接口安全性 流量染色Gateway 想自定义一些功能需要对这个技术有比较深的理解。原创 2024-10-07 21:56:01 · 56132 阅读 · 0 评论 -
OJ在线评测系统 微服务 OpenFeign调整后端下 nacos注册中心配置 不给前端调用的代码 全局引入负载均衡器
内部调用通常可以优化网络请求,例如使用轻量级的通信协议(如gRPC或HTTP/2),而不是传统的RESTful API,这样可以提高性能。: 在微服务架构中,服务之间的通信往往是通过内部API进行的。: 内部API可以独立于外部API进行版本控制,使得内部服务能够在不影响外部用户的情况下进行更新和迭代。: 开发人员可以在内部API中使用更复杂的逻辑和数据结构,而不需要考虑外部用户的兼容性问题。: 内部调用可以更方便地进行监控和日志记录,以便于分析和调试内部服务之间的交互。这服务只是内部调用的。原创 2024-10-07 21:47:33 · 55436 阅读 · 0 评论 -
OJ在线评测系统 微服务 OpenFeign调整后端上 内部调用Client代码书写 实现客户端接口 配置服务参数 接口文档
是为了在接口中提供一个默认实现,允许实现该接口的类在不重写此方法的情况下,直接使用它。这种设计有助于减少代码重复,提高可维护性,同时允许实现类根据需要覆盖此方法以实现特定的逻辑。:对于一些常用的方法,提供默认实现可以减少实现类的负担,让开发者专注于独特的功能。3.FeignClient定义的请求路径一定要和服务提供方实际的请求路径保持一致。可以把name的内容理解成客户端要到nacos上去找到的具体服务的名称。:通过提供默认实现,可以在多个实现类中重用相同的逻辑,减少代码重复。原创 2024-10-07 21:39:30 · 55665 阅读 · 0 评论 -
OJ在线评测系统 后端微服务架构 改造代码依赖同步 OpenFeign调教各服务间的HTTP调用
模块全局异常处理器请求响应封装类公共的工具类模块很多地方公用的实体类注意的是代码沙箱的model的引入模块定义公共的接口模块先把所有的接口都搬运进来需要注意的是引入实体类。服务内部调用现在的问题是 题目服务依赖用户服务 但是代码已经分到不同的包 找不到对应的bean可以使用Open Feign组件实现跨服务的远程调用原创 2024-10-07 20:45:08 · 55632 阅读 · 0 评论 -
OJ在线评测系统 后端微服务架构 Maven子工程父工程生成 使用Ali Cloud脚手架创建项目 解决依赖冲突的问题
Maven子工程父工程生成Spring Cloud有相当多的依赖参差不齐大家可以积累一套自己的依赖建议使用脚手架创建项目Cloud Native App Initializer (aliyun.com)可以通过继承父模块的配置 统一项目的定义和版本号子模块引用父模块的版本父模块定义modules 子模块引入parent语法。原创 2024-10-07 20:37:22 · 55194 阅读 · 0 评论 -
OJ在线评测系统 后端微服务架构 注册中心 Nacos入门到启动
Nacos(Dynamic Naming and Configuration Service)是一个开源的服务发现和配置管理平台,主要用于微服务架构中的服务治理。它由阿里巴巴开发,旨在帮助用户更好地管理微服务的配置、服务发现、负载均衡等。原创 2024-10-07 20:29:41 · 56148 阅读 · 0 评论 -
OJ在线评测系统 思考如何进行微服务的划分 业务功能 占用端口 公共服务 依赖服务 路由
微服务是一种架构风格微服务就是把一个项目拆分成多个独立的不封而且多个服务都是可以运行的 每个服务都会占用线程传统的IT行业软件都是独立系统的堆砌 这些系统总结来说就是可拓展性不高 可靠性不高 维护成本广告微服务的每个模块都是独立的 而且可以用有多重存储方式 数据库也是每个模块对应自己的数据库单体架构所有的模块开发所使用的开发技术可以不同 开发模式更加灵活从业务出发 想一下哪些功能/职责是在一起的好比自己是公司老板 想想怎么给员工分工。原创 2024-10-07 20:09:32 · 55629 阅读 · 0 评论 -
OJ在线评测系统 微服务技术入门 单体项目改造为微服务 用Redis改造单机分布式锁登录
单机分布式登录是一种灵活的认证方案,可以在单机环境中实现基本的用户管理,同时具备向分布式架构演进的潜力。适合于逐步扩展的应用场景,能够平衡初期简单与后期复杂的需求。单机分布式登录与Redis的关系主要体现在Session管理和数据存储上。以下是具体的关联点:Session管理在分布式登录架构中,用户的登录状态通常需要在多个服务器之间共享。Redis可以作为一个高效的分布式缓存来存储Session信息,确保不同服务器可以访问到相同的用户状态。高性能。原创 2024-10-07 20:04:17 · 56262 阅读 · 0 评论 -
OJ在线评测系统 将代码沙箱开放为API 跑通前端后端整个项目 请求对接口
这一步非常简单就是提供公共方法引入代码沙箱的具体实现现在我们想想看我们之前的后端是怎么做的我们写了一个示例用了个策略模式只是为了跑通流程现在我们要把接口放进来我们要补全远程代码沙箱里面的代码定义新的错误枚举类型以便于我们抛出异常我们用hutool包进行数据封装进入配置里面 此时我们就能修改接下来我们进行测试此时这个API是不安全的接口调用是不安全的如果将服务不做任何权限校验 直接发到公网 是不安全的调用方和服务提供方之间约定一个字符串 只是在服务器内部传递这个字符串最好是的字符串。原创 2024-09-27 17:30:28 · 55378 阅读 · 0 评论 -
OJ在线评测系统 代码沙箱优化模版方法模式 使用与有规范的流程 并且执行流程可以复用
我们原生的java实现代码沙箱和docker实现代码沙箱是有更多重复点的。模版方法的应用场景 使用与有规范的流程 并且执行流程可以复用。定义一套通用的执行流程 让子类去负责每个具体步骤的执行流程。优先的是去执行子类里面重写方法 就是已经覆盖过的实现。接下来我们要去改造一下docker代码沙箱的实现。上次我们代码沙箱的docker实现和原生实现。我们可以使用模版方法设计模式去优化我们的代码。再把代码从完整的方法抽离成一个一个的子写法。熟悉模版方法模式的人一看就懂这个方法。我们此时重写父类中的方法。原创 2024-09-27 17:24:05 · 55382 阅读 · 0 评论 -
OJ在线评测系统 判题机开发 保证Docker容器执行的安全性
Seccomp(安全计算模式)是 Linux 的一种安全特性,用于限制进程可以调用的系统调用。通过配置 seccomp,可以提高容器的安全性,防止恶意代码利用不必要的系统调用。: Docker 提供了一个默认的 seccomp 配置,限制了许多危险的系统调用。docker只不过实现了系统与系统之间的隔离 真实情况还是需要我们去排查安全问题。我们现在怎么保证使用docker容器执行的安全性?创建容器的时候 设置容器的网络状态为关闭。执行容器的时候 增加超时参数的控制值。linux内核自带的一些安全管理措施。原创 2024-09-27 16:31:07 · 55385 阅读 · 0 评论 -
OJ在线评测系统 Docker代码沙箱实现 基于模版方法模式实现在容器内交互
这是一个匿名内部类的写法。使用匿名内部类可以在需要的地方直接实现接口,避免创建一个单独的类。1.在已有镜像的基础上再进行扩充 比如说拉取现成的java环境 包含jdk 再把编译后的文件复制到文件里 适合新的项目跑通流程。模版方法设计模式 定义同一套实现流程 让不同的子类去实现不同流程中的具体实现 执行步骤一样 每个步骤的实现方式不一样。这个回调的作用是实时接收和处理命令执行过程中的输出信息,以及在执行完成时进行相应的处理。这段代码是一个 Java 匿名内部类的实现,主要用于处理某个执行过程的回调。原创 2024-09-27 16:23:10 · 56139 阅读 · 0 评论 -
OJ在线评测系统 在Linux虚拟机搭建Docker 概念 入门 安装
为什么要用docker容器技术为了提升系统的安全性 把不同的程序和宿主机进行隔离使得某个程序 应用的执行不会影响到系统本身docker技术可以实现程序和宿主机的隔离容器可以理解成对一系列应用程序、服务和环境的封装 从而把程序运行在一个隔离的 封闭的 隐私的空间内 对外整体提供服务可以把一个容器理解成一个新的电脑 定制化操作系统镜像:用来创建容器的安装包 可以理解为给电脑安装操作系统的系统镜像容器:通过镜像来创建的一套运行环境 一个容器内可以运行多个程序 可以理解为一个电脑实例。原创 2024-09-27 15:55:56 · 55887 阅读 · 0 评论 -
OJ在线评测系统 后端判题机架构搭建 使用原生实现Java安全管理器环境隔离
首先运行java程序的时候 指定安全管理器 路径 名称缺点如果要做的比较严格的权限限制 需要自己去判断哪些文件 包名需要读写 粒度太细了安全管理器本身也是Java代码 也可能存在漏洞还是程序上的控制 没有到系统层面进行控制Java9 后被取代优点权限控制灵活 实现简单运行环境隔离系统层面上 把用户程序封装到沙箱里和宿主机 我们的电脑 服务器 隔离开Docker 容器技术能够实现 cgroup namespace。原创 2024-09-27 15:48:47 · 55439 阅读 · 0 评论 -
OJ在线评测系统 原生Java代码沙箱程序漏洞讲解 原生超时资源权限控制
/ 定义超时时间// 定义黑白名单危险代码其实都不用编译 直接在最开始进行校验我们在开始的时候就用字典树进行校验。核心流程实现四 原生实现Java程序漏洞讲解我们的程序并不安全到目前为止 核心流程已经实现但是想要上线 安全么首先如果用户提交恶意代码怎么办执行阻塞 占用资源不释放程序卡死注意类名要改为Main 包名一定要去掉危险代码其实都不用编译 直接在最开始进行校验我们在开始的时候就用字典树进行校验字典树是HuTool的一个工具类 WordTree作用是可以用更小的空间存储更多的原创 2024-09-27 15:41:52 · 55170 阅读 · 0 评论 -
OJ在线评测系统 原生Java代码沙箱核心实现流程三 整理封装输出结果 拿到程序执行时间(stopwatch类) 和 运行内存
我们在之前的操作中已经拿到程序进行了编译和运行接下来我们要将我们的结果输出整理输出。这边使用的是spring的stopwatch类来获取一段程序的执行时间接下来我们尝试去获得运行内存这个非常麻烦 要借助第三方库我们可以用windows自带的一个程序去计算此处我们使用最大值来统计时间 便于后续判题服务计算程序是否超时原创 2024-09-27 13:33:50 · 55058 阅读 · 0 评论 -
OJ在线评测系统 原生Java代码沙箱核心实现流程二 打造交互式执行程序 解决乱码问题
我们思考一下 刚才编译 和现在的运行 我们是否可以封装出来一个工具类 执行进程 获取输出。我们这时候就可以发现 我们接下来要用命令行去运行编译好的字节码文件。就是根据你输入的数值拿到结果进行运算。一个交互式的 是无法等待进程结束的。把之前的代码换成刚才的进程实现类。我们可以尝试去解决乱码。所以我们再写一个方法。原创 2024-09-27 13:25:31 · 55255 阅读 · 0 评论 -
OJ在线评测系统 原生Java代码沙箱核心实现流程一 搭建大体框架 用stream流拿到信息
像这样只打印状态码的 我们也不知道到底内部是什么 这样就形成了一个程序黑盒...接下来我们把打印输出注释掉 我们要编译java代码了。会有一点麻烦 从进程中获取流 以成块分批的方式去读取。用程序代替人工 用程序来操作命令行 去编译执行代码。我们要用到Java进程执行管理类 Process。使用这个工具类我们可以直接进行文件的读写操作。因为Java原生的文件读写操作还是很复杂的。在项目中引用一下我们的hutool工具类。这样就是成功的 代表我们已经拿到了代码。怎么拿到编译后 控制台输出的信息呢。原创 2024-09-27 12:40:42 · 55466 阅读 · 0 评论 -
OJ在线评测系统 后端 代码沙箱原生实现 初始化项目
命令行终端的编码是GBK 和java代码文件本身的编码 UTF-8 不一致 导致乱码。原生 的 代码沙箱尽可能不借助第三方的库和依赖 用最干净最原始的方式实现代码沙箱。不负责判题 可以作为独立的项目/服务 提供给其他的需要执行代码的项目去使用。在java代码中使用javac编译完成的 执行代码使用java命令实现的。这个代码并不是实际编译后的代码 是反编译后我们开发者可读的代码。最终这个项目要提供一个能够执行代码 操作代码沙箱的接口。代码沙箱需要 接收代码 编译代码 执行代码。原创 2024-09-27 12:27:52 · 55326 阅读 · 0 评论 -
OJ在线评测系统 前端 完善题目提交服务 细讲异步前端请求与后端接口交互
首先我们看一下controller层 表现层接口的的情况。在看我们的核心代码逻辑主要在service层里。对象的所有属性(使用了对象展开运算符。我们看一下实现类里面是怎么书写具体逻辑的。这则笔记是我们来梳理一下前后端逻辑。关键字表示这个函数内部会使用。按钮绑定的是这个异步请求。属性一起发送到服务器。我们的请求找到了后端接口。来等待异步操作完成。主要是我们的提交逻辑。原创 2024-09-26 21:49:57 · 55680 阅读 · 0 评论 -
OJ在线评测系统 后端 用策略模式优化判题机架构
但是如果用简单的判断 如果有复杂的情况会很麻烦 而且 写的if else语句会变的很多。我们的判题策略可能会有很多种 比如 我们的代码沙箱本身执行程序需要消耗时间。这个时间可能不同的编程语言是不同的 比如沙箱执行Java要额外花费2秒。接下来我们要把刚刚写的判题逻辑部分的代码搬到接口的实现类里面去。我们把所有判题的内容 放到一个单独的类里面 这个类叫做默认策略。我们可以采用策略模式 针对不同的情况 定义不同独立的策略。先根据沙箱的执行结果设置题目的判题状态和信息。这边创建一个策略模式接口的实现类。原创 2024-09-26 21:32:02 · 55444 阅读 · 0 评论 -
OJ在线评测系统 后端 使用代理模式编写测试类 并 实现核心业务判题流程
我们在调用代码沙箱前 输出请求参数日志 在代码沙箱调用后 输出响应结果日志 便于管理员去分析。第一步是获取到传入题目的id 获取到对应的题目信息 提交信息(代码 编程语言。我的理解是使用代理模式 提供一个Proxy 来增强代码沙箱的能力。先判断沙箱的执行结果输出数量是否和预期输出的数量相等。根据沙箱的执行结果 我们设置题目的判题状态和信息。第三步是根据沙箱的执行结果 设置题目的判题状态。再去判断每一项输出的具体内容和预计输出是否相等。首先我们校验输出的用例数量和预计输出是否相等。根据代码沙箱的执行结果。原创 2024-09-26 21:25:12 · 55505 阅读 · 0 评论 -
OJ在线评测系统 后端 判题机模块预开发 架构分析 使用工厂模式搭建
如果每个用例单独调用一个代码用例 会调用多次接口 需要多次网络运输 程序要多次编译 记录程序的执行状态 重复的代码不重复编译。这就叫参数配置化 开发者只需要去修改配置文件 而不是去看项目代码 就能自定义使用项目的更多功能。在调用代码沙箱前 输出请求参数 在代码沙箱调用后 输出响应结果日志。代码沙箱:只负责接受代码和输入 返回编译的结果 不负责判题。判题模块:调用代码沙箱 把代码和输入交给代码沙箱去执行。是为了把代码交个代码沙箱去处理 得到结果返回。也不需要在每一个调用代码沙箱的地方去统计代码。原创 2024-09-26 21:11:40 · 56013 阅读 · 0 评论 -
OJ在线评测系统 前端创建题目(增) 更新题目(改) 题目列表(查) 以及做题页面的开发 基于VUECLI脚手架画界面
并且通过watchEffect监听searchParams的改变。然后执行loadData重新加载速度。实现页号变化时触发数据的重新加载。我们的管理题目页面不能分页。开发的是其他增删改查页面。原创 2024-09-25 19:41:58 · 55517 阅读 · 0 评论 -
OJ在线评测系统 前端开发整合开源组件 Monaco Editor 并且开发创建题目页面
这个插件的作用是把我们的代码编译器和webpack打包在一起。先把编辑器本身安装好monaco-editor。搜索live Tempaltes。实时得到的结果交给父组件去控制。我们用插件自动根据后端生成代码。我们跟刚才的文本编译器一样。先创建一个自定义模版组。也要接受父组件的传值。原创 2024-09-25 19:13:14 · 55287 阅读 · 0 评论 -
OJ在线评测系统 后端基础部分开发 完善CRUD相关接口
接口功能 能够根据用户id 题目id 编程语言 去查询提交记录。注意事项 仅本人和管理员能看见自己提交代码的答案 提交代码。建议把id的生成规则改成ASSIGN_ID。先从用户的请求拿到Language。为了防止用户根据id爬取题目。数值传到数据库中进行一个转换。使用接口文档提交题目试一试。controller层代码。先查询再根据权限去脱敏。判斷编程语言是否合法。写好了 idea启动。数据库中数据录入成功。原创 2024-09-25 18:33:15 · 55465 阅读 · 0 评论 -
OJ在线评测系统 后端增删改查模块解耦合 编写Controller层和Service层的代码
Controller层的主要功能是处理用户请求、调用服务层进行业务逻辑处理,并返回相应的视图或数据。它充当了用户界面与业务逻辑之间的桥梁,确保请求的有效处理和适当的响应。Service层的主要功能是封装业务逻辑,处理数据的操作和规则。它负责协调不同的持久层操作,确保数据一致性,并提供接口供Controller层调用。原创 2024-09-22 18:47:19 · 93018 阅读 · 0 评论 -
OJ在线评测系统 后端开发数据库初始化工作 开发库表 建立数据库索引 Mybatis映射初始化接口开发
项目主业务流程的开发1.用户模块注册(后端已实现)登录(后端已实现 前端已实现)2.题目模块创建题目(管理员)删除题目(管理员)修改题目(管理员)搜索题目(用户)在线做题(题目详细页)3.判题模块提交判题(结果是否正确与错误)错误处理(内存溢出 安全性 超时)自主实现 代码沙箱(安全沙箱)开放接口(提供一个独立的新服务)创建索引题目表题目标题题目内容 存放题目的介绍 输入输出提示 描述 具体的情况题目标签(json数组字符串) 栈 队列 链表 简单 中等 困难。原创 2024-09-22 18:29:26 · 92819 阅读 · 0 评论 -
OJ在线评测系统 前端开发设计优化通用菜单组件二 调试用户自动登录
接下来要完善 权限功能就是只有登录后才能进入题目查看界面用户只能看到我们有权限的菜单我们要在路由文件里面去操作原理是控制路由设置隐藏只要用户没有权限 就过滤掉隐藏全局权限管理实现想清楚有那些权限我们接下来要在菜单组件里判断用户是否有权限定义一个通用的权限校验方法我们找到菜单栏的组件。原创 2024-09-19 22:17:01 · 91890 阅读 · 0 评论 -
OJ在线评测系统 思考主流OJ的实现方案 常用概念 自己的思考
OJ系统在线判题系统AC all accpeted 测试样例全部通过题目介绍题目输入题目输出题目输出用例题目输入用例不能让用户随便引入包 随便遍历 暴力破解 需要使用正确的算法提交后不会立刻出结果而是异步处理提交后会生成一个提交记录有运行的结果和运行信息 (时间 内存)OJ系统最大的难点在于判题系统用于在线评测编程题目代码的系统 能够根据用户提交的代码 出题人预先设置的题目输入和输出用例能够根据这些信息进行编译代码 运行代码 判断代码运行结果是否正确。原创 2024-09-19 22:14:11 · 91955 阅读 · 0 评论 -
OJ在线评测系统 登录页面开发 前端后端联调实现全栈开发
登录页面就是一个让用户输入账号和密码的表单使用acro组件先写布局这边调用之前生成的代码我们在js里面写代码这边是把表单提交到这个请求上去我们实际上在这边是进行表单的填写再统一发给后端这个接口但是我们还是要执行一下全局状态管理把未登录替换成多多我们这边还是未登录我们要从前端的请求出发开始排查可以看到我们这边还是未登录的状态原因是前端和后端根本就没有任何关联我们要去修改openapi里面的配置然后就能获取改了一晚上的前端布局。原创 2024-09-19 22:12:40 · 92789 阅读 · 0 评论 -
OJ在线评测系统 前后端联调实现前端请求代码的生成 开源插件OpenAPI
直接定义一个axios请求库的全局参数 比如说全局请求响应拦截器。axios对前端的html请求做了一个封装。修改使用代码生成器提供的全局参数修改对象。我们现在把这边和之前写的那个接口对应上。向每一个响应都进行一个控制台打印信息。分析一下我们在脚手架中书写的代码。每个请求我们都是要单独编写代码。每次开发都要去写一个axios。这里的接口和后端都是一一对应的。直接生成了向后端发起请求的函数。要想知道怎么用 我们得看文档。放入一个axios.ts文件。我们之前的开发是这样子的。首先找一下接口文档的地址。原创 2024-09-17 10:32:56 · 92571 阅读 · 0 评论 -
OJ在线评测系统 后端项目初始化 Springboot项目通用模版讲解
先把通用的后端框架跑起来准备好文件。用于构建Docker镜像一个更小的服务器两个用服务器 互不影响我们要选择设置一些代码 和java版本放到服务器里面test文件夹写了一些单元测试的代码原创 2024-09-16 22:03:56 · 84421 阅读 · 0 评论 -
OJ在线评测系统 前端开发设计优化通用菜单组件一 初始化JS全局项目入口
我们的前端初始化先用Vue cli脚手架跑页面然后用arco组件库我们要完善前端通用项目模版先改几个bug 优化页面布局这个footer没有一直处于底部我们在原生css里去修改把 position 属性改为 sticky 粘性但是我们发现我们进行页面的缩放后这个footer就不会位于底部我们还是在原生css里去修改这样就能一直在底部了进行通用布局样式的修改最终呈现效果我们现在要解决的是这个无权限问题用户实际上是看不到这个菜单的我们要优化通用导航栏组件的优化根据权限隐藏菜单。原创 2024-09-11 19:04:33 · 96447 阅读 · 0 评论 -
多多OJ评测系统 前端全局状态管理 权限管理
所有页面全局共享的变量而不是局限在某一个页面中适合作为全局状态的数据:已登录的用户信息我们这边是使用的Vuex组件本质上提供了一套增删改查全局变量的API 只不过可能多了一些功能。原创 2024-08-08 10:00:00 · 96464 阅读 · 0 评论 -
多多OJ评测系统 在前端脚手架Vue-Cli中设置页面路由
其实vue - cli脚手架自动帮我们生成了一个路由文件。就是每次刷新的时候 页面把路由信息同步到菜单项上。这样就能实现 在哪个页面刷新 还会停留在哪个页面。在刚刚的原始路由 index.ts中导入就行了。我们把菜单上的路由改成读取路由文件。就能跳转到我们对应的路由文件上去。设置成export 导出路由。首先我们把路由不设置成默认的。同步去更新菜单栏的高亮状态。在这边引入我们的路由文件。接下来要同步路由到菜单项。我们先把一部分给提出来。我们的路由文件是这样的。接下来我们要去绑定事件。我们把菜单不写成死的。原创 2024-07-24 00:38:57 · 96260 阅读 · 0 评论 -
多多OJ评测系统 前端页面通用布局开发与优化 调整布局
我们这边把导航菜单抽象成一个公共的组件。我们在app.vue里面引入这个样式。我们可以把这边替换成我们的logo。接下来我们要做我们项目的模版。个人习惯写一个最外层的样式。我们是在组件库里找一下布局。我们现在的样式是这样子的。用原生css设置一下样式。首先我们把图片文件引入。首先我们设置一下布局。页面中成功进行了展示。在浏览器控制台去书写。原创 2024-07-18 00:12:31 · 96786 阅读 · 0 评论 -
多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件
推荐的node js版本为为18 或者 16。其实我们脚手架已经帮我们做到了。我们首先试着引入一个组件试试看。我们在前端工程化的时候实际上。加到main.ts文件里面。我们打开webStorm。我们有一些代码规范的校验。就说明我们的项目引入成功。npm版本为9.5.1。配置脚手架后我们先运行。接下来要引入相关的组件。监测一下是否安装成功。要去重新配置环境变量。我们这边能获取到网址。代表的是项目运行成功。选择用npm进行安装。我们建议的是完整引入。原创 2024-07-18 00:01:05 · 74531 阅读 · 0 评论