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

创建后台管理前端代码

Layout.vue


<script setup>
import {
  Management,
  ArrowDownBold,
  SwitchButton
} from '@element-plus/icons-vue'
</script>

下拉栏

菜单栏后面加一个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的时候把昵称也存入

 @Override
    public R 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