背景

使用若依框架搭建后台系统是非常受欢迎的，我们通常在开发环境建立了菜单，但是当我们将项目部署到新环境的时候发现一个问题，菜单这么多，我是一个一个的手动再建立一遍还是怎么弄。我第一次因为服务器磁盘损坏，无法找回数据，我就只能手动再建立一遍，这个过程相当的头痛。

那直接迁移数据库不就完了，也没问题，那如果是前端自动调接口修改的呢？

行动

首先利用listMenu接口获取系统的菜单给deleteMenuList赋值，再将旧系统的菜单给createMenuList赋值，代码如下，很简单。

<template>
  <div class="menu-copy">
    <el-button type="warning" @click="deleteMenu()"> 先删除(第一步) </el-button>
    <el-button type="primary" @click="createMenu()">
      迁移菜单(第二部)</el-button
    >
  </div>
</template>

<script setup>
import { addMenu, delMenu, listMenu } from '@/api/system/menu'
import { updateRole } from '@/api/system/role'

const mapping = {} // 删除用
const mapping2 = {} // 新增用
const mapping3 = {} // 新增用

const deleteMenuList = [].reverse()

const createMenuList = []
 

deleteMenuList.forEach((item) => {
  mapping[item.menuId] = item.menuName
})

createMenuList.forEach((item) => {
  mapping2[item.menuId] = item.menuName
})

const deleteMenu = async (index = 0) => {
  if (!deleteMenuList[index]) {
    alert('菜单已全部删除！')
    return
  }
  await delMenu(deleteMenuList[index].menuId)
  console.log('已删除菜单', deleteMenuList[index].menuName)
  deleteMenu(++index)
}

const createMenu = async (index = 0) => {
  if (!createMenuList[index]) {
    alert('菜单已全部创建！')
    return
  }
  const params = { ...createMenuList[index] }
  delete params.menuId

  // parentId: '0',
  if (params.parentId !== '0') {
    params.parentId = mapping3[mapping2[params.parentId]]
  }
  await addMenu(params)
  const { data } = await listMenu()
  data.forEach((item) => {
    mapping3[item.menuName] = item.menuId
  })
  console.log('已新增菜单', createMenuList[index].menuName)
  createMenu(++index)
}
</script>

<style lang="scss" scoped>
.menu-copy {
  margin: 100px;
}
</style>

若依菜单快速迁移

背景

行动