vue3.0 amis 低代码框架

原创已于 2024-01-18 16:14:10 修改 · 1.1w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#低代码

于 2023-06-08 14:25:27 首次发布

vue 专栏收录该内容

10 篇文章

订阅专栏

文章介绍了如何在Vue3项目中使用Amis，一个由百度开源的低代码框架，通过JSON配置快速生成页面。文章详细展示了安装步骤、封装组件AmisComponent以及动态渲染组件LowcodeEngine的实现过程，同时提到了axios的使用和接口请求的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

amis

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

组件地址：https://aisuda.bce.baidu.com/amis

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

Vue3 中使用

安装依赖

npm i amis

npm i copy-to-clipboard

封装组件 AmisComponent

<template> 
    <div id="amisid" ref="boxRef"></div>
</template>
<script setup lang="ts">
    import {defineProps,watch,ref} from "vue"
    import {ElMessage} from 'element-plus'
    import 'amis/sdk/sdk.js'
    import 'amis/lib/themes/default.css'
    import axios from 'axios'
    import copy from 'copy-to-clipboard'

    const props = defineProps({
        formid: {
            type: String,
            default: () => {
                return ''
            }
        },
        formjson: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })

    // @ts-ignore
    const amis = amisRequire('amis/embed');
    const boxRef = ref(null)

    watch(()=> props.formjson, (data)=>{
            onRendering(data)
        },
        {immediate: true,deep: true}
    )

    function onRendering(data:any){
        let theme = 'cxd'
        let amisScoped = amis.embed( 
            '#amisid',
            data,
            {
                updateLocation: (to, replace) => {},
            },
            {
                // 下面三个接口必须实现
                fetcher: ({
                    url, // 接口地址
                    method, // 请求方法 get、post、put、delete
                    data, // 请求数据
                    responseType,
                    config, // 其他配置
                    headers ,// 请求头
                    updateLocation
                }) => {
                    config = config || {};
                    config.withCredentials = true;
                    
                    // 设置接口地址
                    config.baseURL = import.meta.env.VITE_APP_BASE_API;
            
                    responseType && (config.responseType = responseType);
            
                    if (config.cancelExecutor) {
                        config.cancelToken = new (axios).CancelToken(
                            config.cancelExecutor
                        );
                    }
            
                    config.headers = headers || {};
                    
                    // 设置token
                    const isToken = (config.headers || {}).isToken === false
                    if (!isToken) {
                        config.headers['token'] = 'xxxx-xxxx-xxxx-xxxx' // 自行实现逻辑
                    }
            
                    if (method !== 'post' && method !== 'put' && method !== 'patch') {
                        if (data) {
                            config.params = data;
                        }
                
                        return (axios )[method](url, config);
                    } else if (data && data instanceof FormData) {
                        config.headers = config.headers || {};
                        config.headers['Content-Type'] = 'multipart/form-data';
                    } else if (data && typeof data !== 'string' && !(data instanceof Blob) && !(data instanceof ArrayBuffer)) {
                        data = JSON.stringify(data);
                        config.headers = config.headers || {};
                        config.headers['Content-Type'] = 'application/json';
                    }
            
                    return (axios )[method](url, data, config);
                },
                isCancel: (value) => (axios ).isCancel(value),
                copy: content => {
                    copy(content);
                    ElMessage.success('内容已复制到粘贴板');
                },
                theme
            }
        )
    }
</script>

动态渲染组件 LowcodeEngine

<template> 
    <amisComponent :formid="formid" :formjson="formjson"></amisComponent>
</template>
<script setup lang="ts">
    import {reactive, watch, ref} from "vue"
    import amisComponent from "../amis/AmisComponent.vue"
    import {useRoute,useRouter} from 'vue-router'

    const route = useRoute()
    const router = useRouter()
    const formid = ref('')
    const formjson = ref({})

    watch(()=> router.currentRoute, (data)=>{
            let _router:any = data.value
            formid.value = res.result.id
            formjson.value = {"type": "page","title": "标题","body": "Hello World!"}
            // TODO 根据绑定菜单获取页面JSON
        },
        {immediate: true,deep: true}
    )
    
</script>

路由处理

import request from '@/utils/request'
import Layout from '@/components/layout/Index.vue'

const modules = import.meta.glob('../views/**/**.vue')
const layoutModules = import.meta.glob("../components/layout/**.vue")

// 根据菜单构建动态路由
export const filterRouter = (routers:any, level:any) => {
    level = level || 0
    const accessedRouters = routers.filter( (router:any) => {
        if (router.isShow) {
            router.component = layoutModules[`../components/layout/LowcodeEngine.vue`]

            if (router.children && router.children.length) {
                router.children = filterRouter(router.children, level + 1)
            }
            return true
        }
        return false
    })
    return accessedRouters
}