【Vue3+Ts项目】硅谷甄选 — 用户管理+角色管理+菜单管理+首页

一、用户管理

1.1 接口

1.1.1 接口定义

src/api/acl/user/index.ts

// 用户管理模块的接口
import request from '@/utils/request'
import type {
    AllRoleResponseData,
    SetRoleData,
    User,
    UserResponseData
} from './type'
enum API {
    // 获取全部已有用户账号信息
    ALLUSER_URL = '/admin/acl/user/',
    // 添加一个新的用户账号
    ADDUSER_URL = '/admin/acl/user/save',
    // 更新已有的用户账号
    UPDATEUSER_URL = '/admin/acl/user/update',
    //获取全部职位,当前账号拥有的职位接口
    ALLROLEURL = '/admin/acl/user/toAssign/',
    //给已有的用户分配角色接口
    SETROLE_URL = '/admin/acl/user/doAssignRole',
    //删除某一个账号
    DELETEUSER_URL = '/admin/acl/user/remove/',
    //批量删除的接口
    DELETEALLUSER_URL = '/admin/acl/user/batchRemove',
}
// 获取用户账号信息的接口
export const reqUserInfo = (page: number, limit: number, username: string) => request.get(API.ALLUSER_URL + `${page}/${limit}/?username=${username}`)
// 添加用户与更新已有用户的接口
export const reqAddOrUpdateUser = (data: User) => {
    // 携带参数有ID更新
    if (data.id) {
        return request.put(API.UPDATEUSER_URL, data)
    } else {
        return request.post(API.ADDUSER_URL, data)
    }
}//获取全部职位以及包含当前用户的已有的职位
export const reqAllRole = (userId: number) =>
    request.get(API.ALLROLEURL + userId)
//分配职位
export const reqSetUserRole = (data: SetRoleData) =>
    request.post(API.SETROLE_URL, data)
//删除某一个账号的信息
export const reqRemoveUser = (userId: number) =>
    request.delete(API.DELETEUSER_URL + userId)
//批量删除的接口
export const reqSelectUser = (idList: number[]) =>
    request.delete(API.DELETEALLUSER_URL, { data: idList })

 1.1.2 数据ts类型定义

src/api/acl/user/type.ts 

//账号信息的ts类型
export interface ResponseData {
    code: number
    message: string
    ok: boolean
  }
  //代表一个账号信息的ts类型
  export interface User {
    id?: number
    createTime?: string
    updateTime?: string
    username?: string
    password?: string
    name?: string
    phone?: null
    roleName?: string
  }
  //数组包含全部的用户信息
  export type Records = User[]
  //获取全部用户信息接口返回的数据ts类型
  export interface UserResponseData extends ResponseData {
    data: {
      records: Records
      total: number
      size: number
      current: number
      pages: number
    }
  }
  
  //代表一个职位的ts类型
  export interface RoleData {
    id?: number
    createTime?: string
    updateTime?: string
    roleName: string
    remark: null
  }
  //全部职位的列表
  export type AllRole = RoleData[]
  //获取全部职位的接口返回的数据ts类型
  export interface AllRoleResponseData extends ResponseData {
    data: {
      assignRoles: AllRole
      allRolesList: AllRole
    }
  }
  
  //给用户分配职位接口携带参数的ts类型
  export interface SetRoleData {
    roleIdList: number[]
    userId: number
  }
  

 1.2 业务实现

src/views/acl/user/index.vue   

 二、 角色管理

2.1 接口 

 2.1.1 接口定义

 src/api/acl/role/index.ts

// 角色管理模块的接口
import request from '@/utils/request'
import type { RoleResponseData, RoleData, MenuResponseData } from './type'
// 枚举地址
enum API {
  // 获取全部角色的接口
  ALLROLE_URL = '/admin/acl/role/',
  // 新增角色的接口地址
  ADDROLE_URL = '/admin/acl/role/save',
  // 更新已有的角色
  UPDATEROLE_URL = '/admin/acl/role/update',
  //获取全部的菜单与按钮的数据
  ALLPERMISSION = '/admin/acl/permission/toAssign/',
  //给相应的职位分配权限
  SETPERMISTION_URL = '/admin/acl/permission/doAssign/?',
  //删除已有的职位
  REMOVEROLE_URL = '/admin/acl/role/remove/',
}

// 获取全部的角色
export const reqRoleInfo = (page: number, limit: number, roleName: string) =>
  request.get(
    API.ALLROLE_URL + `${page}/${limit}/?roleName=${roleName}`,
  )
