Beetl、Bootstrap、AdminLTE 经典开发模式

于 2024-07-24 12:02:32 发布
阅读量596 收藏 16
点赞数 23
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85480529/article/details/140659469
版权

以下是一个使用 Beetl 模板引擎、Bootstrap 前端框架和 AdminLTE 管理模板的经典开发示例代码。

1. Maven 依赖配置

首先，在 Maven 项目的 pom.xml 文件中添加 Beetl、Bootstrap 和 AdminLTE 的依赖：

<dependencies>
    <!-- Beetl -->
    <dependency>
        <groupId>com.ibeetl</groupId>
        <artifactId>beetl</artifactId>
        <version>2.11.9</version>
    </dependency>

    <!-- Bootstrap -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.6.0</version>
    </dependency>

    <!-- AdminLTE -->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>admin-lte</artifactId>
        <version>2.4.18</version>
    </dependency>
</dependencies>

2. Beetl 配置

在 application.properties 文件中配置 Beetl 模板引擎：

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.html
beetl.templatesPath=templates/

3. 前端页面示例

在 templates 目录下创建一个 Beetl 模板文件 index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="/webjars/bootstrap/4.6.0/css/bootstrap.min.css">
    <!-- 引入 AdminLTE CSS -->
    <link rel="stylesheet" href="/webjars/admin-lte/2.4.18/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/webjars/admin-lte/2.4.18/dist/css/skins/_all-skins.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <!-- 头部 -->
        <header class="main-header">
            <a href="#" class="logo">
                <span class="logo-mini"><b>A</b>LT</span>
                <span class="logo-lg"><b>Admin</b>LTE</span>
            </a>
            <nav class="navbar navbar-static-top">
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
            </nav>
        </header>
        <!-- 左侧菜单 -->
        <aside class="main-sidebar">
            <section class="sidebar">
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">MAIN NAVIGATION</li>
                    <li class="active">
                        <a href="#">
                            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                        </a>
                    </li>
                </ul>
            </section>
        </aside>
        <!-- 内容区域 -->
        <div class="content-wrapper">
            <section class="content-header">
                <h1>Dashboard</h1>
            </section>
            <section class="content">
                <div class="row">
                    <div class="col-lg-3 col-xs-6">
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3>150</h3>
                                <p>New Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="/webjars/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <!-- 引入 AdminLTE JS -->
    <script src="/webjars/admin-lte/2.4.18/dist/js/adminlte.min.js"></script>
</body>
</html>

4. 控制器

创建一个简单的 Spring Boot 控制器来渲染该页面：

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class DashboardController {

    @GetMapping("/dashboard")
    public String dashboard(Model model) {
        return "index";
    }
}

这样，就完成了一个使用 Beetl、Bootstrap 和 AdminLTE 的经典开发模式的简单示例。

Bootstrap 和 AdminLTE

Bootstrap 和 AdminLTE 是前端样式库，你也可以直接在 HTML 中通过 CDN 引用它们，而不一定要通过 Maven 引入。下面是如何通过 CDN 引用它们的示例：

1. 引入 Bootstrap 和 AdminLTE

在你的 index.html 文件中，通过 CDN 引用 Bootstrap 和 AdminLTE：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css>">
    <!-- 引入 AdminLTE CSS -->
    <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.18/css/AdminLTE.min.css>">
    <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.18/css/skins/_all-skins.min.css>">
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <!-- 头部 -->
        <header class="main-header">
            <a href="#" class="logo">
                <span class="logo-mini"><b>A</b>LT</span>
                <span class="logo-lg"><b>Admin</b>LTE</span>
            </a>
            <nav class="navbar navbar-static-top">
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
            </nav>
        </header>
        <!-- 左侧菜单 -->
        <aside class="main-sidebar">
            <section class="sidebar">
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">MAIN NAVIGATION</li>
                    <li class="active">
                        <a href="#">
                            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                        </a>
                    </li>
                </ul>
            </section>
        </aside>
        <!-- 内容区域 -->
        <div class="content-wrapper">
            <section class="content-header">
                <h1>Dashboard</h1>
            </section>
            <section class="content">
                <div class="row">
                    <div class="col-lg-3 col-xs-6">
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3>150</h3>
                                <p>New Orders</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="<https://code.jquery.com/jquery-3.5.1.min.js>"></script>
    <!-- 引入 Bootstrap JS -->
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js>"></script>
    <!-- 引入 AdminLTE JS -->
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.18/js/adminlte.min.js>"></script>
</body>
</html>

通过这种方式，可以直接从 CDN 加载 Bootstrap 和 AdminLTE，而不需要在 Maven 中引入它们的依赖。

Beetl

Beetl 支持多种模板文件扩展名，常见的包括：

  • .btl
  • .html
  • .txt
  • .xml

具体支持哪些扩展名可以根据项目配置来决定。

