让Erupt框架支持.vue文件做自定义页面模版

🕗 发布于 2024-11-05 14:51 vue

Erupt是什么？

Erupt 是一个低代码 全栈类 框架，它使用 Java 注解 动态生成页面以及增、删、改、查、权限控制等后台功能。

零前端代码、零 CURD、自动建表，仅需 一个类文件 + 简洁的注解配置，快速开发企业级 Admin 管理后台。

提供企业级中后台管理系统的全栈解决方案，大幅压缩研发周期，专注核心业务。

官网：https://www.erupt.xyz

官方文档：https://www.yuque.com/erupts/erupt

在Erupt框架中如果需要自定义页面时，我们就需要自己写一下html的页面内容和逻辑代码，习惯了写vue的小伙伴们在写Html的页面是不是感觉有点烫手了，那下面我们就来让Erupt支持使用.vue的文件方式自定义页面内容以及业务逻辑，项目中用的 vue3-sfc-loader 这个js依赖实现vue模版的加载渲染的。

一、搭建初始化Erupt的基础项目

我们直接参考Erupt的官方文档创建一个简单的SpringBoot项目，我这里是使用了Gradle的方法去管理依赖的，和使用Maven管理是一样的，贴上我的项目整体结构如下：

项目使用到的依赖：

二、下载需要的js依赖

我在项目中没有使用Erupt中提供个UI组件，我是自己去下载的比较新的ui组件，因为我觉得Erupt提供的UI组件的版本有点低，所以我就自己去下载了一些新版的ui组件及vue3

Vue3 v3.5.8 文档：https://cn.vuejs.org
Element-plus v2.8.3 文档：https://element-plus.org/zh-CN
Less v4 文档：https://less.bootcss.com
Unocss v0.62.4 文档：https://unocss.jiangruyi.com
Vue3-sfc-loader v0.9.5 文档：https://gitcode.com/gh_mirrors/vu/vue3-sfc-loader

以上就是我项目中使用到的js依赖了，我这边使用的是vue3的所以对应的vue-sfc-loader 就是vue3-sfc-loader ，如果你用的是vue2 就选择vue2-sfc-loader。

ui组件我这边选的是element-plus，当然也可以使用其他的UI组件，使用的方式都是差不多的。

三、创建自定义页面

因为我这边使用的模版解析的引擎是 freemarker， 所以我的页面模版的文件是以 .ftl 结尾的，它就是一个freemarker的模版文件。模版的文件需要放在项目的 resource/tpl 文件夹下，这个是Erupt 默认要求这么放的，不然做映射是访问不到的。

1. 常规写法

demo.ftl 是常规的写法，没有使用vue3-sfc-loader，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title>demo</title>
    <link href="${base}/components/element-plus/css/index.css" rel="stylesheet">
    <link href="${base}/css/loading.css" rel="stylesheet">
</head>
<body>
<!-- loading  start -->
<div id="loader">
    <div class="rotate-loading"></div>
    <b> 页面数据加载中 。。。</b>
</div>
<!-- loading end -->
<div id="app" un-cloak>
    <div class="p3 text-2xl text-center">{{message}} &nbsp;&nbsp;---->>&nbsp;&nbsp; {{count}}</div>
    <div class="p3">
        <el-card>
            <template #header>
                element-plus 展示
            </template>
            <div class="mb-4">
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </div>

            <div class="p3">
                <el-button circle>
                    <el-icon>
                        <Search/>
                    </el-icon>
                </el-button>
                <el-button type="primary" circle>
                    <el-icon>
                        <Edit/>
                    </el-icon>
                </el-button>
                <el-button type="success" circle>
                    <el-icon>
                        <Check/>
                    </el-icon>
                </el-button>
                <el-button type="info" circle>
                    <el-icon>
                        <Message/>
                    </el-icon>
                </el-button>
                <el-button type="warning" circle>
                    <el-icon>
                        <Star/>
                    </el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon class="mr1">
                        <Delete/>
                    </el-icon>
                    删除
                </el-button>
            </div>
        </el-card>
    </div>
</div>
</body>

