1 Star 1 Fork 0

baiy / Cadmin-client-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Cadmin的客户端实现 vue+iview

项目地址: [github] [gitee]

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

依赖

注意:当前使用的是iview 3

安装

// 安装
npm install
// 开发
npm run serve
// 编译
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 页面标题模板
import {config} from '/src/helper'
// 获取配置
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 组件内部

// get 请求
this.$request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();       
// post 请求
this.$request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();

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

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

发送请求时无需关心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()方法才会发起请求

任意位置

import {request} from '/src/plugins/request'
import {actionUrl} from '/src/helper'

// 生成标准服务端action请求地址 已自动处理action/token参数
let url = actionUrl('action')

request({ 
    type:"get", // 请求方法
    data:{}, // 请求数据
    dataType:"json", // 响应格式
    contentType:"application/x-www-form-urlencoded",
    url:"", // 请求地址
    success, // 成功回调
    error, // 异常回调
    complete  // 完成回调
})

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

内置组件

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

显示后台指定用户名称

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

id:用户ID

default:用户不存在显示文字

权限检查

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

without 插槽为可选

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

输入框式文件上传

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

列表页组件

<table-lists></table-lists>

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

字段映射

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

以上代码输出:禁用

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

The MIT License (MIT) Copyright © 2019 baiy.org Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

Cadmin vue客户端 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/baiy/Cadmin-client-vue.git
git@gitee.com:baiy/Cadmin-client-vue.git
baiy
Cadmin-client-vue
Cadmin-client-vue
master

搜索帮助

14c37bed 8189591 565d56ea 8189591