当前位置: 首页 > news >正文

【在线OJ】Vue创建OJ管理系统

一、创建项目

vue ui命令创建项目

项目创建完成后来到项目 

二、导航栏

首先创建一个根页面,让他展示在页面上

创建之后来到路由配置界面 

然后安装ElementUI,来到官网找到导航栏

 

复制代码后粘贴到刚才创建的vue文件里,启动项目,调整样式 

<template><div><div style="display: flex; width: 100%; height: 100vh"><div style="height: 100%">
<!--        后序默认修改为组件--><el-menu router style="height: 100%; " :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen"@close="handleClose" :collapse="isCollapse"><el-menu-item index="data"><i class="el-icon-s-operation"></i><span slot="title">数据展示</span></el-menu-item><el-submenu index="users"><template slot="title"><i class="el-icon-s-custom"></i><span slot="title">用户管理</span></template><el-menu-item-group><el-menu-item index="users">用户列表</el-menu-item><el-menu-item index="users2">添加用户</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="forum"><template slot="title"><i class="el-icon-picture"></i><span slot="title">论坛管理</span></template><el-menu-item-group><el-menu-item index="forum">文章列表</el-menu-item><el-menu-item index="forum2">评论管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="problems"><template slot="title"><i class="el-icon-s-order"></i><span slot="title">题库管理</span></template><el-menu-item-group><el-menu-item index="problems">题目列表</el-menu-item><el-menu-item index="problems2">题目添加</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="competition"><template slot="title"><i class="el-icon-s-opportunity"></i><span slot="title">比赛管理</span></template><el-menu-item-group><el-menu-item index="competition">比赛数据</el-menu-item><el-menu-item index="competition2">添加比赛</el-menu-item></el-menu-item-group></el-submenu></el-menu></div><div style="height: 100%; width: 175.4vh"><!--        header--><div v-if="!isCollapse" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 175.4vh; height: 4.8vh"><div style="float: left; height: 100%; font-size: medium; margin-top: 0.5%; margin-left: 0.5%"><i v-if="!isCollapse" class="el-icon-s-fold" @click="isCollapse = !isCollapse"></i><i v-else class="el-icon-s-unfold" @click="isCollapse = !isCollapse"></i></div><div style="float: left; margin-left: 3vh; margin-top: 0.6vh;color: #409EFF">Online OJ Admin</div><div style="height: 4.8vh; font-size: small">
<!--            <el-dropdown style="font-size: xx-small">--><el-avatar size="small" style="font-size: 5vh; margin-left: 140vh; margin-bottom: 2%"src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
<!--            </el-dropdown>--></div></div>
<!--        header副本--><div v-else style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 193.5vh; height: 4.8vh"><div style="float: left; height: 100%; font-size: medium; margin-top: 0.5%; margin-left: 0.5%"><i v-if="!isCollapse" class="el-icon-s-fold" @click="isCollapse = !isCollapse"></i><i v-else class="el-icon-s-unfold" @click="isCollapse = !isCollapse"></i></div><div style="float: left; margin-left: 3vh; margin-top: 0.6vh; color: #409EFF">Online OJ Adminw</div><div style="height: 4.8vh; font-size: small; margin-bottom: 2%">
<!--            <el-dropdown style="font-size: xx-small">--><el-avatar size="small" style="font-size: 5vh; margin-left: 160vh; margin-bottom: 2%"src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><!--            </el-dropdown>--></div></div><div><router-view></router-view></div></div></div></div>
</template><style>
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
</style><script>
export default {data() {return {isCollapse: true,activeIndex: 'data',// 上面为组件相关};},methods: {// 组件相关handleOpen(key, keyPath) {console.log(key, keyPath);this.activeIndex = key},handleClose(key, keyPath) {console.log(key, keyPath);this.activeIndex = key}}
}
</script>

 

 

三、路由配置

根据需求如:XX管理,XX管理配置导航栏后,创建对应的组件在index.js中进行路由配置

相关文章:

【在线OJ】Vue创建OJ管理系统

一、创建项目 vue ui命令创建项目 项目创建完成后来到项目 二、导航栏 首先创建一个根页面&#xff0c;让他展示在页面上 创建之后来到路由配置界面 然后安装ElementUI&#xff0c;来到官网找到导航栏 复制代码后粘贴到刚才创建的vue文件里&#xff0c;启动项目&#xff…...

常用算法汇总

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法篇 &#x1f43e;算法思维逻辑&#x1f43e; 文章目录 1.判断闰年2.计算从某天到某天的天数3.二分4. 前缀和5.差分6.图论6.1dfs6.2走迷宫 7.最短路7.1dijkstra7.2foly 8.并查集9.数论9.1gcd lcm9.2判断素数(质数)9.3分解质因…...

W801学习笔记二十二:英语背单词学习应用——下

续上篇&#xff1a; W801学习笔记二十一&#xff1a;英语背单词学习应用——上 五、处理用户交互 由于英语也是采用了和唐诗一样的《三分钟限时挑战》《五十题竞速挑战》《零错误闯关挑战》&#xff0c;所以用户交互的逻辑和唐诗是一样的。所以&#xff0c;我们抽一个基类&a…...

Vue路由的模式和原理

一、hash模式&#xff08;默认&#xff09; 使用URL的hash来模拟一个完整的URL&#xff0c;当URL发生改变时不会向服务器发起请求。# 和其后面的字符称为hash&#xff0c;可通过 window.location.hash 获取。当hash改变会触发&#xff08;包括浏览器的前进、后退&#xff09;会…...

在K8S中,静态、动态、自主式Pod有何区别

在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;静态Pod、自主式Pod和动态Pod是不同管理方式下的Pod类型&#xff0c;它们的区别主要体现在创建和管理方式上&#xff1a; 静态Pod&#xff1a; 静态Pod是由kubelet直接管理的&#xff0c;其配置文件存储在节点本地而…...

【Three.js基础学习】15.scroll-based-animation

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 课程要点 结合html等场景 做滚动动画 1.遇到的问题&#xff0c; 在向下滚动时&#xff0c;下方会显白&#xff08;部分浏览器&#xff09; 解决&#xff1a;alpha:true …...

ubantu安装mysql

安装 准备&#xff1a;下载&#xff1a;版本5.1.17的MySQL并上传至Ubuntu系统 #解压 tar -xvf mysql-server_5.7.17-1ubuntu16.10_amd64.deb-bundle.tar #提前安装插件 sudo apt-get install libaio1 libmecab2 #若安装失败使用以下命令 apt --fix-broken install sudo apt-g…...

注意!华为HCIP-Datacom认证考试题有变化!

01 注意 HCIP Datacom H12-831考试变题了&#xff0c;最近要考试的多观望一下&#xff0c;821目前稳定。 华为HCIP考试以后要加难度&#xff0c;增加实验题&#xff0c;还没考完的小伙伴抓紧时间了。 02 华为HCIP认证大更新 未来将增加实验考试&#xff0c;拒绝背题库的Pass&a…...

你是我的荣耀 | 林先生:从酷爱数学到毕业走向数据分析岗位

人物背景&#xff1a; 研究生国家奖学金、本科生国家奖学金、学业奖学金一等奖、上海市优秀毕业生&#xff1b; 应用统计专业 CPDA优秀学员 ## 为什么选择数据分析相关专业 我是应用统计专业的一个应届毕业生&#xff0c;目前在一家上海市属的国企&#xff0c;从事数据分析相关…...

操作系统真象还原-bochs安装

今天读了《操作系统真象还原》这本书&#xff0c;写上比较幽默通俗。书中例子需要安装一个bochs系统&#xff0c;记录一下安装过程。参考了书中1.4&#xff0c;1.5两节&#xff0c;书中尽让有两处问题&#xff0c;也记录了下来。 1.3 操作系统的宿主环境 下载地址&#xff1a…...

windows平台安装labelme

之前写过一篇文章也是关于在windows平台安装labelme的&#xff1a;《windows平台python版labelme安装与使用_labelme下载-CSDN博客》&#xff0c;随着软件与工具的更新换代&#xff0c;按照同样的方法最近在使用的时候出现了错误&#xff0c;出现创建虚拟环境失败&#xff0c;具…...

微服务之SpringCloud AlibabaSeata处理分布式事务

一、概述 1.1背景 一次业务操作需要跨多个数据源或需要跨多个系统进行远程调用&#xff0c;就会产生分布式事务问题 but 关系型数据库提供的能力是基于单机事务的&#xff0c;一旦遇到分布式事务场景&#xff0c;就需要通过更多其他技术手段来解决问题。 全局事务&#xff1a;…...

2005-2021年全国各地级市生态环境注意力/环保注意力数据(根据政府报告文本词频统计)

2005-2021年全国各地级市生态环境注意力/环保注意力数据&#xff08;根据政府报告文本词频统计&#xff09; 2005-2021年全国各地级市生态环境注意力/环保注意力数据&#xff08;根据政府报告文本词频统计&#xff09; 1、时间&#xff1a;2005-2021年 2、范围&#xff1a;2…...

熟悉这些道理可以让人更好地应对各种挑战和困难。

1. 为别人尽最大的力量&#xff0c;最后就是为自己尽最大的力量。——罗斯金 2. 世上有一条永恒不变的法则:当你不在乎&#xff0c;你就得到。当你变好&#xff0c;你才会遇到更好的。只有当你变强大&#xff0c;你才不害怕孤单。当你不害怕孤单&#xff0c;你才能够宁缺毋滥。…...

AI去衣技术在动画制作中的应用

随着科技的发展&#xff0c;人工智能&#xff08;AI&#xff09;已经在各个领域中发挥了重要作用&#xff0c;其中包括动画制作。在动画制作中&#xff0c;AI去衣技术是一个重要的工具&#xff0c;它可以帮助动画师们更加高效地完成工作。 AI去衣技术是一种基于人工智能的图像…...

卷积神经网络要点和难点实际案例和代码解析

卷积神经网络(Convolutional Neural Networks,CNN)是一类包含卷积计算且具有深度结构的前馈神经网络,是深度学习的代表算法之一。卷积神经网络仿造生物的视知觉机制构建,可以进行监督学习和非监督学习,其隐含层内的卷积核参数共享和层间连接的稀疏性使得卷积神经网络能够…...

initramfs及rpm/dracut操作

一、背景 更新bundle包后发现系统异常。 定位发现驱动升级不成功&#xff0c;内核启动后加载的还是更新前的旧驱动。但等内核启动完成后&#xff0c;卸载旧驱动手动insmod新驱动&#xff0c;是可以加载成功的。 驱动的安装目录在/lib/modules/$KERNELVERSION/extra目录下。 …...

Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南

在本文中&#xff0c;我将引导您完成在Windows操作系统上安装Apache Kafka 2.13-3.7.0的全过程&#xff0c;包括下载Scala运行环境、Kafka软件包、配置相关设置&#xff0c;并最终启动Kafka服务。此外&#xff0c;还会简要介绍如何使用客户端工具进行查看和管理。 Kafka的命名…...

C++ 顺序线性表的功能

顺序线性表的功能 //头文件 #pragma once#define LIST_INIT_SIZE 50 #define LIST_INCREMENT 20 #define OK 1 #define ERROR 0typedef int Status;typedef char ElemType;typedef struct list_ {ElemType* elem;int length;int listize; }SqList;// 1 初始化 函数 Status…...

C++面经 每日一问(二)

将引用作为函数参数有什么影响&#xff1f; 传递引用给函数与传递指针的效果相同。这意味着被调函数中的形参变量将成为主调函数中实参的别名&#xff0c;从而直接对目标对象进行操作。相比于传递指针&#xff0c;这种方式消除了对指针的繁琐操作&#xff0c;提高了代码的清晰性…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...