前端低代码工具amis使用文档

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 demotitle>
        <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" />
        
        
        
        
        <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
    }
    }
    
  3. 选择需要启用的功能,对列配置也可以进行相应的更改

前端低代码工具amis使用文档_第1张图片

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

前端低代码工具amis使用文档_第2张图片

2. 新增数据

  1. 点击内容区新增按钮,右侧选择动作,按钮行为选择抽出式弹框(Drawer)

  2. 点击配置抽出式弹框内容,修改文字组件显示内容,组件中查找文本框拖入内容区

  3. 右下角按钮组中新增按钮,选择新增按钮中的动作选项,按钮行为选择发送请求,同时配置目标API

  4. 如果需要携带参数,修改url格式为url+?param=${容器组件字段名},amis会将容器组件中的内容拼接到url后面

  5. 在预览模式下测试新增功能

前端低代码工具amis使用文档_第3张图片

3. 修改数据

  1. 点击内容列表的编辑选项,右侧选择动作,点击配置弹窗内容

  2. 新增按钮组件,选择动作,按钮行为为发送请求。配置目标API

  3. 在预览模式下测试修改功能

前端低代码工具amis使用文档_第4张图片

4. 删除数据

  1. 点击内容列表的删除选项,右侧选择动作,按钮行为为发送请求

  2. 配置目标API,url最后应当携带当前记录唯一标识作为请求参数

  3. 在预览模式下测试删除功能

前端低代码工具amis使用文档_第5张图片

本地开发

  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)查看效果

前端低代码工具amis使用文档_第6张图片

你可能感兴趣的:(开源项目,前端,json,npm)