vue3.0 amis 低代码框架

您所在的位置：网站首页 › 低代码生成vue › vue3.0 amis 低代码框架

vue3.0 amis 低代码框架

2024-07-11 09:47| 来源: 网络整理| 查看: 265

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

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 = importa.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 } ) }

动态渲染组件 LowcodeEngine

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} )

路由处理

import request from '@/utils/request' import Layout from '@/components/layout/Index.vue' const modules = importa.glob('../views/**/**.vue') const layoutModules = importa.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 } 项目地址

Gitee: https://gitee.com/typ1805/tansci-boot

GitHub: https://github.com/typ1805/tansci-boot

【本文地址】

vue3.0 amis 低代码框架

vue3.0 amis 低代码框架

今日新闻

推荐新闻