Cadmin的客户端实现 vue+iview

项目地址: [github] [gitee]

在线文档地址: https://baiy.github.io/Cadmin/

依赖

注意:当前使用的是iview 3

安装

  1. // 安装
  2. npm install
  3. // 开发
  4. npm run serve
  5. // 编译
  6. npm run build

配置

配置文件地址:./env

使用vue-cli的环境变量实现

配置变量名 说明
VUE_APP_ADMIN_TOKEN_NAME 前端localStorage存储 token 名称
VUE_APP_API_URL_PREFIX 服务端数据请求入口地址
VUE_APP_API_ACTION_NAME 服务端数据请求地址中 action 变量名
VUE_APP_API_TOKEN_NAME 服务端数据请求地址中 token 变量名
VUE_APP_INDEX_URL 登录后首页(/)跳转地址
VUE_APP_SITE_NAME 站点名称 页面左上角
VUE_APP_SITE_TITLE_TPL 页面标题模板 
  1. import {config} from '/src/helper'
  2. // 获取配置
  3. let name = config('SITE_NAME')

获取配置时VUE_APP_无需填写

路由与菜单

路由

系统中页面路由已经实现动态自动加载,加载规则如下:

  1. 加载目录/src/views
  2. 加载文件后缀名’.vue’
  3. 会自动过滤components文件夹中的文件

例如:

文件路径 路由地址
/src/views/system/user.vue /system/user
/src/views/a/b/c/d.vue /a/b/c/d
/src/views/a/components/c.vue 不自动加载路由
/src/views/components/a/c.vue 不自动加载路由
菜单

菜单分为两种类型:

  1. 目录型: 点击该菜单会展示下级菜单,没有真实页面与之对应
  2. 页面型: 这种菜单有前端页面对应,点击进入对应的前端页面
  3. 链接型: http/https链接

页面型菜单: 后台配置菜单链接时对应这里 路由地址

store

/src/store/admin.js

- 数据信息
adminUser 当前用户信息
adminMenu 用户已授权菜单列表
adminAllUser 后台所有用户列表
adminRequest 用户已授权请求列表
adminAuth 用户关联权限
adminUserGroup 用户关联用户组
currentMenu 当前页面菜单信息

服务端请求

vue 组件内部

  1. // get 请求
  2. this.$request('/system/request/remove').
  3.     data({id:1}).
  4.     showSuccessTip().
  5.     success(r=>{
  6.          console.log(r)
  7.     }).get();       
  8. // post 请求
  9. this.$request('/system/request/remove').
  10.     data({id:1}).
  11.     showSuccessTip().
  12.     success(r=>{
  13.          console.log(r)
  14.     }).get();

this.$request() 方法参数为服务端请求action

this.$request() 方法返回值为 /src/plugins/request.js 中 ActionRequest 对象

发送请求时无需关心token,程序会自动附加

ActionRequest对象
方法 说明 默认值
dataType(string) 响应格式 json
contentType(string) 请求头Content-Type application/x-www-form-urlencoded
data(object) 请求数据对象 {}
showSuccessTip() 显示业务执行成功页面提示 不调用默认不提示
hideErrorTip() 隐藏业务执行异常页面提示 不调用默认提示
success(function) 业务执行成功回调函数 null
error(function) 业务执行异常回调函数 null
complete(function) 请求完成回调函数 null
get() 发起GET请求
post() 发起POST请求

只有调用get()/post()方法才会发起请求

任意位置

  1. import {request} from '/src/plugins/request'
  2. import {actionUrl} from '/src/helper'
  4. // 生成标准服务端action请求地址 已自动处理action/token参数
  5. let url = actionUrl('action')
  7. request({ 
  8.     type:"get", // 请求方法
  9.     data:{}, // 请求数据
  10.     dataType:"json", // 响应格式
  11.     contentType:"application/x-www-form-urlencoded",
  12.     url:"", // 请求地址
  13.     success, // 成功回调
  14.     error, // 异常回调
  15.     complete  // 完成回调
  16. })

当然你也可以自己导入axios 按照axios方式发起请求

内置组件

开发过程除了可以使用iviewui的组件外, 系统还内置一些与后台开发常用的组件

显示后台指定用户名称

  1. <username :id="1" default="未知用户" />

id:用户ID

default:用户不存在显示文字

权限检查

  1. <auth-check action="/system/auth/assignMenu">
  2.     有权限是展示
  3.     <span slot="without">无权限时展示</span>
  4. </auth-check>

without 插槽为可选

常用于根据用户指定请求的权限判断结果展示不同的内容

输入框式文件上传

  1. <upload-file v-model="url" action="/upload"></upload-file>

列表页组件

  1. <table-lists></table-lists>

该组件集成筛选框/分页等功能

字段映射

  1. let map = [{v: 1, n: '启用'},{v: 2, n: '禁用'}]
  1. <field-map value="2" :map="map" valueField="v" descField="n" />

以上代码输出:禁用

该组件常与映射字段的页面输出 valueField/descField 为可选