集成Erupt框架

目录

一、依赖

二、配置。在application.yml中加入配置。

三、页面配置。一个文件夹和三个文件分别如下:

四、启动类两个注解


一、依赖

<!--用户权限管理-->
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-upms</artifactId>
            <version>1.10.15</version>
        </dependency>
        <!--接口数据安全-->
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-security</artifactId>
            <version>1.10.15</version>
        </dependency>
        <!--后台WEB界面-->
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-web</artifactId>
            <version>1.10.15</version>
        </dependency>
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-job</artifactId>
            <version>1.10.15</version>
        </dependency>
        <!-- 代码生成器模块 -->
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-generator</artifactId>
            <version>1.10.15</version>
        </dependency>
        <!--服务监控模块-->
        <dependency>
            <groupId>xyz.erupt</groupId>
            <artifactId>erupt-monitor</artifactId>
            <version>1.10.15</version>
        </dependency>

二、配置。在application.yml中加入配置。

spring:
    jpa:
        show-sql: true
        generate-ddl: true
        open-in-view: true
        database-platform: org.hibernate.dialect.MySQL5InnoDBDialect
        database: mysql
    hibernate:
        ddl-auto: update
erupt-app:
  # 登录失败几次出现验证码,值为0时表示一直需要登录验证码
  verifyCodeCount: 2
  # 登录密码是否加密传输,特殊场景如:LDAP登录可关闭该功能获取密码明文
  pwdTransferEncrypt: true
  # 多语言配置,默认支持:简体中文、繁体中文、英文、日文;具体配置详见erupt-i18n模块
  locales: [ "zh-CN","zh-TW","en-US","ja-JP"]
  # 自定义登录页路径,1.10.6 及以上版本支持
  loginPagePath:

三、页面配置。一个文件夹和三个文件分别如下:

 app.css

/* 例:调整顶栏颜色 */
.alain-default__header {
    background: #607D8B
}

/* 例:修改登录页样式 */
layout-passport > .container {
    background-position: center !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-color: #fff !important;
    background-image: url(https://www.erupt.xyz/demo/login-bg.svg) !important;
}

layout-passport .title {
    font-family: Courier New, Menlo, Monaco, Consolas, monospace !important;
}

layout-passport form {
    padding: 26px !important;
    margin: 8px !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    box-shadow: 1px 1px 10px rgba(190, 184, 184, 0.3);
}

app.js

window.eruptSiteConfig = {
    //erupt接口地址,在前后端分离时指定
    domain: "",
    //附件地址,一般情况下不需要指定,如果自定义对象存储空间,则需在此指定附件资源访问地址
    fileDomain: "",
    //标题
    title: "Erupt Framework",
    //描述
    desc: "ROOT系统管理",
    //是否展示版权信息
    copyright: true,
    //高德地图api key,使用地图组件须指定此属性,amapKey获取地址:https://lbs.amap.com (服务平台为:Web端(JS API))
    amapKey: "6ba79a8d",
    //logo路径
    logoPath: "erupt.svg",
    //logo文字
    logoText: "erupt",
    //注册页地址(仅是一个链接,需要自定义实际样式)
    registerPage: "",
    //自定义导航栏按钮,配置后将会出现在页面右上角
    r_tools: [{
        text: "自定义功能按钮",
        icon: "fa-eercast",
        mobileHidden: true,
        click: function (event) {
            alert("Function button");
        }
    }],
    //登录成功事件
    login: function (user) {

    },
    //注销事件
    logout: function (user) {

    }
};

//路由回调函数
window.eruptRouterEvent = {
    //key表示要监听的路由切换地址,为url hash地址最后一段
    //例如:http://www.erupt.xyz:9999/#/build/table/demo中demo为回调key
    demo: {
        //路由载入事件
        load: function (e) {

        },
        //路由退出事件
        unload: function (e) {

        }
    },
    //$ 为全路径通配符,在任何路由切换时都会执行load与unload事件
    $: {
        load: function (e) {

        },
        unload: function (e) {
        }
    }
};

//erupt生命周期函数
window.eruptEvent = {
    //页面加载完成后回调
    startup: function () {

    }
}

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<H1>Welcome to Money World</H1>
</body>
</html>

四、启动类两个注解

@EntityScan
@EruptScan

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Erupt 框架中,可以通过 `@Button` 注解来实现自定义按钮的功能。下面是一个简单的示例,以实现一个“清空数据”按钮为例: 1. 首先,在你要自定义按钮的实体类中,添加一个`@Button`注解,并且指定按钮的名称和图标: ```java @Entity @Table(name = "t_user") @Erupt(name = "用户管理") public class User { // 省略其他字段 @Button("清空数据") @Icon(value = "fa fa-trash", color = Icon.Color.RED) public void clearData() { // 清空数据的具体实现逻辑 } } ``` 2. 在 `EruptConfig` 中,需要添加一个 `EruptButtonModel` 来对按钮进行配置: ```java @Configuration public class EruptConfig { @Bean public EruptButtonModel clearDataButton() { return EruptButtonModel.builder() .setTitle("清空数据") .setFetchMethod("/erupt-api/user/clearData") .setType(EruptButtonModel.Type.TIPS) .setMessage("你确认要清空所有数据吗?此操作不可恢复!") .setIcon(new FontAwesomeIcon("fa fa-trash", Icon.Color.RED)) .build(); } } ``` 注意,这里的 `fetchMethod` 属性是指定了按钮点击后将会触发的请求的路径。在这个路径中,需要定义一个处理请求的控制器方法。 3. 在控制器中,添加一个处理按钮请求的方法: ```java @RestController @RequestMapping("/erupt-api/user") public class UserController { @Autowired private UserService userService; @PostMapping("/clearData") public void clearData() { userService.clearData(); } } ``` 这里的 `UserService` 是你自己定义的服务类,用于处理具体的业务逻辑。 4. 最后,在你的页面中,使用 `erupt-buttons` 标签来渲染按钮: ```html <erupt-buttons :buttons="buttons"></erupt-buttons> ``` 在对应的 Vue 实例中,需要定义一个 `buttons` 对象,来指定要显示的按钮。在这个对象中,可以引用前面在 `EruptConfig` 中定义的 `EruptButtonModel`: ```javascript data() { return { buttons: [ clearDataButton ] } } ``` 至此,一个简单的自定义按钮就实现了。当用户点击按钮时,将会弹出提示框,询问用户是否确认进行清空数据操作。如果用户确认操作,将会触发后台的 `clearData` 方法进行清空数据的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文子阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值