Go+Vben Admin框架初体验

最近刚使用TypeScript，就尝试用Vben框架（ Vue3.0、Vite、 Ant-Design-Vue、TypeScript )练练手，配合后端完成了一些基础功能，想学习go的小伙伴可以看看零基础搭建Gin框架。后台包括权限控制、角色管理、账号管理、菜单管理等，项目环境准备、工具配置可以参考官方文档，以下是个人示例链接，完整版Demo和源码可以直接到官方文档查看。

示例网站: https://admin.gva.jassue.cn/
源码地址: https://github.com/Mattlinxy/gin-admin-frontend

权限控制

权限控制区分为前端控制路由(角色权限、路由映射)、后端控制路由。

在 src/settings/projectSetting 下，找到permissionMode属性更改权限控制模式，切换权限模式时都需要清除一下浏览器缓存。

 permissionMode: PermissionModeEnum.BACK,

这里主要是以后端控制权限为主，在官方示例的基础上进行调整，对后端响应的数据通过递归方式进行二次加工，转化为路由对应的数据格式，代码保留了官方对于不同方式权限控制的写法，可以根据具体需求对代码进行调整，具体配置项可以查看文档 权限相关 内容。

详细代码见: src/store/modules/routes

getAsyncRoutes(asyncRoutes: AsyncRoutes[]): AppRouteRecordRaw[] {
  const routeMap: AppRouteRecordRaw[] = [];
  asyncRoutes.forEach((item) => {
    const temp: AppRouteRecordRaw = {
      path: item.route,
      // 同重定向路径，由后端直接返回
      name: this.setRouteName(item.route),
      component: item.compo,
      meta: {
        title: item.name,
        icon: item.icon,
      },
      // 可在创建时输入重定向路径后，由后端直接返回，就无需进行任何转化
      redirect: this.setRedirectPath(item),
      children: [],
    };
    if (item.children?.length > 0) {
      temp.children = this.getAsyncRoutes(item.children);
    }
    routeMap.push(temp);
  });
  return routeMap;
},

按钮权限只要按照规定格式稍加处理，返回权限标识数组集合。

this.permCode = btn_list.map((item) => item.auth_key); // ['ADMIN_VIEW','ROLE_UPDATE',...]

文档提供了指令方式和函数方式进行权限控制，这里是通过指令v–auth去控制页面上的权限，切换权限模式后，按钮级权限都需要自己根据需求去重新定义，保障页面按钮的正常显示，参考文档：颗粒度权限

<a-button v-auth="'MENU_CREATE'" type="primary" @click="handleCreate"> 新增菜单 </a-button>

接口请求

在 src/utils/http/axios 下，根据接口返回参数进行修改，这里有对成功接口进行统一判断，判断errorMessageMode参数不为none时，统一提示操作成功。如果具体见：接口请求

 //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
 const { error_code, data: result, message } = data;

 // 这里逻辑可以根据项目进行修改
 const hasSuccess = data && Reflect.has(data, 'error_code') && error_code === ResultEnum.SUCCESS;
 if (hasSuccess) {
   if (options.errorMessageMode !== 'none') {
     createMessage.success('操作成功');
   }
   return result;
 }

对于不希望成功就显示提示信息的接口，就可以在定义接口时，加上errorMessageMode配置项，来避免统一提示，也可以自定义提示。

export const getMenuList = (params?: MenuParams) =>
  defHttp.post<MenuListGetResultModel>({ url: Api.MenuList, params }, { errorMessageMode: 'none' });

接口统一存放在 src/api/ 目录下面管理，具体定义示例可以查看 src/api/system 目录下文件。

数据渲染

在 xxx.data.ts 文件下事先定义好页面需要使用到的字段，以账号管理模块为例:

src/views/system/account/account.data.ts

// 表格数据定义
export const columns: BasicColumn[] = [...]
// 搜索字段定义
export const searchFormSchema: FormSchema[] = [...]
// 新增、编辑模态框字段定义
export const accountFormSchema: FormSchema[] = [...]

对于不能直接使用的值，可以通过customRender配置项进行自定义

{
  title: '角色',
  dataIndex: 'role_id',
  width: 200,
  customRender: ({ record }) => {
    return h('span', record.role.name);
 },

新增、修改模态框需要区别显示字段和文本时，可以在 src/views/system/account/index，通过updateSchema方法进行配置

updateSchema([
  {
    field: 'username',
    show: !unref(isUpdate),
  },
  {
    field: 'password',
    required: !unref(isUpdate),
  },
]);

这套框架整体封装度还是很高的，拓展性也很强，值得我们去学习。我主要还是想通过这套框架去熟悉一下 TypeScript 以及框架本身，所以没有在 vue–vben–admin-thin 精简版本上进行开发。代码上也删除了一部分相关示例、无用文件及功能，刚使用强类型语言，还存在不足的地方，后续会继续学习并对代码进行优化。

代码007普通

打赏 收藏 海报 链接