<#-- freemarker 服务端变量获取 -->
<script type="application/javascript">
    var base = "${base}";
    var user = "${user}";
    console.log(base);
    console.log(user);

    function onloadRun() {
        // loading 隐藏
        window.onload = function() {
            // 页面加载后执行的代码
            let elementId = document.getElementById("loader");
            if (elementId) {
                elementId.style.display = "none";
            }
        };
    }
</script>

<#-- unocss 原子样式 https://unocss.jiangruyi.com -->
<script src="${base}/components/unocss/runtime.js"></script>

<#-- vue3 https://cn.vuejs.org -->
<script src="${base}/components/vue3/index.js"></script>

<#-- element-plus https://element-plus.org/zh-CN -->
<script src="${base}/components/element-plus/index.js"></script>

<#-- element-plus 图标 -->
<script src="${base}/components/element-plus/icons.js"></script>

<#-- element-plus 国际化修改为中文 -->
<script src="${base}/components/element-plus/zh_cn.js"></script>

<#-- 使用vue3 模板语法加载页面样例 -->
<script type="module">
    const {createApp, ref, reactive} = Vue;
    onloadRun();
    const app = createApp({
        setup() {
            const count = ref(1);
            const message = reactive("测试");
            return {
                message,
                count
            };
        }
    })
    // 引入ElementPlus组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 引入ElementPlus图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app")
</script>
</html>

2. vue模版加载的写法

vue3-sfc-loader-demo.ftl 是使用了vue3-sfc-loader去加载一个.vue模板文件的写法，具体的使用方法在官方文档里面都是有的，有兴趣的可以去看看，官方有很多的例子可以参考的很详细，下面是我自己写的，页面的具体内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title>vue3-sfc-loader-demo</title>
    <link href="${base}/components/element-plus/css/index.css" rel="stylesheet">
    <link href="${base}/css/loading.css" rel="stylesheet">
</head>
<body>
<!-- loading  start -->
<div id="loader">
    <div class="rotate-loading"></div>
    <b> 页面数据加载中 。。。</b>
</div>
<!-- loading end -->

<div id="app" un-cloak>
    <vue-component></vue-component>
</div>
</body>

<#-- freemarker 服务端变量获取 -->
<script type="application/javascript">
    var base = "${base}";
    var user = "${user}";
    console.log(base);
    console.log(user);

    function onloadRun() {
        // loading 隐藏
        window.onload = function () {
            // 页面加载后执行的代码
            let elementId = document.getElementById("loader");
            if (elementId) {
                elementId.style.display = "none";
            }
        };
    }
</script>

<#-- unocss 原子样式 https://unocss.jiangruyi.com -->
<script src="${base}/components/unocss/runtime.js"></script>

<#-- vue3 https://cn.vuejs.org -->
<script src="${base}/components/vue3/index.js"></script>

<#-- 加载vue3-sfc-loader https://gitcode.com/gh_mirrors/vu/vue3-sfc-loader -->
<script src="${base}/components/vue3-sfc-loader/index.js"></script>

<#-- less 依赖 https://less.bootcss.com -->
<script src="${base}/components/less/index-v4.js"></script>

<#-- element-plus https://element-plus.org/zh-CN -->
<script src="${base}/components/element-plus/index.js"></script>

<#-- element-plus 图标 -->
<script src="${base}/components/element-plus/icons.js"></script>

<#-- element-plus 国际化修改为中文 -->
<script src="${base}/components/element-plus/zh_cn.js"></script>

<#-- 使用 vue3-sfc-loader 加载页面样例 -->
<script type="module">
    const {createApp, defineAsyncComponent} = Vue;
    const {loadModule} = window['vue3-sfc-loader'];

    onloadRun();

    // 必要的参数:
    // vue 用来加载vue的模块，在vue模版中使用如： import { computed, onDeactivated, onMounted, ref } from "vue";
    // element-plus 用来加载element-plus的模块  在vue模版中使用如：import { button } from "element-plus";
    // 自定义的：
    // less 用来加载less的样式解析模块（模版使用了less就需要给定此参数）在vue模版中使用如：<style scoped lang="less"></style>
    const options = {
        moduleCache: {
            vue: Vue,
            "element-plus": ElementPlus,
            less: less
        },
        async getFile(url) {
            return await fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(res.statusText + " " + url), {res});
                return {
                    getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text()
                };
            });
        },
        addStyle(textContent) {
            const style = Object.assign(document.createElement("style"), {textContent});
            const ref = document.head.getElementsByTagName("style")[0] || null;
            document.head.insertBefore(style, ref);
        }
    };

    const tmpPath = top.location.pathname + "templates/myComponent.vue"

    const app = createApp({
        components: {
            'my-component': defineAsyncComponent(() => loadModule(tmpPath, options))
        },
        template: '<my-component></my-component>'
    });

    // 引入ElementPlus组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 引入ElementPlus图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app")
