1、实现角色管理
- 建role表
USE `management`;
DROP TABLE IF EXISTS `role`;
CREATE TABLE `role` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`name` varchar(50) DEFAULT NULL COMMENT '名称',
`description` varchar(255) DEFAULT NULL COMMENT '描述',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
接下来的操作可以用代码生成器一键生成
- 写实体类Role.java
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "role")
public class Role {
@TableId(type = IdType.AUTO)
private Integer id;
private String name;
private String description;
}
- 写mapper层 RoleMapper.java
@Repository
public interface RoleMapper extends BaseMapper<Role> {
}
- 写service层RoleService.java
@Service
public class RoleService extends ServiceImpl<RoleMapper, Role> {
}
- 写controller层 RoleController.java
@RestController
@RequestMapping("/role")
public class RoleController {
@Autowired
private RoleService roleService;
//插入和修改操作
@PostMapping
public Result save(@RequestBody Role role){
return Result.success(roleService.saveOrUpdate(role));
}
//查询所有数据
@GetMapping
public Result findAll(){
return Result.success(roleService.list());
}
//删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id){
return Result.success(roleService.removeById(id));
}
//批量删除
@PostMapping ("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids){
return Result.success(roleService.removeBatchByIds(ids));
}
//根据id查找用户信息
@GetMapping("{id}")
public Result findOneById(@PathVariable Integer id){
return Result.success(roleService.getById(id));
}
//分页查询
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam String name){
QueryWrapper<Role> queryWrapper = new QueryWrapper<>();
if (! "".equals(name)){
queryWrapper.like("name",name);
}
queryWrapper.orderByDesc("id");
return Result.success(roleService.page(new Page<>(pageNum,pageSize),queryWrapper));
}
}
- 前端写Role页面 Role.vue
<template>
<div>
<div style="padding:10px 0">
<el-input style="width:200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
<el-button type="warning" @click="reset">重置</el-button>
</div>
<div style="margin:10px 0">
<el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
<el-popconfirm
class="ml-5"
confirm-button-text='确定'
cancel-button-text='我再想想'
icon="el-icon-info"
icon-color="red"
title="您确定要删除这些内容吗?"
@confirm="delBatch"
>
<el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</div>
<el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="名称" ></el-table-column>
<el-table-column prop="description" label="描述" ></el-table-column>
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope" >
<el-button type="info" @click="selectMenu(scope.row.id)">分配菜单<i class="el-icon-menu"></i></el-button>
<el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
<el-popconfirm
class="ml-5"
confirm-button-text='确定'
cancel-button-text='我再想想'
icon="el-icon-info"
icon-color="red"
title="您确定要删除吗?"
@confirm="handleDelete(scope.row.id)"
>
<el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="padding:10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[2, 4, 6, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog title="角色信息" :visible.sync="dialogFormVisible" width="30%">
<el-form label-width="80px" size="small">
<el-form-item label="名称" >
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="描述" >
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="分配菜单" :visible.sync="menuDialogVisable" width="30%">
<el-tree
:data="menuData"
show-checkbox
node-key="id"
:default-expanded-keys="[1]"
:default-checked-keys="[4]"
@check-change="handleCheckChange">
</el-tree>
<div slot="footer" class="dialog-footer">
<el-button @click="menuDialogVisable = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
name:"User",
data() {
return {
tableData:[],
total: 0 ,
pageNum:1,
pageSize:4,
name:"",
form:{},
dialogFormVisible:false,
menuDialogVisable:false,
multipleSelection:[],
menuData: [
{
id: 1,
label: '主页',
children: []
},
{
id: 2,
label: '系统管理',
children: [{
id:3,
label:'用户管理',
children:[]
},
{
id:4,
label:'角色管理',
children:[]
},
{
id:5,
label:'菜单管理',
children:[]
},
{
id:6,
label:'文件管理',
children:[]
}]
}
]
}
},
created(){
this.load()
},
methods:{
load(){
this.request.get("/role/page",{
params:{
pageNum:this.pageNum,
pageSize:this.pageSize,
name:this.name
}
}).then(res=>{
console.log(res)
this.tableData=res.data.records
this.total=res.data.total
})
},
save(){
this.request.post("/role",this.form).then(res=>{
if(res.data){
this.$message.success("保存成功!")
this.dialogFormVisible=false
this.load()
}else{
this.$message.error("保存失败!")
}
})
},
handleAdd(){
this.dialogFormVisible=true
this.form={}
},
handleUpdate(row){
this.form={...row}
this.dialogFormVisible=true
},
handleDelete(id){
this.request.delete("/role/" + id).then(res=>{
if(res.data){
this.$message.success("删除成功!")
this.load()
}else{
this.$message.error("删除失败!")
}
})
},
delBatch(){
let ids=this.multipleSelection.map(v => v.id) //把对象数组转化为id数组【1,2,3】
this.request.post("/role/del/batch",ids).then(res=>{
if(res.data){
this.$message.success("批量删除成功!")
this.load()
}else{
this.$message.error("批量删除失败!")
}
})
},
handleSelectionChange(val){
this.multipleSelection=val
},
reset(){
this.name=""
this.load()
},
handleSizeChange(pageSize){
this.pageSize=pageSize
this.load()
},
handleCurrentChange(pageNum){
this.pageNum=pageNum
this.load()
},
selectMenu(roleId){
this.menuDialogVisable=true;
},
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
}
}
}
</script>
<style>
.headerBg{
background: #eee!important;
}
</style>
- 基本都是复制粘贴的代码(User页面),不过要改一下请求后端接口的url,和数据对应的字段名
- 去注册路由 index.js
{
path: 'role',
name:'角色管理',
component: () => import('../views/Role.vue')
},
- 在aside中添加角色管理 Aside.vue
<el-menu-item index="/role">
<i class="el-icon-s-custom"></i>
<span slot="title">角色管理</span>
</el-menu-item>
- 去页面测试
进行增删改查的操作测试是否可以正常操作数据库
2、实现菜单管理
- 建表menu表
USE `management`;
DROP TABLE IF EXISTS `menu`;
CREATE TABLE `menu` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`name` varchar(255) DEFAULT NULL COMMENT '名称',
`path` varchar(255) DEFAULT NULL COMMENT '路径',
`icon` varchar(255) DEFAULT NULL COMMENT '图标',
`description` varchar(255) DEFAULT NULL COMMENT '描述',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
- 写实体类Menu.java
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName(value = "menu")
public class Menu {
@TableId(type = IdType.AUTO)
private Integer id;
private String name;
private String path;
private String icon;
private String description;
}
- 写Mapper层MenuMapper.java
@Repository
public interface MenuMapper extends BaseMapper<Menu> {
}
- 写service层MenuService.java
@Service
public class MenuService extends ServiceImpl<MenuMapper, Menu> {
}
- 写controller层MenuController.java
@RestController
@RequestMapping("/menu")
public class MenuController {
@Autowired
private MenuService menuService;
//插入和修改操作
@PostMapping
public Result save(@RequestBody Menu menu){
return Result.success(menuService.saveOrUpdate(menu));
}
//查询所有数据
@GetMapping
public Result findAll(){
return Result.success(menuService.list());
}
//删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id){
return Result.success(menuService.removeById(id));
}
//批量删除
@PostMapping ("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids){
return Result.success(menuService.removeBatchByIds(ids));
}
//根据id查找用户信息
@GetMapping("{id}")
public Result findOneById(@PathVariable Integer id){
return Result.success(menuService.getById(id));
}
//分页查询
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam String name){
QueryWrapper<Menu> queryWrapper = new QueryWrapper<>();
if (! "".equals(name)){
queryWrapper.like("name",name);
}
queryWrapper.orderByDesc("id");
return Result.success(menuService.page(new Page<>(pageNum,pageSize),queryWrapper));
}
}
- 前端实现菜单管理页面 Menu.vue
<template>
<div>
<div style="padding:10px 0">
<el-input style="width:200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
<el-button type="warning" @click="reset">重置</el-button>
</div>
<div style="margin:10px 0">
<el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
<el-popconfirm
class="ml-5"
confirm-button-text='确定'
cancel-button-text='我再想想'
icon="el-icon-info"
icon-color="red"
title="您确定要删除这些内容吗?"
@confirm="delBatch"
>
<el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</div>
<el-table :data="tableData" border stripe :header-cell-calss-name="'headerBg'" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="80"></el-table-column>
<el-table-column prop="name" label="名称" ></el-table-column>
<el-table-column prop="path" label="路径" ></el-table-column>
<el-table-column prop="icon" label="图标" ></el-table-column>
<el-table-column prop="description" label="描述" ></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope" >
<el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
<el-popconfirm
class="ml-5"
confirm-button-text='确定'
cancel-button-text='我再想想'
icon="el-icon-info"
icon-color="red"
title="您确定要删除吗?"
@confirm="handleDelete(scope.row.id)"
>
<el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="padding:10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[2, 4, 6, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%">
<el-form label-width="80px" size="small">
<el-form-item label="名称" >
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="路径" >
<el-input v-model="form.path" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="图标" >
<el-input v-model="form.icon" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="描述" >
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
name:"User",
data() {
return {
tableData:[],
total: 0 ,
pageNum:1,
pageSize:4,
name:"",
form:{},
dialogFormVisible:false,
multipleSelection:[]
}
},
created(){
this.load()
},
methods:{
load(){
this.request.get("/menu/page",{
params:{
pageNum:this.pageNum,
pageSize:this.pageSize,
name:this.name
}
}).then(res=>{
console.log(res)
this.tableData=res.data.records
this.total=res.data.total
})
},
save(){
this.request.post("/menu",this.form).then(res=>{
if(res.data){
this.$message.success("保存成功!")
this.dialogFormVisible=false
this.load()
}else{
this.$message.error("保存失败!")
}
})
},
handleAdd(){
this.dialogFormVisible=true
this.form={}
},
handleUpdate(row){
this.form={...row}
this.dialogFormVisible=true
},
handleDelete(id){
this.request.delete("/menu/" + id).then(res=>{
if(res.data){
this.$message.success("删除成功!")
this.load()
}else{
this.$message.error("删除失败!")
}
})
},
delBatch(){
let ids=this.multipleSelection.map(v => v.id) //把对象数组转化为id数组【1,2,3】
this.request.post("/menu/del/batch",ids).then(res=>{
if(res.data){
this.$message.success("批量删除成功!")
this.load()
}else{
this.$message.error("批量删除失败!")
}
})
},
handleSelectionChange(val){
this.multipleSelection=val
},
reset(){
this.name=""
this.load()
},
handleSizeChange(pageSize){
this.pageSize=pageSize
this.load()
},
handleCurrentChange(pageNum){
this.pageNum=pageNum
this.load()
}
}
}
</script>
<style>
.headerBg{
background: #eee!important;
}
</style>
- 注册路由 index.js
const routes = [
{
path: '/',
component: () => import('../views/Manage.vue'),
redirect:"/home",
children:[
{
path:'home',
name:'首页',
component:()=>import('../views/Home.vue')
},
{
path: 'user',
name:'用户管理',
component: () => import('../views/User.vue')
},
{
path: 'role',
name:'角色管理',
component: () => import('../views/Role.vue')
},
{
path: 'menu',
name:'菜单管理',
component: () => import('../views/Menu.vue')
},
{
path:'password',
name:'修改密码',
component:()=>import('../views/Password.vue')
},
{
path:'person',
name:'个人信息',
component:()=>import('../views/Person.vue')
},
{
path:'file',
name:'文件管理',
component:()=>import('../views/Files.vue')
}
]
},
都是Manage路由的子路由
- 去页面测试
同样进行以下增删改查的操作,看是否正常
创建这两个页面,主要代码都是复制粘贴前面user页面的代码,后端代码也是一样,都是实现同样的接口。所以后端建完表后就可以用代码生成器一键生成,前端代码注意修改一下请求后端的接口,然后数据库的字段要一一对应绑定好