Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ufologist/page-schema-player

配页坊: 简称配方 - 为配置页面而生, 专注于配置后台页面
https://github.com/ufologist/page-schema-player

amis schema-form

Last synced: about 2 months ago
JSON representation

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

Awesome Lists containing this project

README 

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



[![Build Status][ci-status-image]][ci-status-url] [![Known Vulnerabilities][vulnerabilities-status-image]][vulnerabilities-status-url] [![changelog][changelog-image]][changelog-url] [![license][license-image]][license-url]



[vulnerabilities-status-image]: https://snyk.io/test/npm/page-schema-player/badge.svg

[vulnerabilities-status-url]: https://snyk.io/test/npm/page-schema-player

[ci-status-image]: https://travis-ci.com/ufologist/page-schema-player.svg?branch=master

[ci-status-url]: https://travis-ci.com/ufologist/page-schema-player

[license-image]: https://img.shields.io/github/license/ufologist/page-schema-player.svg

[license-url]: https://github.com/ufologist/page-schema-player/blob/master/LICENSE

[changelog-image]: https://img.shields.io/badge/CHANGE-LOG-blue.svg?style=flat-square

[changelog-url]: https://github.com/ufologist/page-schema-player/blob/master/CHANGELOG.md



基于 [amis-admin](https://github.com/fex-team/amis-admin) 提供以配置的方式快速搭建(后台)页面的能力, 释放前端人力, 提升整体人效



名字灵感来源: [《长安十二时辰》, 长安一百零八坊](https://baike.baidu.com/tashuo/browse/content?id=7a42871d4821ddfd79e93fa8)



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



试一试 [Playground](https://ufologist.github.io/page-schema/_demo/index.html)



![page-schema-playground](https://user-images.githubusercontent.com/167221/77224470-ef2f1100-6ba0-11ea-8506-358c6c30e357.gif)



## [为什么发起配页坊项目?](./context.md)



## 哪些页面可以配置出来?



可以毫不谦虚地说, 任何页面都可以"配置"出来. 当然了, 这背后主要是感谢 [百度 AMis](https://baidu.github.io/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/_demo/crud-load-once.json), 然后根据这个配置信息[将页面渲染出来](https://ufologist.github.io/page-schema-player/index.html?_schema=https%3A%2F%2Fufologist.github.io%2Fpage-schema%2F_demo%2Fcrud-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

```



![page-schema-player](https://user-images.githubusercontent.com/167221/77226063-4688ad80-6bb0-11ea-9eaf-fb79cfafa045.png)



## 快速开始



* 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` 项目](https://github.com/ufologist/page-schema#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B)



## 文件详解



```

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 效果](./src/index.html)

* 支持[自动识别环境模式](./src/ext/get-default-mode.ts), 或者通过 URL 的 `_mode` 参数指定环境模式(例如 dev/test/stage/production)

* 通过 URL 的 `_schema` 参数[加载页面的配置信息](./src/app/load-schema.ts), 支持[白名单机制](./src/ext/is-in-white-list.ts)

* [页面级错误提示](./src/app/info-page-schema.ts), 例如 `_schema` 加载失败

* 将页面配置的 `title` 作为浏览器页面的标题

* [优化 HTTP 接口的错误提示](./src/app/AMisRenderer.tsx), 源自 [standard-http-client](https://github.com/ufologist/standard-http-client)

* [预留定制皮肤](./src/ext/theme.less)

* [预留扩展验证规则](./src/ext/validations.ts)

* [预留覆盖 AMis 组件的一些默认值](./src/ext/renderer-defaults.ts)

* 优化了 [webpack 构建配置](./webpack.config.js), 避免了一些坑

* 可实现内置[具名的 `adaptor`](./src/ext/adapt-response.ts), 例如通过 `filter:` 基于过滤器来适配数据, 使用方法为在 `api` 中配置或者在 URL 参数中指定内置 `adaptor` 的名称

  * 在 `api` 中配置



    ```json

    "api": {

        "url": "/list",

        "adaptor": {

            "name": "your_adaptor_name"

        }

    }

    ```

  * 在 `api.url` 参数中指定: `_adaptor=your_adaptor_name`

* [实现未登录处理器](./src/ext/adapt-response.ts): 当发现接口返回某种状态时, 就重定向到某个页面. 使用方法为在 `api` 中配置 `_unauthorized` 或者在 URL 参数中指定内置 `_unauthorized` 处理器的名称

  * 在 `api` 中配置 `_unauthorized`, 支持多种方式

    * 方式1: 指定内置处理器的名字(`handler: 'xxx'`), 例如只需要指定未登录处理器的名字为 `demo`, 那么只要接口遇到 `401` 的状态码, 就自动跳转到某个统一登录页

    * 方式2: 指定方法完全自定义逻辑(`handler: function(result)`)

    * 方式3: 指定状态码(`status`)和重定向页面(`redirectUrl`)以及重定向参数的名称(`redirectParamName`)



    ```json

    // 最简单的方式, 通过字符串来指定内置未登录处理器的名字

    "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 请求)

  ```javascript

  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);

  });

  ```



为了方便使用, [内置了一些全局数据](./src/app/App.tsx), 可以在页面的配置中使用这些值, 具体请参考[数据作用域](https://baidu.github.io/amis/docs/advanced#%E6%95%B0%E6%8D%AE%E4%BD%9C%E7%94%A8%E5%9F%9F)

* `_qsParams`: URL 上的参数

* `_definitions`: 页面配置文件中定义的 `definitions` 字段

* `_env`: 根据 `_mode` 匹配出页面配置文件中定义的 `definitions.env`, 即 `_mode=dev` 则获取到的是 `definitions.env.dev`



例如

* 在内容中使用



  ```json

  {

      "title": "使用内置的全局数据",

      "body": "${_qsParam._schema}"

  }

  ```

* 在 `api` 的 url 中使用



  ```json

  "api": {

      "url": "${_env.api | raw}/list",

  }

  ```



## 如何自定义组件?



* [实现自定义组件的说明文档](https://baidu.github.io/amis/docs/dev)

* 将自定义组件放置在 `src/ext/amis-components` 目录下

  * [`Wysiwyg.tsx`](./src/ext/amis-components/Wysiwyg.tsx) 实现基于 UEditor 的富文本编辑器自定义组件来替代 AMis 自带的富文本(Froala Editor)



## 构建部署



```

npm run build

```



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



## [FAQ](./faq.md)