</script>
</html>

四、映射页面地址

@TplAction(value = "demo", path = "/tpl/demo/demo.ftl")

// value 是访问的值，可以在菜单的配置的值
// path 是页面的路径

五、创建访问菜单

1. 普通自定义页面

2. vue模版自定义页面

六、访问页面

七、扩展点

使用一个freemarker模版文件就可以加载所有指定名字的vue模版文件了，具体的操作案例如下：

1. 创建一个freemarker模版文件

内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title>公共页面模板</title>
    <link href="${base}/components/element-plus/css/index.css" rel="stylesheet">
    <link href="${base}/css/loading.css" rel="stylesheet">
</head>
<body>
<!-- loading  start -->
<div id="loader">
    <div class="rotate-loading"></div>
    <b> 页面数据加载中 。。。</b>
</div>
<!-- loading end -->

<div id="app" un-cloak>
    <vue-component></vue-component>
</div>
</body>

<#-- freemarker 服务端变量获取 -->
<script type="application/javascript">
    // 获取指定的vue模板名称
    var vue_tmp_name = "${vue_tmp_name}";

    function onloadRun() {
        // loading 隐藏
        window.onload = function () {
            // 页面加载后执行的代码
            let elementId = document.getElementById("loader");
            if (elementId) {
                elementId.style.display = "none";
            }
        };
    }
</script>

<#-- unocss 原子样式 https://unocss.jiangruyi.com -->
<script src="${base}/components/unocss/runtime.js"></script>

<#-- vue3 https://cn.vuejs.org -->
<script src="${base}/components/vue3/index.js"></script>

<#-- 加载vue3-sfc-loader https://gitcode.com/gh_mirrors/vu/vue3-sfc-loader -->
<script src="${base}/components/vue3-sfc-loader/index.js"></script>

<#-- less 依赖 https://less.bootcss.com -->
<script src="${base}/components/less/index-v4.js"></script>

<#-- element-plus https://element-plus.org/zh-CN -->
<script src="${base}/components/element-plus/index.js"></script>

<#-- element-plus 图标 -->
<script src="${base}/components/element-plus/icons.js"></script>

<#-- element-plus 国际化修改为中文 -->
<script src="${base}/components/element-plus/zh_cn.js"></script>

<#-- 使用 vue3-sfc-loader 加载页面样例 -->
<script type="module">
    const {createApp, defineAsyncComponent} = Vue;
    const {loadModule} = window['vue3-sfc-loader'];

    onloadRun();

    // 必要的参数:
    // vue 用来加载vue的模块，在vue模版中使用如： import { computed, onDeactivated, onMounted, ref } from "vue";
    // element-plus 用来加载element-plus的模块  在vue模版中使用如：import { button } from "element-plus";
    // 自定义的：
    // less 用来加载less的样式解析模块（模版使用了less就需要给定此参数）在vue模版中使用如：<style scoped lang="less"></style>
    const options = {
        moduleCache: {
            vue: Vue,
            "element-plus": ElementPlus,
            less: less
        },
        async getFile(url) {
            return await fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(res.statusText + " " + url), {res});
                return {
                    getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text()
                };
            });
        },
        addStyle(textContent) {
            const style = Object.assign(document.createElement("style"), {textContent});
            const ref = document.head.getElementsByTagName("style")[0] || null;
            document.head.insertBefore(style, ref);
        }
    };

    const tmpPath = top.location.pathname + "templates/" + vue_tmp_name + ".vue"

    const app = createApp({
        components: {
            'my-component': defineAsyncComponent(() => loadModule(tmpPath, options))
        },
        template: '<my-component></my-component>'
    });

    // 引入ElementPlus组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 引入ElementPlus图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app")
