Skip to content
AMS是基于 Vue.js 和 Element组件库、通过JSON配置来快速搭建管理后台的一整套前端解决方案
JavaScript Vue Other
Branch: master
Clone or download
Latest commit cbcf015 Sep 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build feat: v0.15.11 Sep 16, 2019
docs feat: v0.15.11 Sep 16, 2019
examples feat: v0.15.11 Sep 16, 2019
lib feat: v0.15.11 Sep 16, 2019
packages feat: v0.15.11 Sep 16, 2019
src
test feat: 同步主库最新代码 Aug 21, 2019
.babelrc 立项 Aug 7, 2019
.editorconfig 立项 Aug 7, 2019
.eslintignore eslint 问题处理 Aug 23, 2019
.eslintrc.js feat: v0.15.11 Sep 16, 2019
.gitignore 立项 Aug 7, 2019
.npmignore 立项 Aug 7, 2019
.postcssrc.js 立项 Aug 7, 2019
FAQ.md 立项 Aug 7, 2019
LICENSE 立项 Aug 7, 2019
README.md v0.15.6 Sep 6, 2019
jest.config.js 立项 Aug 7, 2019
lerna.json
package.json feat: v0.15.11 Sep 16, 2019

README.md

AMS logo

AMS

AMS (admin materiel system),管理后台物料系统。

AMS是基于 Vue.jsElement组件库、通过JSON配置来快速搭建管理后台的一整套解决方案

npm 安装

npm i @ams-team/ams -S

CDN

目前可以通过 unpkg.com/@ams-team/ams 获取到最新版本的资源,在页面上引入 js 文件即可开始使用。

<!-- 引入ams库 -->
<script src="https://unpkg.com/@ams-team/ams/lib/ams.js"></script>

快速开始

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

第一步,注册资源

ams.resource('demoRes', { // ”demoRes“为资源名
    api: {
        prefix: 'https://easy-mock.com/mock/5a0023effbbb09615044cb82/', // 接口前缀
        update: 'update', // 更新表单数据,值为更新接口的path,和接口前缀组成最终请求的url
        read: 'read', // 读取表单数据,值为读取接口的path
    },
    fields: { // 字段
        id: { // “id”为字段名
            type: 'text', // 字段类型
            label: '文本' // 该字段显示在页面的文本标签
        },
        testRate: {
            type: 'rate',
            label: '评分'
        },
        testTextarea: {
            type: 'textarea',
            label: '评语'
        }
    }
})

第二步,注册区块

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

第三步,渲染区块

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

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

相关链接

浏览器支持

现代浏览器 及 Internet Explorer 10+。

开发团队

来自vip.com的开发者:

vip.com以外的开发者:

社区互助

官方微信群: 请先搜索添加群主 viptech128(备注 AMS),欢迎加入讨论交流!

LICENSE

Apache 2.0

You can’t perform that action at this time.