amis使用文档

本文档旨在帮助开发人员快速入门amis低代码开发平台。

简介

amis 是一个百度出品的低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

安装

1. node.js安装

下载地址： https://nodejs.org/en/download/

  • 根据系统类型进行选择下载，下载后进行安装。
  • 安装完成后进行环境变量的配置，我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，为nodejs添加系统环境变量。
  • 打开cmd输入node --version 输出版本号则说明安装成功

2. nginx安装

下载地址：http://nginx.org/en/download.html

选择Windows最新稳定版下载，浏览器下载很慢，建议复制下载链接迅雷下载

3. amis SDK下载

  • 在空白目录打开命令行工具，输入npm init 初始化项目，完成后目录会生成package.json
  • 输入npm i amis 下载amis依赖，此过程大概花费2~3分钟，下载好项目目录生成node_modules文件夹
  • 新建index.html文件
  • 在index.html文件中输入代码模板
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/sdk.css" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/helper.css" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script src="./node_modules/amis/sdk/sdk.js"></script>
    <script type="text/javascript">
        (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          
        };
        let amisScoped = amis.embed('#root', amisJSON);
      })();
    </script>
</body>

</html>

amis在线编辑器

为了提高网页开发速度，一般先使用在线编辑器拖拽配置开发，然后将相应的json字符串拷贝到本地项目文件中

在线编辑器地址： https://aisuda.github.io/amis-editor-demo/

页面布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQlKbrXO-1653875803363)(C:\Users\redstar\AppData\Roaming\Typora\typora-user-images\image-20220518140923401.png)]

  • 左侧为菜单栏，分为四个大类包括页面大纲、组件、名字和代码
  • 中间为页面布局，即构建后的页面展示效果
  • 右侧为组件设置，可针对组件进行个性化参数配置

大纲

  • 网页布局，以树形结构展示，通常包括内容区、边栏和工具栏
  • 页面设计过程中合理使用大纲能够提高组件元素的查找速度
  • 使用大纲可以快速添加组件
  • 选中大纲中的节点后，点击代码即为该节点对应的json配置

组件

页面可用组件在组件栏中展示，使用时需要先点击组件添加的所在位置，然后选择组件后会弹出详细介绍，点击插入，在页面右侧可进行组件细节配置

代码

单击组件后选择代码栏可以获取该组件对应的json配置

开发流程

拖拽&配置开发

1. 数据查询
  1. 单击组件栏，选择功能中的增删改查并拖动到内容区中
  2. 点击格式校验并自动生成列配置，接口返回数据正确的话会自动生成列配置
    接口返回数据需要统一格式，示例格式如下：
{
"status": 0,
"msg": "",
"data": {
 "items": [
   {
     "id": "sample",
     "engine": "sample"
   }
 ],
 "total": 0
}
}
  1. 选择需要启用的功能，对列配置也可以进行相应的更改

jeecg低代码开发平台引入jquery 低代码前端工具_前端

  1. 点击确认后内容区会生成crud组件并自动请求接口，可以通过查询条件对数据进行筛选

jeecg低代码开发平台引入jquery 低代码前端工具_npm_02

2. 新增数据
  1. 点击内容区新增按钮，右侧选择动作，按钮行为选择抽出式弹框（Drawer）
  2. 点击配置抽出式弹框内容，修改文字组件显示内容，组件中查找文本框拖入内容区
  3. 右下角按钮组中新增按钮，选择新增按钮中的动作选项，按钮行为选择发送请求，同时配置目标API
  4. 如果需要携带参数，修改url格式为url+?param=${容器组件字段名}，amis会将容器组件中的内容拼接到url后面
  5. 在预览模式下测试新增功能

jeecg低代码开发平台引入jquery 低代码前端工具_前端_03

3. 修改数据
  1. 点击内容列表的编辑选项，右侧选择动作，点击配置弹窗内容
  2. 新增按钮组件，选择动作，按钮行为为发送请求。配置目标API
  3. 在预览模式下测试修改功能

jeecg低代码开发平台引入jquery 低代码前端工具_npm_04

4. 删除数据
  1. 点击内容列表的删除选项，右侧选择动作，按钮行为为发送请求
  2. 配置目标API，url最后应当携带当前记录唯一标识作为请求参数
  3. 在预览模式下测试删除功能

jeecg低代码开发平台引入jquery 低代码前端工具_前端_05

本地开发

  1. 大纲中点击增删改查（API）节点，选择代码
  2. 将json代码拷贝到本地index.html文件中的amisJSON中
  3. 删除items中内容（这部分内容通过接口获取）
  4. 同时可根据项目要求对json代码进行针对性的修改

项目部署

  1. 将项目目录拷贝到nginx文件根目录下的html文件夹中
  2. 修改conf文件夹下nginx.conf文件配置（可根据实际需求更改，这里将80端口改为81）
  3. 在nginx根目录下打开命令行工具输入命令nginx -s reload重新加载配置文件
  4. 打开浏览器输入网址（http://localhost:81/demo）查看效果

jeecg低代码开发平台引入jquery 低代码前端工具_npm_06