举个在Maven项目中实现菜单管理的父子级表格展现的例子,即前后端代码
时间: 2023-06-16 14:08:07 浏览: 121
这是一个简单的Maven项目中实现菜单管理的父子级表格展现的示例,包括前后端代码。
1. 后端代码(使用Spring Boot框架)
Menu实体类
```java
@Entity
@Table(name = "menu")
public class Menu {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String url;
@Column(name = "parent_id")
private Long parentId;
@OneToMany(mappedBy = "parentMenu", cascade = CascadeType.ALL, orphanRemoval = true)
private List<Menu> subMenus = new ArrayList<>();
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "parent_id", insertable = false, updatable = false)
private Menu parentMenu;
// getter and setter
}
```
MenuRepository接口
```java
public interface MenuRepository extends JpaRepository<Menu, Long> {
List<Menu> findByParentId(Long parentId);
}
```
MenuService实现类
```java
@Service
public class MenuServiceImpl implements MenuService {
private final MenuRepository menuRepository;
public MenuServiceImpl(MenuRepository menuRepository) {
this.menuRepository = menuRepository;
}
@Override
public List<Menu> getAllMenus() {
List<Menu> rootMenus = menuRepository.findByParentId(null);
setSubMenus(rootMenus);
return rootMenus;
}
private void setSubMenus(List<Menu> menus) {
for (Menu menu : menus) {
menu.setSubMenus(menuRepository.findByParentId(menu.getId()));
setSubMenus(menu.getSubMenus());
}
}
}
```
MenuController类
```java
@RestController
@RequestMapping("/menu")
public class MenuController {
private final MenuService menuService;
public MenuController(MenuService menuService) {
this.menuService = menuService;
}
@GetMapping("/all")
public List<Menu> getAllMenus() {
return menuService.getAllMenus();
}
}
```
2. 前端代码(使用Vue.js框架)
Menu组件
```vue
<template>
<div>
<el-table :data="menus" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="url" label="URL"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible">
<el-form :model="form" label-width="100px">
<el-form-item label="名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="URL">
<el-input v-model="form.url"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
menus: [],
form: {
id: '',
name: '',
url: '',
parentId: ''
},
dialogVisible: false
}
},
created() {
this.getMenus();
},
methods: {
getMenus() {
this.$http.get('/menu/all').then(response => {
this.menus = response.data;
});
},
handleEdit(menu) {
this.form = Object.assign({}, menu);
this.dialogVisible = true;
},
handleDelete(menu) {
this.$confirm('确认删除该菜单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http.delete('/menu/' + menu.id).then(() => {
this.getMenus();
});
});
},
handleSubmit() {
let method = this.form.id ? 'put' : 'post';
this.$http[method]('/menu', this.form).then(() => {
this.dialogVisible = false;
this.getMenus();
});
}
}
}
</script>
```
以上代码只是一个简单的示例,实际项目中需要根据具体需求进行调整和完善。
阅读全文