2401_85480529
关注
Spring Boot - beetl 模板引擎
学无止境
06-18 383
【代码】Spring Boot - beetl 模板引擎。
bootstrap adminLTE
02-01
bootstrap adminLTE 2.3.7的下载。bootstrap adminLTE 2.3.7的下载。
Bootstrap 后台模板-AdminLTE
weixin_34168700的博客
10-13 403
2019独角兽企业重金招聘Python工程师标准>>> ...
AdminLTE-2.3.7一个基于 bootstrap 的轻量级后台模板
03-01
AdminLTE-2.3.7一个基于 bootstrap 的轻量级后台模板，它的样式美观且较为符合大多数后台管理系统的需求,典型的上|左右|下的布局形式。
bootstrap + adminLTE
love_asia的专栏
04-11 1104
//bootstrap collapse.js function getTargetFromTrigger($trigger) { var href var target = $trigger.attr('data-target') || (href = $trigger.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s...
Admin:Java EE企业级快速开发平台，基于Spring Boot，Spring MVC，Shiro，Flyway，Beetl，BeetlSQL，Bootstrap，AdminLTE在线代码生成功能，采用经典开发模式，让初学者能够快速入门和并购到团队开发中去。包括核心模块如：组织机构，角色用户，菜单及按钮授权，数据权限，系统参数，内容管理，工作流等。策略；在线定时任务配置；支持SAAS多租户；支持部署；支持多数据源
03-23
Admin项目是根据JeeSite 4.0进行改造的一个Java EE企业级快速开发平台，基于经典技术组合（Spring Boot，Spring MVC，Apache Shiro，Flyway，Beetl，BeetlSQL，Bootstrap，AdminLTE），在线代码生成功能，包括核心...
基于 Spring Boot 3.1 在线代码生成功能，采用经典开发模式的Java 快速开发平台
10-14
JeeSite 快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用 Beetl、Bootstrap、AdminLTE 经典开发模式，或者分离版 Vue3、Vite、...
Java EE 企业级快速开发平台.zip
最新发布
01-22
Java EE 企业级快速开发平台，基于 Spring Boot、Spring MVC、Shiro、Flyway、Beetl、BeetlSQL、Bootstrap、AdminLTE 在线代码生成功能，采用经典开发模式，让初学者能够更快的入门并投入到团队开发中去。...
JeeSite java快速开发平台.rar
07-06
JeeSite 快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用 Beetl、Bootstrap、AdminLTE 经典开发模式，或者分离版 Vue3、Vite、...
JeeSite快速开发平台-其他
06-12
JeeSite 快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，基于 Spring Boot、Spring MVC、Shiro、MyBatis、Beetl、Bootstrap、AdminLTE 在线代码生成功能，采用经典开发模式，让初学者...
Bootstrap后台管理界面AdminLTE 最新版
07-08
Bootstrap后台管理界面AdminLTE
Adminlte后台整合Bootstrap框架含数据库
11-19
最近在做一个后台管理的项目，但是没有设计图完全，所以就发现一款非常不错的模版。 这个模版是基于bootstrap 的后台管理系统模版。
beetl 模板demo
02-09
beetl 模板demo ， java servlet 集成 myeclipse10搭建
Adminlte(bootstrap)iframe版本
10-16
基于AdminLTE（bootstrap）用JS实现的局部刷新的案例，这个是使用js刷新局部页面，以及提交的案例，还有使用js刷新的案例在我另外的资源里
AdminLTE Bootstrap 后台模板
08-11
AdminLTE响应式Bootstrap3后台模板是一款完全响应式后台管理模板,基于Bootstrap3框架,易定制模板。自适应多种屏幕分辨率,兼容PC端和手机移动端,代码仅供参考学习
Beetl 模板
我的LOG
11-20 2143
配置项 #默认配置: ##- 配置引擎实现类，默认即可. ENGINE=org.beetl.core.engine.FastRuntimeEngine ##- 指定了占位符号，默认是${ }，也可以指定为其他占位符。 DELIMITER_PLACEHOLDER_START=${ DELIMITER_PLACEHOLDER_END=} ##- 指定了语句的定界符号，默认是<% %>，也可以指定为其他定界符号 DELIMITER_STAT.
app h5 上传按钮多选_H5应用 | 超实用的微场景制作工具
weixin_39564524的博客
11-20 335
H5是近两年比较火的一种宣传方式有的同学可能会问：什么是H5呢？通俗的说就是那些经常刷爆微信朋友圈的手机网页无论是企业宣传，制作简历邀请函，还是制作纪念册、表白H5有着其非常广泛的应用那这样的页面新手小白可以做吗？当然可以啦！今天就来和大家分享一些H5制作的入门技巧教大家如何做出酷炫酷炫的H5页面下面就以易企秀为例首页介绍进入首页后，我们可以看到首页最上方有免费模板、广告投放、会...
java模板beetl引擎_模板引擎-beetl
weixin_42177768的博客
03-02 432
前段时间项目需要用到模板技术，本想使用FreeMarker发现有些过时的样子，就搜到了个Beetl，简单一用…项目背景:微门户页面上，介绍商家首页信息，而且这些信息比较少又不经常改变。【前期只单单针对商家首页进行静态处理，再由项目二期需要，再优化产品，优惠，等等模块，独立出专门模板服务类】故改用静态文件方式展示，真有需要时可以组建静态资源服务器，与业务服务器分离， 减少服务器压力。管理端【 发布/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值