介绍

AMS 是什么

AMS 是 Admin Materials System 的首字母缩写，意为管理后台物料系统，是通过类JSON配置的形式来快速搭建管理后台的一整套解决方案。

AMS 目前提供以下能力：

  • 通过 @ams-team/ams 基础库，提供通过配置生成整个后台的能力，包含数据读取、数据展示、数据编辑、数据列表、数据校验等基本功能
  • 通过 @ams-team/cli 工具，提供快速搭建项目脚手架、编写定制模块、发布管理定制模块等功能。可前往查看编写定制物料>>

AMS假设你已经对其依赖的Vue前端框架介绍 - 图1和Element组件库介绍 - 图2有一定了解。如果还没，建议先去了解一下再来吧！

快速起步

安装

方式一：通过npm安装（依赖node环境）

  1. npm i --save @ams-team/ams vue element-ui vue-router

通过 Vue.use() 明确地安装ams功能：

  1. import ams from '@ams-team/ams';
  3. Vue.use(ams);

建议通过我们的cli工具来创建一个AMS项目！

方式二：直接用 script 引入

注意，需要先引入Vue.js、element-ui的依赖

  1. <!-- Vue.js -->
  2. <script src="https://unpkg.com/vue"></script>
  4. <!-- element-ui -->
  5. <script src="https://unpkg.com/element-ui@2.11.1"></script>
  6. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css"/>
  8. <!-- 引入ams库 -->
  9. <script src="https://unpkg.com/@ams-team/ams/lib/ams.js"></script>

尝试AMS的最简单的方式是使用JSRUN上的官方入门Demo介绍 - 图3。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。

使用

AMS的核心思想是通过规范数据接口的数据结构，再用类JSON的格式配置对应的 区块 和 资源，即可渲染成有UI和数据交互的前端界面。

第一步，注册资源

  1. ams.resource('demoRes', { // ”demoRes“为资源名
  2.     api: {
  3.         prefix: 'https://easy-mock.com/mock/5a0023effbbb09615044cb82/', // 接口前缀
  4.         update: 'update', // 更新表单数据，值为更新接口的path，和接口前缀组成最终请求的url
  5.         read: 'read', // 读取表单数据，值为读取接口的path
  6.     },
  7.     fields: { // 字段
  8.         id: { // “id”为字段名
  9.             type: 'text', // 字段类型
  10.             label: '文本' // 该字段显示在页面的文本标签
  11.         },
  12.         testRate: {
  13.             type: 'rate',
  14.             label: '评分'
  15.         },
  16.         testTextarea: {
  17.             type: 'textarea',
  18.             label: '评语'
  19.         }
  20.     }
  21. })

第二步，注册区块

  1. ams.block('demo', { // “demo”为区块名
  2.     type: 'form', // 区块类型，“form”代表表单类型
  3.     ctx: 'edit', // 状态，“edit”代表为可编辑
  4.     resource: 'demoRes', // 该区块挂载的资源
  5.     operations: { // 操作
  6.         submit: { // 操作触发的事件名
  7.             type: 'button', // 操作类型
  8.             label: '提交' // 操作按钮显示的文案
  9.         }
  10.     },
  11.     events: { // 事件流
  12.         init: '@read', // “read”是内置的读取数据操作
  13.         submit: '@update' // “update”是内置的更新数据操作
  14.     }
  15. });

第三步，渲染区块

  1. // 渲染名字为“demo”的区块
  2. ams.render('demo')

我们已经成功完成了第一个AMS应用的配置了，通过简单的配置，不需要写UI和复杂的逻辑代码，就可以搭建出具备了数据读取、数据展示、数据编辑等基本功能的表单页面。

点击查看 案例教程，带你搭建一个包含菜单的完整AMS系统应用。