标准版admin后台页面添加及开发操作流程及注意事项

灰太狼 2024-04-29 19:24 68阅读 0赞

### 基础介绍 ###

CRMEB后台管理是基于vue2技术栈进行开发搭建的

Vue Router 使用的是v3版本，mode为`history`模式 如需修改 `mode` 请在`src/setting.js`中修改`routerMode`

### 新建页面 ###

##### 新建路由 #####

![image.png][]

根据目录结构，需要在`src/router/modules`中对应模块中，添加对应路由（如有其他模块建议另行创建）

实例中：该页面的访问路径(路由地址)为 `/admin/order/list`

// 实例  该路由创建成功后 访问路径为 /admin/order/list
    
    import BasicLayout from '@/components/main';
    
    const pre = 'order_';
    
    export default {
      path: '/admin/order',
      name: 'order',
      header: 'order',
      redirect: {
        name: `${pre}list`,
      },
      component: BasicLayout,   // 布局组件
      children: [
        {
          path: 'list',
          name: `${pre}list`,
          meta: {
            auth: ['admin-order-storeOrder-index'],  // 路由权限
            title: '订单管理',
          },
          component: () => import('@/pages/order/orderList/index'),  // 动态引入 对应pages中文件路径
        }
      ],
    };

**注意**

如果你添加的是新建模块 指：在`src/router/modules`中新建路由文件

你还需要再 `src/router/routers.js`中进行引入

![59b87202212131220567457.png][]

在上方引入并在下方使用

##### 创建文件 #####

在`src/pages`下创建模块文件 例如`test`,模块中在添加对应的功能文件

![image.png][image.png 1]

### 添加规则 ###

运行起后台admin项目找到对应目录 设置/权限管理/权限规则

![image.png][image.png 2]

![69e7d20221213122115851.png][]

如果是创建一级目录点击图中`1`添加规则，如果是在对应一级模块下创建二级或三级目录 根据列表及展开项，点击后方`2`添加子菜单进行添加。

添加子菜单注意事项

![51022202212131221297429.png][]

##### 必填项 #####

按钮名称、路由地址为必填项（如果创建一级目录，需添加对应图片，可点击图片后方icon进行选择）

##### 路由 #####

路由地址参加第一步中 路由创建后的路由地址进行添加 例如：`/admin/user/list`

##### 权限 #####

权限标识参考第一部中 meta中auth 填写的权限规则

### 其他问题 ###

1.如果需要添加规则效验可在 `src/router/index.js`中进行添加具体使用方法可参考官方示例[导航守卫][Link 1]

2.如果按上面布置添加完成页面却出现 该页面不存在时。请检查路由文件及权限规则中路径添加是否正确。

3.如果出现 因权限无法访问问题

*  请检查规则添加的权限与路由文件中的权限规则是否一致
 *  检查 `设置/角色管理`中的菜单权限![f93fbfeeaa274fd9aeaa91226ae26b5b.jpeg][]

[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/d2245d8e80944845b1fa96f8e0cbae7b.png
[59b87202212131220567457.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/4e8a2252c9ce4bdab12792735bd15ddf.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/35bcd65f2da249acb82b833974d648c9.png
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/f3ce11d4f9df406eb21c3519f1393519.png
[69e7d20221213122115851.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/181d510568c044a0bec3620bf52de530.png
[51022202212131221297429.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/f4753c7c945641e4b8379805f46f3c3a.png
[Link 1]: https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html
[f93fbfeeaa274fd9aeaa91226ae26b5b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/45f59585745945ff93a64cca08b6b39e.jpeg