- 前端和后端共享表单验证代码
- 自动生成前端表单
- 自动填充前端表单数据
- 前端和后端共享国际化语言文件
- 用户权限控制（开发阶段可按目录自动生成所有权限）
- 前端和后端代码分离，后端services代码可用任意语言编写
- 根据用户权限自动调整页面布局
- 完整的CRUD样例
- 提供Notification和用户信息菜单样例
- 列表控件样例（支持搜索、排序和分页）
- 表格控件样例（支持搜索、排序和分页）
- 对话框高度和宽度自适应
- 采用react-perfect-scrollbar作为滚动条
- 按样例代码自动生成脚手架代码
- 基于react，ant-design，dva，Mock 企业级后台管理系统最佳实践。
- 基于Antd UI 设计语言，提供后台管理系统常见使用场景。
- 基于dva动态加载 Model 和路由，按需加载。
- 使用roadhog本地调试和构建，其中Mock功能实现脱离后端独立开发。
- 浅度响应式设计。
详情请参考dva
生成的表单根据appSettings里的表单规则自动设置表单验证
class LoginForm extends React.Component {
render() {
const formProps = {
name: 'login',
fields: [{
id: 'user',
input: 'text',
placeholder: l('Username'),
inputProps: {
size: 'large',
onPressEnter: this.props.handleOk,
},
addonBefore: {
id: 'area',
select: [{
name: l('Beijing'),
value: 'bj',
}, {
name: l('Shenzhen'),
value: 'sz',
}],
defaultValue: 'bj',
placeholder: l('Please select area'),
}
}, {
id: 'pwd',
input: 'password',
placeholder: l('Password'),
inputProps: {
size: 'large',
onPressEnter: this.props.handleOk,
},
}, {
id: 'role',
select: [{
name: l('User'),
value: 'user',
}, {
name: l('Administrator'),
value: 'admin',
}],
defaultValue: 'user',
placeholder: l('Please select role'),
inputProps: {
multiple: true,
size: 'large',
onPressEnter: this.props.handleOk,
},
},],
...this.props,
}
return (<HorizontalFormGenerator {...formProps} />)
}
}<?php
$form_rule = array(
'name' => 'login',
'rules' => array(
'user' => array(
'required' => true,
'alphanumeric' => true,
'rangelength' => array(3, 32),
),
'pwd' => array(
'required' => true,
'rangelength' => array(6, 32),
'password' => true,
),
"option1" => array(
"required" => true,
"rangelength" => array(2, 3),
),
),
);├── /dist/ # 项目输出目录
├── /src/ # 项目源码目录
│ ├── /components/ # UI组件及UI相关方法
│ │ ├── skin.less # 全局样式
│ │ └── vars.less # 全局样式变量
│ ├── /ui/ # UI界面
│ │ └── app.js # 路由入口
│ ├── /models/ # 数据模型
│ ├── /requests/ # 数据接口
│ ├── /services/ # 后台服务
│ ├── /themes/ # 项目样式
│ ├── /mock/ # 数据mock
│ ├── /utils/ # 工具函数
│ │ ├── config.js # 项目常规配置
│ │ ├── menu.js # 菜单及面包屑配置
│ │ ├── config.js # 项目常规配置
│ │ ├── request.js # 异步请求函数
│ │ └── theme.js # 项目需要在js中使用到样式变量
│─├── /tools/ # 工具目录，比如自动生成代码
│ ├── route.js # 路由配置
│ ├── index.js # 入口文件
│ └── index.html
├── package.json # 项目信息
├── .babelrc # Babel配置
├── .eslintrc # Eslint配置
└── .roadhogrc.js # roadhog配置文件夹命名说明:
- components：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如
DataTable），方法首字母小写（如layer）,文件夹内主文件与文件夹同名，多文件以index.js导出对象（如./src/components/Layout）。 - ui：页面为单位以文件夹保存，
route.js存放路由配置信息，如果没有此文件，则将无法路由，文件夹名首字母小写（特殊除外，如UIElement）,文件夹内主文件以index.js导出，多文件时可建立components文件夹（如./src/ui/dashboard），如果有子路由，依次按照路由层次建立文件夹（如./src/ui/UIElement）。
克隆项目文件:
git clone https://github.com/steem/qwp-antd.git
进入目录安装依赖:
npm i 或者 yarn install
开发：
npm run dev
打开 http://localhost:8000构建：
npm run build
将会生成dist目录代码检测：
npm run lint自动生成代码：
npm run scaffold --module=system --object=customer --ops=create#del#edit#list --model=on --request=on --org=catagory项目部署：
由于路由需要rewrite支持，请参考 #269
后台service部分也可以通过jsonp方式独立部署
导航
CRUD
