Spring Boot 集成LayUI及组件

原创

HLee

修改于 2021-08-30 18:07:16

1K0

修改于 2021-08-30 18:07:16

简介

LayUI是一个使用简单、上手容易的前端 UI 框架，非常适合后端开发人员构建后台管理系统使用。这个框架与SpringBoot类似，模块化各个组件，拿来即用。相比另一个后台管理前端框架EasyUI相比，LayUI更加注重极简方格，组件也更加的美观。

引入Web和Thymeleaf依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
</dependencies>

操作过程

前端控制器

package com.haodf.search.manager.controller;

import com.haodf.communal.rpc.response.RpcResponse;
import com.haodf.communal.rpc.util.HdfAssert;
import com.haodf.communal.support.util.JsonUtils;
import com.haodf.search.manager.config.consts.IndexConst;
import com.haodf.search.manager.service.IndexService;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.io.IOException;
import java.util.List;

/**
 * @author Huan Lee
 * @version 1.0
 * @date 8/25/21 2:42 PM
 * @describtion
 */
@Controller
@Slf4j
@RequestMapping(value = "layui")
public class LayUIController {

    @Resource
    private IndexService indexService;

    /**
     * Es6索引主页面
     * @param model
     * @return
     */
    @GetMapping(value = "/index")
    public String index(Model model) {
        return "index/index";
    }

    /**
     * 控制台页面
     * @param model
     * @return
     */
    @GetMapping(value = "/console")
    public String console(Model model) {
        return "console/console.html";
    }

    /**
     * 查询索引
     * @param model
     * @return
     */
    @GetMapping(value = "/searchIndex")
    public String searchIndex(Model model) {
        // 全部索引别名
        List<String> indexAlias = IndexConst.INDEXNAMECONST;
        model.addAttribute("indexAlias", indexAlias);
        return "index/searchIndex.html";
    }

    /**
     * 删除索引
     * @param model
     * @return
     */
    @GetMapping(value = "/deleteIndex")
    public String deleteIndex(Model model) {
        // 全部索引别名
        List<String> indexAlias = IndexConst.INDEXNAMECONST;
        model.addAttribute("indexAlias", indexAlias);
        return "index/deleteIndex.html";
    }

    /**
     * 通过索引ID查文档
     * @return
     * @throws IOException
     */
    @PostMapping(value = "/searchIndexById")
    public String searchIndexById(@RequestParam(value = "id") String id, @RequestParam(value = "indexName") String indexName, Model model) throws IOException{

        HdfAssert.isTrue(StringUtils.isNotBlank(id) && StringUtils.isNotBlank(indexName), "请求参数错误");

        String result = indexService.searchIndexById(id, indexName);

        model.addAttribute("result", result);
        model.addAttribute("indexName", indexName);
        model.addAttribute("id", id);

        log.info("查询索引信息 Index:{}", JsonUtils.toJson(result));

        return "index/searchIndex.html";
    }
}

引入LayUI

官网：https://www.layui.com/

点击“立即下载”，解压layui-v2.6.8到SpringBoot项目src/main/resources/static/layui下。

HTML页面

在src/main/resources/templates/index新建index.html页面。从LayUI中选择自己需要的页面组件，放入到HTML文件中即可。

<!DOCTYPE html>
<!-- 引入thymeleaf空间 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>好大夫搜索平台</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">Es6搜索平台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">搜索</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:">百度</a>
                    </dd>
                    <dd>
                        <a href="javascript:">Google</a>
                    </dd>
                    <dd>
                        <a href="javascript:">必应</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">刷新</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:"> admin </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="">基本资料</a>
                    </dd>
                    <dd>
                        <a href="">安全设置</a>
                    </dd>
                </dl></li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
                <!--<li class="layui-nav-item layui-nav-itemed"><a href="javascript:">主页</a>-->
                    <!--<dl class="layui-nav-child">-->
                        <!--<dd data-name="console" class="layui-this">-->
                            <!--<a href="console">控制台</a>-->
                        <!--</dd>-->
                    <!--</dl>-->
                <!--</li>-->
                <li class="layui-nav-item layui-nav-itemed"><a href="javascript:">索引管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="searchIndex" target="iframeMain">查询索引</a></dd>
                        <!--<dd><a href="">更新索引</a></dd>-->
                        <!--<dd><a href="">删除索引</a></dd>-->
                    </dl>
                </li>
                <!--<li class="layui-nav-item"><a href="">云市场</a></li>-->
                <!--<li class="layui-nav-item"><a href="">社区</a></li>-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px; height: 100%; width: 100%" >
            <div class="layadmin-tabsbody-item layui-show" style="height: 100%">
                <iframe src="" frameborder="0" class="layadmin-iframe" name="iframeMain" style="height: 100%; width: 100%"></iframe>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © haodf.com - 搜索团队
    </div>
</div>
    <script th:src="@{/layui/layui.js}"></script>
    <script>
        //JavaScript代码区域
        layui.use('element', function() {
            var element = layui.element;

        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link href="css/jquery.json-viewer.css" type="text/css" rel="stylesheet" />

</head>
<body>
    <div>
        <form class="layui-form" action="/layui/searchIndexById" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">索引名</label>
                <div class="layui-input-block">
                    <input type="text" th:value="${indexName}" name="indexName" lay-verify="title" autocomplete="off" placeholder="请输入索引别名或全名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">索引ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" th:value="${id}" lay-verify="title" autocomplete="off" placeholder="请输入索引ID" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">单行选择框</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<select name="interest" lay-filter="aihao">-->
                        <!--<option value=""></option>-->
                        <!--<option value="0">写作</option>-->
                        <!--<option value="1" selected="">阅读</option>-->
                        <!--<option value="2">游戏</option>-->
                        <!--<option value="3">音乐</option>-->
                        <!--<option value="4">旅行</option>-->
                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="layui-form-item">-->
                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">搜索选择框</label>-->
                    <!--<div class="layui-input-inline">-->
                        <!--<select name="modules" lay-verify="required" lay-search="">-->
                            <!--<option value="">直接选择或搜索选择</option>-->
                            <!--<option value="1">layer</option>-->
                            <!--<option value="2">form</option>-->
                            <!--<option value="3">layim</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">查询索引</label>
                <div class="layui-input-block">
                    <textarea id="detail" readonly="readonly" rows="20" placeholder="查询索引结果展示区" class="layui-textarea" th:text="${result}"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

注意：需要修改<link>和<html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />

layui路径：/src/main/resources/static/layui
html路径：/src/main/resources/templates/index

效果图

访问：http://localhost:8087/layui/index

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

登录后参与评论

0 条评论

热度

Spring Boot 集成LayUI及组件

Spring Boot 集成LayUI及组件

简介

操作过程

前端控制器

引入LayUI

HTML页面

效果图

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