前端使用若依框架如何开发

若依后台管理框架前端如何实现删除没用的菜单和新增的菜单 仅在ruoyi-ui里修改不涉及后端知识 以及我在项目里操作新增菜单一直显示演示模式不能修改

一般下面几个步骤就可以搞定大兄弟，

在 Ruoyi-Admin 后台管理框架中，菜单的新增和删除通常需要通过后端接口来实现。如果您只是想在前端修改菜单，

• 打开 ruoyi-ui/src/views/system/menu/index.vue 文件，找到需要修改或删除的菜单项。
• 对于需要删除的菜单项，直接将其从菜单列表中删除即可。
• 对于需要新增的菜单项，可以在菜单列表中添加一个新的菜单项，并设置其对应的路由路径和组件名称。
• 保存修改后的文件，并重新编译前端代码。

若依管理后台框架在前端实现删除没用和新增菜单功能,可以参考以下方法:

1. 删除菜单:
   在 ruoyi-ui/src/api/menu.js 文件中定义删除菜单的接口:

js
remove(menuId) {
  return request({
    url: '/system/menu/remove',
    method: 'post',
    data: { menuId }
  })
}

然后在 ruoyi-ui/src/views/menu/menu.vue 文件中绑定点击删除事件,调用此接口:

html
<a @click="removeMenu(scope.row.menuId)">删除</a>

js
methods: {
  removeMenu(menuId) {
    this.$confirm('此操作将删除该菜单,确认继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      return this.$http.remove(menuId) 
    }).then(() => {
      this.getList()
      this.$message({
        message: '删除成功!',
        type: 'success'
      })
    })
  }  
}

2. 新增菜单:
   在 ruoyi-ui/src/views/menu/add.vue 文件中已有新增菜单的字段定义及提交逻辑。
   您需要确认后端 menu/add 接口正常,并在 ruoyi-ui/src/api/menu.js 定义此接口:

js
add(menu) {
  return request({
    url: '/system/menu/add',
    method: 'post',
    data: menu
  })
}

然后,在 ruoyi-ui/src/views/menu/add.vue 中增加绑定事件,调用此接口添加菜单:

js
handleSubmit() {
  this.$refs.form.validate(valid => {
    if (valid) {
      this.$http.add(this.form).then(() => {
        this.$message({
          message: '新增成功',
          type: 'success'
        })
        this.$router.push({ path: '/menu' })
      })
    } else {
      return false
    }
  })
}

3. 显示演示模式并不能编辑,这是因为 ruoyi-ui/src/layout/components/AppMain.vue 文件中:

js
computed: {
  sidebarItems() {
    return this.$store.getters.menuList
  }  
}

是读取 vuex 中静态的菜单数据,而不是实时从服务器获取。
您需要去除此 computed 属性,改为在 created 钩子函数中调用 /system/menu/list 接口获取菜单,如:

js
created() {
  this.$http.get('/system/menu/list').then(res => {
    this.sidebarItems = res.data
  })
} 

然后,删除 ruoyi-ui/src/store/modules/menu.js 文件和相关引用,使用真实接口获取菜单数据。