代码拉取完成，页面将自动刷新
Cadmin的客户端实现 react+ant.design
在线文档地址: https://baiy.github.io/Cadmin/
整体环境使用create-react-app搭建
// 安装
npm install
// 开发
npm start
// 编译
npm run build
更多开发构建问题见 create-react-app 文档
配置文件地址:./env
使用
create-react-app的环境变量
| 配置变量名 | 说明 |
|---|---|
| REACT_APP_ADMIN_TOKEN_NAME | 前端localStorage存储 token 名称 |
| REACT_APP_API_URL_PREFIX | 服务端数据请求入口地址 |
| REACT_APP_API_ACTION_NAME | 服务端数据请求地址中 action 变量名 |
| REACT_APP_API_TOKEN_NAME | 服务端数据请求地址中 token 变量名 |
| REACT_APP_INDEX_URL | 登录后首页(/)跳转地址 |
| REACT_APP_SITE_NAME | 站点名称 页面左上角 |
| REACT_APP_SITE_TITLE_TPL | 页面标题模板 |
import {config} from "src/utils/helper";
// 获取配置
let name = config('SITE_NAME')
获取配置时
REACT_APP__无需填写
系统中页面路由已经实现动态自动加载,加载规则如下:
/src/pages
index.tsx
components文件夹中的文件实现代码
import {getPages} from "src/utils/helper";
例如:
| 文件路径 | 路由地址 |
|---|---|
| /src/pages/system/user/index.tsx | /system/user |
| /src/pages/system/user/index2.tsx | 不自动加载 |
| /src/pages/a/b/c/d/index.tsx | /a/b/c/d |
| /src/pages/a/components/c/index.tsx | 不自动加载 |
| /src/pages/components/a/index.tsx | 不自动加载 |
菜单分为两种类型:
页面型菜单: 后台配置菜单链接时对应这里 路由地址
/reducers/
| - | 路由地址 |
|---|---|
| user | 当前用户信息 |
| allUser | 后台所有用户列表 |
| menu | 用户已授权菜单列表 |
| request | 用户已授权请求列表 |
| auth | 用户关联权限 |
| userGroup | 用户已授权请求列表 |
| currentMenu | 当前页面菜单信息 |
| currentMenus | 当前菜单信息(包含父级菜单) |
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,程序会自动附加
| 方法 | 说明 | 默认值 |
|---|---|---|
| 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()方法才会发起请求
当然你也可以自己导入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:用户IDdefault:用户不存在显示文字 可选
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可选
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。