</script>
</html>

2. 创建两个vue模版文件用了测试

路径是按照上面的 tmp.ftl 里面的第104行定义的，如果你不想放这里相放在其他的地方，就可以修改这个路径

3. 在Erupt实体模型中使用

在这个模型中定义了两个按钮，点击按钮就会访问特定的页面文件，让后通过配置的 params 这个名字,页面就能拿到‘vue_tmp_name’ 的名字去加载指定的vue文件了

4. 访问页面

以上就是整个的使用过程，不明白的可以去拉取代码自己运行即可。

八、源代码

代码路径：https://gitee.com/shareloke/erupt-vue3-sfc-loader-demo

原文地址：https://blog.csdn.net/WLPJLP/article/details/143473753

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：mongodb指定引擎并设置内存使用大小
下一篇：派生类重载的delete操作符调用时可以动态绑定吗

springboot - 定时任务
定时任务是企业级开发中必不可少的组成部分，诸如长周期业务数据的计算，例如年度报表，诸如系统脏数据的处理，再比如系统性能监控报告，还有抢购类活动的商品上架，这些都离不开定时任务。步骤②：定义Bean，在
阅读更多2024-11-05
新闻稿件管理：SpringBoot框架实战指南
目前，界面设计已经成为对软件质量进行评价的一条关键指标，一个好的用户界面可以使用户使用系统的信心和兴趣增加，从而使工作效率提高，JSP技术是将JAVA语言作为脚本语言的，JSP网页给整个服务器端的JA
阅读更多2024-11-05
Java异常处理：深入理解与应用实践
异常处理主要由两个部分组成：抛出异常和捕获异常。这两个部分共同实现了程序控制流的非正常转移。
阅读更多2024-11-05
怎么将多个pdf合并成一个文件？简单又好用的7个合并教程
用户可以根据需求，调整文件的顺序，添加页码或水印，使合并后的PDF更加符合自己的要求。综上所述，将多个PDF文件合并成一个文件，不仅提升了文件管理的效率，还改善了文件的共享体验。步骤3，如下图所示，我
阅读更多2024-11-05
博科测试IPO上市丨全球液压市场进入成熟阶段，呈稳健增长态势
截至去年底，博科测试在国内外已有80余台/套大型振动模拟系统的应用案例，超过国内外市场其他竞争对手，且能够实现定制化服务，具有极大的业务优势。一方面，随着国家财政科研支出的不断增长、工业制造水平的整体
阅读更多2024-11-05
基于java+SpringBoot+Vue的墙绘产品展示交易平台设计与实现
墙绘产品展示交易平台是一个现代经济快节奏发展以及不断完善升级的信息化技术下诞生的平台，旨在帮助管理者在短时间内处理完毕庞大的数据信息，提高事务处理效率。该平台利用SSM框架，使用Java语言和Mysq
阅读更多2024-11-05
2-Ubuntu/Windows系统启动盘制作
本文介绍了如何使用Win32DiskImager和Rufus等工具制作系统启动盘。学习目标是掌握制作启动盘的基本步骤，以便独立将ISO镜像文件写入USB闪存驱动器，确保顺利安装或修复系统。文章首先推荐
阅读更多2024-11-05
【VScode】中文版ChatGPT编程工具-CodeMoss！教程+示例+快捷键
CodeMoss是一款在VScode内集成了多种先进模型的智能插件。它不仅支持代码编写，还支持聊天、写作等多种功能，全面提升了开发者的工作效率和体验。
阅读更多2024-11-05
17.快递物流仓库管理系统（基于springboot和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-11-05
基于 Spring Boot 和 Vue 的门票销售创新系统
随着旅游业的蓬勃发展，著名景点白云山的游客数量不断攀升。在这样的背景下，传统的门票销售方式面临着诸多挑战。一方面，传统的线下售票窗口往往需要游客排队购票，耗费大量时间，尤其是在旅游旺季，长队如龙的景象
阅读更多2024-11-05