对于H-ui的体验与下载，大家可以直接访问他的官方网站：http://www.h-ui.net/H-ui.admin.shtml。
第一步下载H-UI admin
第二步 在Springboot 项目中的 static、templates 目录下面创建 admin文件夹 如下图
注意 把H-ui.admin所使用到的静态资源放到 static/admin下
第三步 配置controller
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Controller
@RequestMapping("/admin/index")
public class MainController {
//日志
private Logger logger = LoggerFactory.getLogger(getClass());
@Autowired
SysDictService sysDictService;//字典服务
@Autowired
PjBankService pjBankService;//银行列表服务
/**
*
* @return
*/
@RequestMapping("/index")
public String index(){
logger.info("后台首页");
return "/admin/index";
}
/**
*
* @return
*/
@RequestMapping("/articlelist")
public String articleList(){
logger.info("文字列表界面");
return "/admin/articlelist";
}
/**
*
* @return
*/
@RequestMapping("/adminrole")
public String adminrole(){
logger.info("角色管理");
return "/admin/admin-role";
}
/**
*
* @return
*/
@RequestMapping("/admin-permission")
public String adminpermission(){
logger.info("权限管理");
return "/admin/admin-permission";
}
/**
*
* @return
*/
@RequestMapping("/admin-list")
public String adminlist(){
logger.info("管理员管理");
return "/admin/admin-list";
}
/**
*
* @return
*/
@RequestMapping("/member-list")
public String memberlist(){
logger.info("管理员管理");
return "/admin/member-list";
}
/**
*
* @return
*/
@RequestMapping("/admin-role-add")
public String adminRoleAdd(){
logger.info("管理员管理");
return "/admin/admin-role-add";
}
/**
*
* @return
*/
@RequestMapping(value = "/login",method = {RequestMethod.GET})
public String login(Model model){
logger.info("登录界面");
model.addAttribute("errorMsg","");
return "/admin/login";
}
/**
*
* @return
*/
@PostMapping("/login")
public String loginPost(Model model,HttpServletRequest request, HttpServletResponse response){
logger.info("登录用户名，密码验证");
String username = request.getParameter("username");
String password = request.getParameter("password");
String yzm = request.getParameter("yzmcode");
String pwd = new String(Base64.decodeBase64(password));
logger.info(username);
logger.info(password);
logger.info(pwd);
logger.info(yzm);
logger.info("session yzm=>"+request.getSession().getAttribute(VerifyUtil.RANDOMCODEKEY));
if (username.equals("zhangdl")&&pwd.equals("123456")){
return "redirect:/admin/index/welcome";
}else{
model.addAttribute("errorMsg","登录失败,用户名密码错误！");
return "/admin/login";
}
}
//创建方法
@RequestMapping("/welcome")
public String welcome(){
logger.info("欢迎页");
return "/admin/welcome";
}
/**
* @desc 图形验证码生成
*/
@RequestMapping("/createImg")
public void createImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
try {
response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片
response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expire", 0);
VerifyUtil randomValidateCode = new VerifyUtil();
randomValidateCode.getRandCode(request, response);//输出验证码图片
}catch (Exception e){
logger.error("获取验证码失败！");
}
}
}
这个时候，基本上就集成完成。但是如果项目配置 server.servlet.context-path=/abc 这个时候，我们在开发的过程中 会出现路径问题。这个时候需要我们配置 界面中静态资源路径
例如 登录界面：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<base th:href="{#httpServletRequest.getContextPath()+'/'}"/>
<!--[if lt IE 9]>
<script type="text/javascript" th:src="@{/admin/lib/html5shiv.js}"></script>
<script type="text/javascript" th:src="@{/admin/lib/respond.min.js}"></script>
<![endif]-->
<link th:href="@{/admin/static/h-ui/css/H-ui.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/admin/static/h-ui.admin/css/H-ui.login.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/admin/static/h-ui.admin/css/style.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/admin/lib/Hui-iconfont/1.0.8/iconfont.css}" rel="stylesheet" type="text/css"/>
<!--[if IE 6]>
<script type="text/javascript" th:src="@{/admin/lib/DD_belatedPNG_0.0.8a-min.js}"></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>后台登录 - 硕硕管理系统</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value=""/>
<div class="header"></div>
<div class="loginWraper">
<div id="loginform" class="loginBox">
<form class="form form-horizontal" th:action="@{/admin/index/login}" method="post"
onsubmit="return onSubmitCheck()">
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont"></i></label>
<div class="formControls col-xs-8">
<input id="username" name="username" type="text" placeholder="账户" class="input-text size-L">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont"></i></label>
<div class="formControls col-xs-8">
<input id="passworda" type="password" placeholder="密码" class="input-text size-L">
<img th:src="@{/admin/eye_open.png}" id="changeshowhide_img" onclick="changeShowHide()"
style="position: absolute;left: 350px;top: 10px;width: 20px;height: 20px;">
<input id="password" name="password" type="hidden" placeholder="密码" class="input-text size-L">
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<input class="input-text size-L" id="yzmcode" name="yzmcode" type="text" placeholder="验证码"
onblur="if(this.value==''){this.value='验证码:'}"
onclick="if(this.value=='验证码:'){this.value='';}" value="验证码:" style="width:150px;">
<img th:src="@{/admin/index/createImg}" id="yzmimage" onclick="createImg()"> <a id="kanbuq"
href="javascript:void (0);"
onclick="createImg()">看不清，换一张</a>
</div>
</div>
<div>
<div class="form-label col-xs-11" style="margin-left: 25%;">
<p style="color: red; text-align: left;" id="errormsg" th:value="{errorMsg}"
th:text="{errorMsg}"></p>
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<label for="online">
<input type="checkbox" name="online" id="online" value="">
使我保持登录状态</label>
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<input name="" type="submit" class="btn btn-success radius size-L"
value=" 登 录 ">
<input name="" type="reset" class="btn btn-default radius size-L"
value=" 取 消 " style="margin-left: 20px;">
</div>
</div>
</form>
</div>
</div>
<div class="footer">Copyright 泽诚数字科技 by 银企智链</div>
<script type="text/javascript" th:src="@{/admin/lib/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/admin/lib/base64.js}"></script>
<script type="text/javascript" th:src="@{/admin/static/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
function createImg() {// 刷新验证码
var v = new Date().getTime();
var path =/*[[@{/admin/index/createImg}]]*/"";
path = path + "?t=" + v;
console.log(path);
document.getElementById("yzmimage").src = path;
}
function onSubmitCheck() {//数据验证
var username =("#username").val();
var passworda = ("#passworda").val();
var yzmcode =("#yzmcode").val();
if (username == null || username.trim() == '' || username == undefined) {
("#errormsg").text("用户名必须输入");
return false;
}
if (passworda == null || passworda == undefined || passworda.trim() == '') {("#errormsg").text("密码必须输入");
return false;
}
if (yzmcode == null || yzmcode == undefined || yzmcode.trim() == '' || yzmcode.trim() == '验证码:') {
("#errormsg").text("验证码必须输入");
return false;
}
var base64 = new BASE64();("#password").val(base64.encode(passworda));//数据加密
return true;
}
function changeShowHide() {//显示隐藏图片
var eye = document.getElementById("changeshowhide_img");
var eyeSrc = eye.src;
var path = /*[[@{/admin/}]]*/"";
console.log(eyeSrc);
if (eyeSrc != undefined && eyeSrc.indexOf("eye_off.png") != -1) {//关
eye.src = path + "eye_open.png";
("#passworda").attr("type", "password");
} else if (eyeSrc != undefined && eyeSrc.indexOf("eye_open.png") != -1) {//开
eye.src = path + "eye_off.png";("#passworda").attr("type", "text");
}
}
/*]]>*/
</script>
</body>
</html>