ruoyi-vue-plus想改掉侧边栏

Question

想更改前端页面为只显示子菜单即在数据库重标识为C的菜单而不显示为M的目录
目前想到两种方法：改掉前端的接口，但是找不到，找到了不会改

第二种方法，想直接改掉后端的查询方法，但是不知道是哪个方法才是渲染菜单的
有提示一下的亲人吗

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你想在 Ruoyi-Vue-Plus 项目中修改侧边栏的显示方式，使其只显示子菜单，而不显示父菜单。你的想法是改掉前端的接口或后端的查询方法。

在 Ruoyi-Vue-Plus 项目中，侧边栏的数据是通过后端提供的接口获取的。要实现你的需求，可以在后端的 MenuController 中修改查询方法。

在 MenuController 中，你可以使用 Hibernate 的 Criteria API 或 JPA 的 Query API 来查询菜单数据，并使用 criteria.add(Restrictions.eq("parentMenuId", "C")) 或 query.where("parentMenuId = :parentMenuId").setParameter("parentMenuId", "C") 来过滤菜单数据，仅显示子菜单。

例如：

@Override
public List<Menu> getMenuList() {
    Criteria criteria = getSession().createCriteria(Menu.class);
    criteria.add(Restrictions.eq("parentMenuId", "C"));
    return criteria.list();
}

或者：

@Override
public List<Menu> getMenuList() {
    Query query = getSession().createQuery("from Menu where parentMenuId = :parentMenuId");
    query.setParameter("parentMenuId", "C");
    return query.list();
}

然后，在前端的 Vue 代码中，你可以使用 axios 或 vue-resource 库来调用后端的接口获取菜单数据，并将其渲染到侧边栏中。

例如：

import axios from 'axios';

export default {
  data() {
    return {
      menuList: []
    }
  },
  mounted() {
    axios.get('/menu/list')
      .then(response => {
        this.menuList = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

希望这可以帮助你解决问题！