技术联盟

springBoot基于thymeleaf集成H-ui后台

对于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">&#xe60d;</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">&#xe60e;</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="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
                    <input name="" type="reset" class="btn btn-default radius size-L"
                           value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;" 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>

Share this:

码字很辛苦,转载请注明来自技术联盟《springBoot基于thymeleaf集成H-ui后台》

评论