当前位置: 首页 > 工具软件 > amis > 使用案例 >

amis:百度开源的低代码前端框架——简单引入示例。使用原生HTML避免打包部署。

归星驰
2023-12-01

amis官方文档:https://baidu.gitee.io/amis/zh-CN/docs/index

首先我们要了解到什么是amis,什么是低代码前端框架。

低代码平台是适用于前端力量薄弱的团队,实现用极少部分的代码去实现需求的一套前端框架

用少量的代码节约开发时间

通过了解后,国内的低代码前端框架很多需要money, amis是百度下的开源框架。

近期遇到一个需求:1.使用低代码开发项目。

                                 2.要求写完的项目更具有自由行,用户可以随意的更改内容,样式和布局等等。

                                 3.要求用户改的时候不用通过前端工程师,直接不懂技术的人也可以更改。

我们可以了解到,需求是一个很简单的需求,开发完成后用户可以随意更改并且不通过前端编写代码,但是难处理的是如果使用框架的情况下(本人比较喜欢Vue和一些开源框架)需要涉及到的是打包部署,这一部分操作如果真的要处理也是有办法处理的只不过有些麻烦。通过挠掉了几根头发的代价想到了一个办法:

        通过HTML,引入amis,与后台沟通两条接口,一条保存数据,一条获取数据,上代码更直观。

<!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>

 整体的思路是:amis的代码展示为JSON格式,我们需要把渲染的JSON存到数据库,每次更改的时候需要用户去amis编辑器去编辑完成生成JSON,重新提交保存一下新的JSON,页面正常渲染。

amis编辑器的地址,使用方法,在下一篇文章。

 类似资料: