Cadmin的客户端实现 react+ant.design

项目地址: [github] [gitee]

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

依赖

• react
• localStorage
• redux
• axios
• ant.design
• lodash

整体环境使用create-react-app搭建

安装

// 安装
npm install
// 开发
npm start
// 编译
npm run build

更多开发构建问题见 create-react-app 文档

配置

配置文件地址:./env

使用create-react-app的环境变量

import {config} from "src/utils/helper";
// 获取配置
let name = config('SITE_NAME')

获取配置时REACT_APP__无需填写

路由与菜单

路由

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

1. 加载目录/src/pages
2. 加载文件index.tsx
3. 会自动过滤components文件夹中的文件

实现代码 import {getPages} from "src/utils/helper";

例如:

菜单

菜单分为两种类型:

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

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

redux

/reducers/

服务端请求

常用方法

import request from "src/utils/request";
// get 请求
request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();       
// post 请求
request('/system/request/remove').
    data({id:1}).
    showSuccessTip().
    success(r=>{
         console.log(r)
    }).get();

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

request() 方法返回值为 src/utils/request 中 request 对象

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

request对象

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

其他

当然你也可以自己导入axios 按照axios方式发起请求,通过下面的方法生成对应的服务端url以及附加token

import {actionUrl} from 'src/utils/helper'
let url = actionUrl('action')

内置组件

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

显示后台指定用户名称

import Username from 'src/components/username'
<Username id="1" default="未知用户" />

id:用户ID default:用户不存在显示文字 可选

权限检查

import AuthCheck from 'src/components/authCheck'
<AuthCheck action="/system/auth/assignMenu" without="无权限时展示">
    有权限是展示
</AuthCheck>

without 可选

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

字段映射

import FieldMap from 'src/components/fieldMap'
let map = [{v: 1, n: '启用'},{v: 2, n: '禁用'}]
<FieldMap value="2" map="{map}" valueField="v" descField="n" />

以上代码输出:禁用

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