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-v2.6.8
到SpringBoot
项目src/main/resources/static/layui
下。
在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 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。