// 添加与更新角色接口
export const reqAddOrUpdateRole = (data: RoleData) => {
  if (data.id) {
    return request.put(API.UPDATEROLE_URL, data)
  } else {
    return request.post(API.ADDROLE_URL, data)
  }
}
//获取全部菜单与按钮权限数据
export const reqAllMenuList = (roleId: number) =>
  request.get(API.ALLPERMISSION + roleId)
//给相应的职位下发权限
export const reqSetPermission = (roleId: number, permissionId: number[]) =>
  request.post(
    API.SETPERMISTION_URL + `roleId=${roleId}&permissionId=${permissionId}`,
  )
//删除已有的职位
export const reqRemoveRole = (roleId: number) =>
  request.delete(API.REMOVEROLE_URL + roleId)

 2.1.2 数据ts类型定义

 src/api/acl/role/type.ts

export interface ResponseData {
    code: number
    message: string
    ok: boolean
  }
  //职位数据类型
  export interface RoleData {
    id?: number
    createTime?: string
    updateTime?: string
    roleName: string
    remark?: null
  }
  
  //全部职位的数组的ts类型
  export type Records = RoleData[]
  //全部职位数据的相应的ts类型
  export interface RoleResponseData extends ResponseData {
    data: {
      records: Records
      total: number
      size: number
      current: number
      orders: []
      optimizeCountSql: boolean
      hitCount: boolean
      countId: null
      maxLimit: null
      searchCount: boolean
      pages: number
    }
  }
  
  //菜单与按钮数据的ts类型
  export interface MunuData {
    id: number
    createTime: string
    updateTime: string
    pid: number
    name: string
    code: string
    toCode: string
    type: number
    status: null
    level: number
    children?: MenuList
    select: boolean
  }
  export type MenuList = MunuData[]
  
  //菜单权限与按钮权限数据的ts类型
  export interface MenuResponseData extends ResponseData {
    data: MenuList
  }
  

2.2 业务实现

src/views/acl/role/index.vue   

PS：filterSelectArr方法只需要过滤最深一个层级的id（即第四级），因为只要判断最深一级是否有勾选，如果有一个或多个勾选了，则它相关的所有上级必定是勾选状态；如果一个也没勾选，则它相关的所有上级必定也是未勾选状态。

 三、菜单管理

常量路由：谁都可以访问的路由（首页、数据大屏）

异步路由：只有部分人可以访问的路由（权限管理、商品管理及其子路由） 

3.1 接口 

3.1.1 接口定义

 src/api/acl/menu/index.ts

import request from '@/utils/request'
import type { PermissionResponseData, MenuParams } from './type'
//枚举地址
enum API {
  //获取全部菜单与按钮的标识数据
  ALLPERMISSION_URL = '/admin/acl/permission',
  //给某一级菜单新增一个子菜单
  ADDMENU_URL = '/admin/acl/permission/save',
  //更新某一个已有的菜单
  UPDATE_URL = '/admin/acl/permission/update',
  //删除已有的菜单
  DELETEMENU_URL = '/admin/acl/permission/remove/',
}
//获取菜单数据
export const reqAllPermission = () =>
  request.get(API.ALLPERMISSION_URL)
//添加与更新菜单的方法
export const reqAddOrUpdateMenu = (data: MenuParams) => {
  if (data.id) {
    return request.put(API.UPDATE_URL, data)
  } else {
    return request.post(API.ADDMENU_URL, data)
  }
}

//删除某一个已有的菜单
export const reqRemoveMenu = (id: number) =>
  request.delete(API.DELETEMENU_URL + id)

3.1.2 数据ts类型定义

 src/api/acl/menu/type.ts

//数据类型定义
export interface ResponseData {
  code: number
  message: string
  ok: boolean
}
//菜单数据与按钮数据的ts类型
export interface Permission {
  id?: number
  createTime: string
  updateTime: string
  pid: number
  name: string
  code: null
  toCode: null
  type: number
  status: null
  level: number
  children?: PermissionList
  select: boolean
}
export type PermissionList = Permission[]
//菜单接口返回的数据类型
export interface PermissionResponseData extends ResponseData {
  data: PermissionList
}

//添加与修改菜单携带的参数的ts类型
export interface MenuParams {
  id?: number //ID
  code: string //权限数值
  level: number //几级菜单
  name: string //菜单的名字
  pid: number //菜单的ID
}

3.2 业务实现 

 src/views/acl/permission/index.vue   

四、 首页 

 src/views/home/index.vue