下面我将为您详细讲解“springboot + vue 实现递归生成多级菜单”的完整攻略。
简介
本文将介绍如何使用SpringBoot和Vue.js实现递归生成多级菜单。通过该方案，可以生成任意深度的多级菜单。
准备工作
在开始之前，需要下载安装以下软件：
- JDK 8+
- Node.js
- Vue CLI
创建SpringBoot项目
首先，使用Spring Initializr创建一个新的SpringBoot项目，具体方法可以参考官方文档。
在创建过程中，需要添加以下依赖项：
- Spring Web
- Spring Data JPA
- MySQL Driver
创建完成后，将生成的代码导入到你的IDE中并进行配置。
创建数据库表
创建一个名为sys_menu的数据库表，用于存储菜单数据。
表结构如下：
CREATE TABLE `sys_menu` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`parent_id` bigint(20) DEFAULT NULL COMMENT '父菜单ID，一级菜单为0',
`name` varchar(50) DEFAULT NULL COMMENT '菜单名称',
`url` varchar(200) DEFAULT NULL COMMENT '菜单URL',
`perms` varchar(500) DEFAULT NULL COMMENT '授权(多个用逗号分隔，如：user:list,user:create)',
`type` int(11) DEFAULT NULL COMMENT '类型 0：目录 1：菜单 2：按钮',
`order_num` int(11) DEFAULT NULL COMMENT '菜单排序',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
编写SpringBoot代码
下一步是编写SpringBoot后端代码。在com.example.demo包下创建一个名为controller的包，并在其中创建一个名为MenuController的控制器。
@RestController
@RequestMapping("/menu")
public class MenuController {
@Autowired
private MenuService menuService;
@GetMapping("/list")
public List<Menu> list() {
return menuService.list();
}
}
在com.example.demo包下创建一个名为service的包，并在其中创建一个名为MenuService的服务。
public interface MenuService {
List<Menu> list();
}
@Service
public class MenuServiceImpl implements MenuService {
@Autowired
private MenuRepository menuRepository;
@Override
public List<Menu> list() {
// 递归查询所有菜单
List<Menu> menuList = menuRepository.findByParentIdIsNull();
return build(menuList);
}
/**
* 递归生成菜单树
* @param menuList 菜单列表
* @return 生成的菜单树
*/
private List<Menu> build(List<Menu> menuList) {
List<Menu> treeList = new ArrayList<>();
for (Menu menu : menuList) {
if (menu.getType() == 0) {
// 递归查询子菜单
List<Menu> children = menuRepository.findByParentId(menu.getId());
menu.setChildren(build(children));
}
treeList.add(menu);
}
return treeList;
}
}
最后，在com.example.demo包下创建一个名为repository的包，并在其中创建一个名为MenuRepository的仓库。
public interface MenuRepository extends JpaRepository<Menu, Long> {
/**
* 按 parentId 查找菜单
*/
List<Menu> findByParentId(Long parentId);
/**
* 查找 parentId 为 null 的菜单
*/
List<Menu> findByParentIdIsNull();
}
创建Vue前端项目
在命令行中执行如下命令，创建一个名为vue-demo的新项目：
vue create vue-demo
该命令会使用Vue CLI创建一个新的Vue.js项目，并自动安装所需的依赖项。
编写Vue代码
在vue-demo项目中，打开src/App.vue文件，修改其内容如下：
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<menu-item v-for="menu in menuList" :key="menu.id" :menu="menu"></menu-item>
</ul>
</div>
</template>
<script>
import axios from 'axios'
import MenuItem from './components/MenuItem.vue'
export default {
name: 'App',
components: {
MenuItem
},
data() {
return {
title: '递归生成多级菜单',
menuList: []
}
},
created() {
// 加载菜单数据
axios.get('/menu/list').then(response => {
this.menuList = response.data
})
}
}
</script>
该代码会渲染一个多级菜单，其数据来源于后端控制器。
在vue-demo项目中，创建一个名为components的目录，并在其中创建一个名为MenuItem.vue的组件。
<template>
<li>
<a v-if="menu.type === 1" :href="menu.url">{{ menu.name }}</a>
<span v-else>{{ menu.name }}</span>
<ul v-if="menu.children">
<menu-item v-for="child in menu.children" :key="child.id" :menu="child"></menu-item>
</ul>
</li>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menu: {
type: Object,
required: true
}
}
}
</script>
该组件会渲染一个菜单项，并递归渲染其子菜单项。
运行程序
在命令行中，分别进入springboot和vue-demo目录，并执行以下命令：
// 在springboot目录下执行以下命令
./mvnw spring-boot:run
// 在vue-demo目录下执行以下命令
npm run serve
现在，您就可以在浏览器中访问http://localhost:8080，查看漂亮的多级菜单了！
示例说明
示例1：添加菜单
为了演示添加菜单的操作，可以修改MenuController中list()方法的返回值，返回一个由多个菜单项组成的“菜单列表”。具体代码如下：
@GetMapping("/list")
public List<Menu> list() {
List<Menu> menuList = new ArrayList<>();
// 添加第一个菜单项
Menu menu1 = new Menu();
menu1.setId(1L);
menu1.setName("系统管理");
menu1.setUrl(null);
menu1.setType(0);
menu1.setOrderNum(10);
menu1.setCreateTime(new Date());
menu1.setUpdateTime(new Date());
Menu menu11 = new Menu();
menu11.setId(11L);
menu11.setName("用户管理");
menu11.setUrl("/user");
menu11.setType(1);
menu11.setOrderNum(10);
menu11.setCreateTime(new Date());
menu11.setUpdateTime(new Date());
Menu menu12 = new Menu();
menu12.setId(12L);
menu12.setName("角色管理");
menu12.setUrl("/role");
menu12.setType(1);
menu12.setOrderNum(20);
menu12.setCreateTime(new Date());
menu12.setUpdateTime(new Date());
// 第一个菜单项添加两个子菜单项
menu1.setChildren(Arrays.asList(menu11, menu12));
// 添加第二个菜单项
Menu menu2 = new Menu();
menu2.setId(2L);
menu2.setName("购物中心");
menu2.setUrl("/shop");
menu2.setType(1);
menu2.setOrderNum(20);
menu2.setCreateTime(new Date());
menu2.setUpdateTime(new Date());
menuList.add(menu1);
menuList.add(menu2);
return menuList;
}
示例2：删除菜单
为了演示删除菜单的操作，可以在MenuServiceImpl中添加一个名为delete()的方法，实现删除菜单的功能。具体操作如下：
public void delete(Long id) {
// 从数据库中删除菜单
menuRepository.deleteById(id);
}
在MenuController中添加一个名为delete()的方法，实现删除菜单项的功能。具体代码如下：
@DeleteMapping("/{id}")
public void delete(@PathVariable Long id) {
menuService.delete(id);
}
在MenuItem.vue组件中添加一个名为delete()的方法，实现“删除菜单”按钮的功能。具体代码如下：
<template>
<li>
<div>
<a v-if="menu.type === 1" :href="menu.url">{{ menu.name }}</a>
<span v-else>{{ menu.name }}</span>
<button v-if="menu.type !== 0" @click="deleteMenu">删除</button>
</div>
<ul v-if="menu.children">
<menu-item v-for="child in menu.children" :key="child.id" :menu="child"></menu-item>
</ul>
</li>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menu: {
type: Object,
required: true
}
},
methods: {
deleteMenu() {
if (window.confirm('确认删除该菜单？')) {
// 向后台发送删除请求
axios.delete('/menu/' + this.menu.id)
// 重新加载菜单数据
this.$root.$emit('reloadMenu')
}
}
}
}
</script>
将“删除菜单”按钮添加到菜单项中之后，就可以轻松删除菜单项了！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：springboot + vue 实现递归生成多级菜单(实例代码) - Python技术站
微信扫一扫 
支付宝扫一扫 