基于X-admin2.2的后台管理系统登录实现

十点数据 1年前 ⋅ 1730 阅读

相关阅读:

X-admin2.2打开页面(添加弹窗),执行成功后如何关闭弹出窗口和刷新table表格内容?

Spring Boot+JPA微服务中数据更新问题(update)

Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法

LayUi搜索时,如何只刷新表格内容,其他内容不变?

ZTree工具类汇总,包括:新增、编辑和删除节点,并提交后台

基于pyppeteer的新浪微博登录

X-admin是基于LayUi的轻量级前端后台管理框架,简单免费且兼容性好,面向所有层次的前后端程序。

项目创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的。X-admin从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性。

所以,最近在基于此框架,开发一套自己的后台管理系统,目前是基于X-admin2.2+Spring Boot+Framework实现。

下面介绍一下第一步:登录实现

前端代码:

<!doctype html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>信息管理系统</title>
<link rel="stylesheet" href="/dist/layui/css/font.css">
<link rel="stylesheet" href="/dist/layui/css/login.css">
<link rel="stylesheet" href="/dist/layui/css/xadmin.css">
<#include "/layui/style.ftl"/>
</head>
<body class="login-bg">
    <div class="login layui-anim layui-anim-up">
        <div class="message">x-admin2.0-管理登录</div>
        <div id="darkbannerwrap"></div>
        <form method="POST" class="layui-form">
            <input id="username" name="username" placeholder="用户名" type="text"
                lay-verify="required" class="layui-input">
            <hr class="hr15">
            <input id="password" name="password" lay-verify="required"
                placeholder="密码" type="password" class="layui-input">
            <hr class="hr15">
            <input value="登录" lay-submit="" lay-filter="login"
                style="width: 100%;" type="submit">
            <hr class="hr20">
        </form>
    </div>
</body>

    layui.use([ 'form' ], function() {
        var form = layui.form;
        // 表单提交
        form.on('submit(login)', function(data) {
            console.log(data.field);
            $.ajaxSettings.async = false;//设置同步调用
            $.post("/login", data.field, function(LoginResult) { // 请求处理   
                result = JSON.parse(LoginResult);
                if (result["sucess"] == "true" || result["sucess"] == true) {
                    layer.msg(result["message"], function() {
                        window.location.href = result["view"];//登录成功后跳转到相应的界面;
                    });
                } else {
                    layer.msg(result["message"], {
                        icon : 1,
                        time : 2000
                    });
                }
            }, "json");
            $.ajaxSettings.async = true;//改回异步调用
            return false;
        });
    });

</html>

需要注意的是:$.ajaxSettings.async = false;$.ajaxSettings.async = true;两行代码;

后端代码如下:

@PostMapping(value = "/login")
    public void login(HttpServletResponse response, String username, String password,
            @RequestParam(value = "rememberMe", defaultValue = "0") Boolean rememberMe, ModelMap model,
            HttpServletRequest request) {
        Map<String, String> result = new HashMap<String, String>();
        Result<User> datas = executeLogin(username, password, rememberMe);
        if (datas.isOk()) {
            result.put("message", "登录成功!");
            result.put("sucess", "true");
            result.put("view", "/home");
        } else {
            result.put("message", datas.getMessage());
            result.put("sucess", "false");
            result.put("view", "/login");
        }
        log.info(datas.getMessage());
        writeJSON(response, JSONObject.fromObject(result).toString());
    }

public static void writeJSON(HttpServletResponse response, Object obj) {
        ObjectMapper mapper = new ObjectMapper();
        JsonFactory factory = mapper.getJsonFactory();
        response.setContentType("text/html;charset=utf-8");
        JsonGenerator responseJsonGenerator;
        try {
            responseJsonGenerator = factory.createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
            responseJsonGenerator.writeObject(obj);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

以上即为登录的前后台实现。

全部评论: 0

    我有话说: