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

微服务项目-＞在线oj系统(Java-Spring)-后台管理（1）

news 2025/9/29 5:47:41

创建后台管理前端代码

Layout.vue

<template><el-container class="layout-container"><el-container><el-header class="el-header"><el-dropdown placement="bottom-end"><span class="el-dropdown__box"><div><strong>当前⽤⼾：</strong>管理员</div><el-icon><ArrowDownBold /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item  :icon="SwitchButton">退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown></el-header><el-main class="layout-bottom-box"><div class="left"><el-aside width="200px" class="el-aside"><el-menu class="el-menu" router><el-menu-item index="/oj/layout/cuser"><el-icon><Management /></el-icon><span>⽤⼾管理</span></el-menu-item><el-menu-item index="/oj/layout/question"><el-icon><Management /></el-icon><span>题⽬管理</span ></el-menu-item><el-menu-item index="/oj/layout/exam"><el-icon><Management /></el-icon><span>竞赛管理</span></el-menu-item></el-menu></el-aside></div><div class="right"><RouterView /></div></el-main></el-container></el-container></template><script setup>
import {Management,ArrowDownBold,SwitchButton
} from '@element-plus/icons-vue'</script><style lang="scss" scoped>
.layout-container {height: 100vh;background: #f7f7f7;.layout-bottom-box{display: flex;justify-content: space-between;height: calc(100vh - 100px);overflow: hidden;.left{margin-right: 20px;background: #fff;display: flex;:deep(.el-menu){flex: 1;.el-menu-item.is-active{color: #32c5ff;}.el-menu-item:hover{background:#fff ;color: #32c5ff;}}}.right{flex: 1;overflow-y: auto;background: #fff;padding: 20px;}}.el-aside {background-color: #fff;&__logo {height: 120px;// background: url('@/assets/logo.png') no-repeat center / 120px auto;}.el-menu {border-right: none;}}.el-header {background-color: #fff;display: flex;align-items: center;justify-content: flex-end;height: 40px;.el-dropdown__box {display: flex;align-items: center;.el-icon {color: #4c4141;margin-left: 20px;}&:active,&:focus {outline: none;}}}.el-footer {display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666;}
}
</style>

下拉栏

菜单栏后面加一个router的目的是增加路由功能

创建下列文件

配置路由：

{path: '/oj/layout',name: 'layout',component: () => import('../views/Layout.vue'),children:[{path: 'cuser',name: 'cuser',component: () => import('../views/Cuser.vue'),},{path: 'question',name: 'question',component: () => import('../views/Question.vue'),},{path: 'exam',name: 'exam',component: () => import('../views/Exam.vue'),},]},

对二级路由进行路由时候需要额外写

修改菜单栏

当前页面展示：

点击左边菜单栏会路由到不同的页面，点击右上角会有下拉栏退出

但是我们这里还不能得到具体的昵称

所以我们进行修改

这里由于我们之前定义的失误，所以我们需要对表进行修改

首先，由于我们的昵称是可能包含中文的，那么我们就需要去修改数据库配置

其次，由于我们修改了数据库配置，那么我们就需要对我们的数据库进行删除重建

匿称功能

修改表结构

修改第26和27行

然后进行创建表和插入元素

这样可以帮我们把数据导出为插入语句，方便我们重新插入数据

修改后端代码

创建token的时候把昵称也存入

 @Overridepublic R<LoginVO> info(String token) {if (StrUtil.isNotEmpty(token) && token.startsWith(HttpConstants.PREFIX)) {token = token.replaceFirst(HttpConstants.PREFIX, StrUtil.EMPTY);}LoginUser loginUser= tokenService.getLoginUser(token,secret);if (loginUser==null){return R.fail();}LoginVO loginVO=new LoginVO();loginVO.setNickName(loginUser.getNickName());return  R.ok(loginVO);}

总体思路：从前端标头里面取出AUTHENTICATION，然后对它进行处理得到token，我们通过token又可以得到redis的key,通过key又可以取出redis里面存的用户信息

AUTHENTICATION-----》token------》》claim-----》》userkey-----》》key------》》value