Skip to content

Latest commit

 

History

History
217 lines (176 loc) · 10.5 KB

README.md

File metadata and controls

217 lines (176 loc) · 10.5 KB
Raw

配页坊: 简称配方 - 为配置页面而生, 专注于配置后台页面

Build Status Known Vulnerabilities changelog license

基于 amis-admin 提供以配置的方式快速搭建(后台)页面的能力, 释放前端人力, 提升整体人效

名字灵感来源: 《长安十二时辰》, 长安一百零八坊

坊，先秦开始称“里”“闾”“闾里”，是中国古代城市居住区组织的基本单位，南北朝开始出现“坊”的称呼，隋朝开始正式改称“坊”，唐代里、坊称呼互相使用，长安城以坊为基本单位的格局称为“里坊制”。

试一试 Playground

page-schema-playground

为什么发起配页坊项目?

哪些页面可以配置出来?

可以毫不谦虚地说, 任何页面都可以"配置"出来. 当然了, 这背后主要是感谢 百度 AMis 提供的配置化能力, 我们主要是应用这个能力, 快速服务于业务, 体现出技术的价值.

前端低代码框架，通过 JSON 配置就能生成各种后台页面。

目前在百度大量用于内部平台的前端开发，已有 100+ 部门使用，创建了 1.2w+ 页面。

基于 AMis 的特点, 适合使用的场景有

  • 各种 PC 端后台系统
  • 列表(增删改查), 弹窗, 表单(支持联动)

运作原理

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

page-schema-player

快速开始

  • 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 项目

文件详解

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"
    }
}

    • 在 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",
}

如何自定义组件?

构建部署

npm run build

最终你只需要将 dist 目录下的所有文件部署到服务器上就可以了, 例如做为静态资源上传到阿里云 OSS.

FAQ