如何开发Admin管理后台

管理后台源代码

PhalApi Pro 管理后台，是基于iView-admin2.0开发的，源代码位置pro_admin目录。

目录结构如下：

.
├── config  开发相关配置
├── public  打包所需静态资源
└── src
    ├── api  AJAX请求
    └── assets  项目静态资源
        ├── icons  自定义图标资源
        └── images  图片资源
    ├── components  业务组件
    ├── config  项目运行配置
    ├── directive  自定义指令
    ├── libs  封装工具函数
    ├── locale  多语言文件
    ├── mock  mock模拟数据
    ├── router  路由配置
    ├── store  Vuex配置
    ├── view  页面文件
    └── tests  测试相关

本地运行

修改根目录下的vue.config.js文件中的接口测试域名，更换成您本地的测试域名或正式域名。

  // 添加如下配置
  devServer: {
    proxy: {
      '/api': {
        // TODO：更换成您本地的测试域名或正式域名
        target: 'http://pro-test.api.yesapi.cn/',
        changeOrigin: true
      }
    }
  }

在本地首次运行管理后台时，需要进行npm安装，进入pro_admin目录后，执行命令：

$ npm install

安装完毕后，再运行命令：

$ npm run dev

然后，浏览器会自动打开管理后台，例如：

需要使用的接口

管理后台需要用到的接口，建议统一放置在Admin后台API系列中，进行统一的管理员身份和权限的验证。

发布

管理后台开发完成后，进行打包：

$ npm run build

打包后会生成dist目录，其目录结构如下：

./dist
├── css  # 样式
├── favicon.ico  # 图标
├── fonts # 字段
├── img # 图片
├── index.html # 首页文件
└── js # js代码

最后把dist目录里面全部的文件复制替换到public/admin/，更新到生产环境即可。

如何自定义国际化语言包

1.本项目全局注入了vue-i18n，切换语言原理很简单，在/src/locale目录下操作即可

2.在/src/locale/lang目录下创建需要的语言包js文件，例如zh-TW.js。
在该文件中以键值对的形式配置每个需要翻译的变量值。
注意：每添加一个需要翻译的变量key都要在该目录下的其他语言包配置相应的翻译值

3.配置/src/locale/index.js文件

   //引入自定义的语言包
   import customZhCn from './lang/zh-CN'
   import customZhTw from './lang/zh-TW'
   import customEnUs from './lang/en-US'
   //引入iview语言包
   import zhCnLocale from 'iview/src/locale/lang/zh-CN'
   import enUsLocale from 'iview/src/locale/lang/en-US'
   import zhTwLocale from 'iview/src/locale/lang/zh-TW'

   // 引进语言包
   // vue-i18n 6.x+写法
   const messages = {
     'zh-CN': Object.assign(zhCnLocale, customZhCn),
     'zh-TW': Object.assign(zhTwLocale, customZhTw),
     'en-US': Object.assign(enUsLocale, customEnUs)
   }
   export const i18n = new VueI18n({
     locale: lang,
     messages
   })
   
   // 配置项目中要调用的语言包，用于界面选择语言中下拉选项调用
   export const localList = {
     'zh-CN': '中文简体',
     'en-US': 'English'
   }

完成。

前端页面的鉴权

1.admin权限配置方法: 运行项目 >> 使用超级管理员登录后台管理admin >> 在权限管理目录中进行权限管理
① 权限分配的页面根据前端代码中/src/router路由表的路径path进行一一对应, 在操作列表中的每个操作代表一个页面的权限, 点击添加新操作可添加一个新路径的权限控制
② 对每个页面的权限分配还可以通过分配给用户类型或者特定用户ID进行权限分配
③ 对子级别路由的path进行分配可控制子级别页面的权限
对父级别路由的path进行分配可控制父级别页面的权限以及在页面左侧目录中的展示情况
父子路由的权限配置相互独立

2.鉴权原理:
admin和platform项目中vueRouter的路由分为/src/router/router.js中的基础页面以及/src/router/aysnRouters.js中的异步路由。
异步路由aysnRouters的加载需要前端调接口获得相应账号的权限数组permission (permission与aysnRouters进行匹配后通过addRouter方法加载到项目路由表中)
二次开发可对基础路由和异步路由进行修改, 添加新异步路由后可使用超管账号对新路径进行添加新操作

3.在该项目vue组件开发中判断运行时路径是否有访问权限的方法
/src/libs/util.js中的hasPermission方法
开发中可能遇到以下场景: 设置一个button, 点击跳转到某个需要权限的页面, button的显示隐藏与是否有权限相关
例如Platform项目中的/src/view/account/accountInfo.vue(具体可参见项目源码)

<!-- /src/view/account/accountInfo.vue -->
<template>
  <div class="content-layer accountInfo min-h">
    <h3>{{$t('developer_info')}}</h3>
    <div class="content">
      <header class="header">
        <img :src="avatar">
        <span class="username">{{userProfile.username }}</span>
        <!-- 示例: 通过/account/accountSettings权限情况, 判断是否显示组件 -->
        <!-- 将权限状态保存在showAccess后 绑定组件判断显示隐藏-->
        <Button v-if="showAccess" @click="setInfo">{{$t('developer_info_alter')}} >></Button>
    </header>
      <Table
      :columns="columns1"
      :data="data1"
      :show-header=false
      width=660
      >
      </Table>
    </div>

  </div>
</template>

// /src/view/account/accountInfo.vue
// hasPermission方法判断是否有访问该路径的权限
import { getToken, hasPermission } from '@/libs/util'
export default {
  name: 'accountInfo',
  computed: {
    // 用计算属性保存hasPermission的状态值,用于组件v-if判断
    showAccess () {
      return hasPermission('/account/accountSettings')
    }
  }
}

// 绑定完成。

6.2 KiB Raw Permalink Blame History Unescape Escape