配页坊: 简称配方 - 为配置页面而生, 专注于配置后台页面
基于 amis-admin 提供以配置的方式快速搭建(后台)页面的能力, 释放前端人力, 提升整体人效
名字灵感来源: 《长安十二时辰》, 长安一百零八坊
坊,先秦开始称“里”“闾”“闾里”,是**古代城市居住区组织的基本单位,南北朝开始出现“坊”的称呼,隋朝开始正式改称“坊”,唐代里、坊称呼互相使用,长安城以坊为基本单位的格局称为“里坊制”。
试一试 Playground
为什么发起配页坊项目?
哪些页面可以配置出来?
可以毫不谦虚地说, 任何页面都可以"配置"出来. 当然了, 这背后主要是感谢 百度 AMis 提供的配置化能力, 我们主要是应用这个能力, 快速服务于业务, 体现出技术的价值.
前端低代码框架,通过 JSON 配置就能生成各种后台页面。
目前在百度大量用于内部平台的前端开发,已有 100+ 部门使用,创建了 1.2w+ 页面。
基于 AMis 的特点, 适合使用的场景有
- 各种 PC 端后台系统
- 列表(增删改查), 弹窗, 表单(支持联动)
运作原理
- 本仓库可以理解为是一个根据页面配置信息来渲染页面的播放器, 即该项目名字的由来:
page-schema-player
- 类似于视频播放器, 读取视频文件(例如
video.mp4
), 然后播放(渲染)视频 page-schema-player
则是加载远程的页面配置文件, 例如 https://ufologist.github.io/page-schema/_demo/crud-load-once.json, 然后根据这个配置信息将页面渲染出来
https://ufologist.github.io/page-schema-player/index.html?_schema=https://ufologist.github.io/page-schema/_demo/crud-load-once.json
--------------------------------------------------------- -----------------------------------------------------------------
↓ ↓
page-schema-player 页面的 URL 页面配置文件的 URL
快速开始
-
clone
page-schema-player
项目以定制功能和做私有化部署git clone https://github.com/ufologist/page-schema-player.git
-
启动
page-schema-player
项目npm install npm start
例如:
http://localhost:8080
文件详解
page-schema-player/
|── src/
| |── index.html - 页面
| |── index.tsx - 应用的入口
| |
| |── app/ - 应用的主逻辑
| | |── App.tsx - 加载 schema 转交给 AMisRenderer 来渲染页面
| | |── AMisRenderer.tsx - AMis 渲染器完成页面的渲染
| | |── info-page-schema.ts - 封装提示页的 schema
| | |── load-schema.ts - 加载 schema 文件
| | └── polyfill.tsx - ES2015 的一些 polyfill
| |
| └── ext/ - 应用的扩展逻辑
| |── amis-components/ - 用于放置 AMis 自定义组件
| | └── Demo.tsx
| |
| |── theme.less - 覆盖 AMis 的样式, 用于定制皮肤
| |── get-default-mode.ts - 获取默认的环境模式(实现自动识别的规则)
| |── is-in-white-list.ts - 加载 schema 文件的白名单规则
| |── adapt-response.ts - 适配各种接口到 AMis 标准的接口规范
| |── validations.ts - 扩展验证规则
| |── renderer-defaults.ts - 用于覆盖 AMis 组件的一些默认值
| └── util.ts - 工具函数
└── ...
内置功能
除了 AMis 自带的功能, page-schema-player
主要在应用层面封装了很多实用功能
- 启动屏(骨架屏) loading 效果
- 支持自动识别环境模式, 或者通过 URL 的
_mode
参数指定环境模式(例如 dev/test/stage/production) - 通过 URL 的
_schema
参数加载页面的配置信息, 支持白名单机制 - 页面级错误提示, 例如
_schema
加载失败 - 将页面配置的
title
作为浏览器页面的标题 - 优化 HTTP 接口的错误提示, 源自 standard-http-client
- 预留定制皮肤
- 预留扩展验证规则
- 预留覆盖 AMis 组件的一些默认值
- 优化了 webpack 构建配置, 避免了一些坑
- 可实现内置具名的
adaptor
, 例如通过filter:
基于过滤器来适配数据, 使用方法为在api
中配置或者在 URL 参数中指定内置adaptor
的名称-
在
api
中配置"api": { "url": "/list", "adaptor": { "name": "your_adaptor_name" } }
-
在
api.url
参数中指定:_adaptor=your_adaptor_name
-
- 实现未登录处理器: 当发现接口返回某种状态时, 就重定向到某个页面. 使用方法为在
api
中配置_unauthorized
或者在 URL 参数中指定内置_unauthorized
处理器的名称-
在
api
中配置_unauthorized
, 支持多种方式- 方式1: 指定内置处理器的名字(
handler: 'xxx'
), 例如只需要指定未登录处理器的名字为demo
, 那么只要接口遇到401
的状态码, 就自动跳转到某个统一登录页 - 方式2: 指定方法完全自定义逻辑(
handler: function(result)
) - 方式3: 指定状态码(
status
)和重定向页面(redirectUrl
)以及重定向参数的名称(redirectParamName
)
// 最简单的方式, 通过字符串来指定内置未登录处理器的名字 "api": { "_unauthorized": "demo" } // 当指定方法时, 则可以完全自定义逻辑 "api": { "_unauthorized": function(result) { alert('在这里实现判断未登录的逻辑, 并完成后续动作'); } } // 当使用对象来指定时, 则设置 `handler` 属性, 也是支持字符串或者方法 "api": { "_unauthorized": { "handler": "demo" } } // 当使用对象来指定时, 可以通过设置 status, redirectUrl, redirectParamName 属性来自定义重定向 // 即当接口返回的状态为 status 时, 重定向到 redirectUrl, 重定向时会将当前页面的 URL 传给 redirectParamName 指定的那个参数 "api": { "_unauthorized": { "status": 401, "redirectUrl": "//github.com/ufologist", // "redirectUrl": "${_env.api}", // redirectUrl 支持使用变量, 会传入 `_env` 数据 "redirectParamName": "redirect_uri" } }
- 方式1: 指定内置处理器的名字(
-
在
api.url
参数中指定:_unauthorized=your_unauthorized_name
-
- 在
window.amisEnv
上暴露了 AMis 的内部方法, 方便在外部场景中需要时使用(例如弹一个notify
或者发一个 HTTP 请求)amisEnv.notify('error', '内容'); amisEnv.alert('内容', '标题'); amisEnv.confirm('内容', '标题').then(function(confirm) { if (confirm) { alert('确定'); } else { alert('取消'); } }); amisEnv.copy('内容'); amisEnv.fetcher({ method: 'get', url: 'https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2' }).then(function(response) { console.log('fetcher', response); });
为了方便使用, 内置了一些全局数据, 可以在页面的配置中使用这些值, 具体请参考数据作用域
_qsParams
: URL 上的参数_definitions
: 页面配置文件中定义的definitions
字段_env
: 根据_mode
匹配出页面配置文件中定义的definitions.env
, 即_mode=dev
则获取到的是definitions.env.dev
例如
-
在内容中使用
{ "title": "使用内置的全局数据", "body": "${_qsParam._schema}" }
-
在
api
的 url 中使用"api": { "url": "${_env.api | raw}/list", }
如何自定义组件?
- 实现自定义组件的说明文档
- 将自定义组件放置在
src/ext/amis-components
目录下Wysiwyg.tsx
实现基于 UEditor 的富文本编辑器自定义组件来替代 AMis 自带的富文本(Froala Editor)
构建部署
npm run build
最终你只需要将 dist
目录下的所有文件部署到服务器上就可以了, 例如做为静态资源上传到阿里云 OSS.