amis动态调用的Hello World

最新推荐文章于 2024-04-03 14:31:29 发布

保罗贝香

最新推荐文章于 2024-04-03 14:31:29 发布

阅读量1.3k

点赞数

分类专栏： AMIS 文章标签：前端

本文链接：https://blog.csdn.net/birdkaka/article/details/123678230

版权

AMIS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天被一篇JSON打造前端界面的标题所吸引，所以特地找了各种例子来看一下，无奈网上的诸多例子要不是太简单（所有构造直接写在HTML里），要嘛就是过分的复杂（装配了太多的功能，要仅仅当前端来学习一下，要好好研究一番）。

好不容易在一篇“amis：百度开源的低代码前端框架——简单引入示例。使用原生HTML避免打包部署。” 发现了新大陆，然而虽然是搭好了框架，但确实还是缺少一些完整的配套，昨天尝试了一下，还算幸运，装配成功，算是一个完整的简单例子供分享学习。

原文的代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>amis百度低代码</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <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="https://houtai.baidu.com/v2/csssdk" />
    <style>
        html,
        body,
        .amiss {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="amisId" class="amiss"></div>
    <script src="https://houtai.baidu.com/v2/jssdk"></script>
    <script type="text/javascript">
        (function () {
            let amis = amisRequire('amis/embed')
            $.ajax({
                type: 'GET',
                // 只写了一个简单的原生ajax 实际情况需要注意headers 和 type 
                // 下面两个URL是 ：一个获取数据 格式为字符串 JSON.parse转JSON 另一个URL为提交保存新的JSON
                // 思路是 首先获取接口中的数据 data 转成JSON串 渲染到页面 如果需要更改页面上面的配置的话 需要写一个提交页面 去把百度amis上面的例子的JSON复制过去 提交保存到数据库
                // HTML文件可以直接上传到服务器 你通过服务器地址 比如 http://xxx:xx/xx/xx/demo.html  你使用框架的时候只需要把框架搭好路由配置好 iframe引入就可以 
                // 如果后台比较给力的情况下 不需要你单独写HTML 直接后台通过你给的格式生成 到时候只需要返给你一个http链接就可以
                // url:'',
                url: '',
                success: function (result) {
                    console.log(result.data)
                    let amisData = amis.embed('#amisId', JSON.parse(result.data));
                }
            })
        })()
    </script>
</body>
</html>

显然对于URL的实现没有一个具体的例子，那我们就自己尝试造一个

SPRINTBOOT 构造一个服务还是非常方便的，代码如下，返回值是示例照抄的

@PostMapping(value = "/qryAmisHelloWorld", produces = "application/json;charset=UTF-8")
public Object qryAmisHelloWorld(@RequestBody BaseReportRequest rpt) {
    String strQry="{\n" +
            "  \"type\": \"page\",\n" +
            "  \"title\": \"表单页面\",\n" +
            "  \"body\": {\n" +
            "    \"type\": \"form\",\n" +
            "    \"mode\": \"horizontal\",\n" +
            "    \"api\": \"https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm\",\n" +
            "    \"controls\": [\n" +
            "      {\n" +
            "        \"label\": \"Name\",\n" +
            "        \"type\": \"text\",\n" +
            "        \"name\": \"name\"\n" +
            "      },\n" +
            "      {\n" +
            "        \"label\": \"Email\",\n" +
            "        \"type\": \"email\",\n" +
            "        \"name\": \"email\"\n" +
            "      }\n" +
            "    ]\n" +
            "  }\n" +
            "}";

    return strQry;

}

同时鉴于构造的服务为POST，相应的HTML代码也需要调整，此处加了JSON，便于后期动态入参，完整如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>amis百度低代码</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <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="https://houtai.baidu.com/v2/csssdk" />
    <style>
        html,
        body,
        .amiss {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="amisId" class="amiss"></div>
    <script src="https://houtai.baidu.com/v2/jssdk"></script>
    <script type="text/javascript">
        (function () {
            let amis = amisRequire('amis/embed')
            $.ajax({
                type: 'POST', 
				data:'{"wsid":"1234"}', 
				contentType: 'application/json',
				dataType:'json',
                // 只写了一个简单的原生ajax 实际情况需要注意headers 和 type 
                // 下面两个URL是 ：一个获取数据 格式为字符串 JSON.parse转JSON 另一个URL为提交保存新的JSON
                // 思路是 首先获取接口中的数据 data 转成JSON串 渲染到页面 如果需要更改页面上面的配置的话 需要写一个提交页面 去把百度amis上面的例子的JSON复制过去 提交保存到数据库
                // HTML文件可以直接上传到服务器 你通过服务器地址 比如 http://xxx:xx/xx/xx/demo.html  你使用框架的时候只需要把框架搭好路由配置好 iframe引入就可以 
                // 如果后台比较给力的情况下 不需要你单独写HTML 直接后台通过你给的格式生成 到时候只需要返给你一个http链接就可以
                // url:'',
                url: 'http://localhost:8004/amisService/qryAmisHelloWorld',
                success: function (result) {
                    console.log(result)
					    console.log(result.data)
                    let amisData = amis.embed('#amisId', result);
                }
            })
        })()
    </script>
</body>
</html>

效果如下，至此HELLO WORLD成功~~~