jfinal与bootstrap的登录跳转实战(2)

简介: jfinal与bootstrap的登录跳转实战

jfinal的session管理


其实说到这,已经不是jfinal的session了,其实要说的是前端。


<c:choose>
<c:when test="${sessionScope.username!=null}">
        <span>
            <a href="javascript:void(0);" id="mycenter" style="">
                ${sessionScope.username}<s class="icon_arrow icon_arrow_down"></s>
            </a>
            <i class="line"></i>
            <a href="/logout" title="退出" id="user_login_out" style="padding: 0 6px;">退出</a>
        </span>
        </c:when>
    <c:otherwise>
        <span>
            <a title="登录" href="javascript:show_pop_login();" id="show_pop_login">登录</a>
        </span>
    </c:otherwise>
</c:choose>

注意:


这里使用了${sessionScope.username}获取session数据,这只是很简单的一个应用。

1中好像没什么可说的,但重要的是,你弹出登录框后,需要重新回到对应的跳转页面,然后显示登录的信息,好吧,我觉得没有解释清楚,那么上一张图吧!

image.png

这个图片为了商业机密,我只能截图到这里了,哈哈。

就像很多互联网网站一样,你如果是游客的话,也可以打开很多页面进行相关的信息进行查看,比如你可以打开1.html、2.html,但是这两个页面都可以点击登录按钮弹出登录框。那么问题来了,


你怎么保证从1.html打开登录的时候还跳转到1.html,从2.html打开登录成功后还跳转到2.html。


好吧,先说到这,这里卖个关子,我们继续看下个章节。


ajax请求与返回信息处理


1.弹出登录窗口

/**
 * 弹出登录框
 */
function show_pop_login() {
    $.weeboxs.open(common.ctx + "/pages/login/login.jsp", {
        boxid : 'pop_user_login',
        contentType : 'ajax',
        showButton : false,
        showCancel : false,
        showOk : false,
        title : '会员登录',
        width : 700,
        type : 'wee'
    });
}

这是弹出登录框,至于weebox,你可以查看jquery weebox总结。


注意:


这里可能是从1.html打开的,也可能是从2.html页面打开的登录框。


2.然后我们再来看看登录的form表单

<form class="pop_login_form" action="${ctx}/login?callbackType=closeCurrent" method="post" onsubmit="return validateCallback(this, dialogAjaxDone);">
    <div class="row ">
        <div class="row">
            <label class="col-md-4" style="margin-top: 10px;" for="name">用户登录</label>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2 col-md-offset-2 tr th">
                    <label for="name">账户</label>
                </div>
                <div class="col-md-5">
                    <input type="text" style="" class="form-control required" id="username" name="username" placeholder="请输入会员编号"
                        autocomplete="off">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-2 col-md-offset-2 tr th">
                    <label for="name">密码</label>
                </div>
                <div class="col-md-5">
                    <input type="password" class="form-control required" id="password" name="password" placeholder="请输入登陆密码">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="checkbox">
                <label> <input type="checkbox"> 记住我(下次自动登陆)
                </label>
            </div>
        </div>
        <div class="row">
            <button type="submit" style="margin-bottom: 10px;" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

注意:


你需要关注action=”${ctx}/login?callbackType=closeCurrent”

再关注οnsubmit=”return validateCallback(this, dialogAjaxDone);”

好吧,我们先来看看登录的界面吧。

image.png


很漂亮的登录框,漂亮的不像实力派!嘻嘻。


然后关键的部分来了,请继续关注下节,我把发送ajax请求也放在下节的代码中,就省得重复。


页面间智能跳转


1.提交请求

/**
 * 普通ajax表单提交
 * 
 * @param {Object}
 *            form
 * @param {Object}
 *            callback
 * @param {String}
 *            confirmMsg 提示确认信息
 */
function validateCallback(form, callback, confirmMsg) {
    var $form = $(form);
    if (!$form.valid()) {
        return false;
    }
    var _submitFn = function() {
        var forwardUrl = window.location.href;
        var formUrl = $form.attr("action");
        if (formUrl.indexOf("?") != -1) {
            formUrl += "&forwardUrl=" + forwardUrl;
        } else {
            formUrl += "?forwardUrl=" + forwardUrl;
        }
        $.ajax({
            type : form.method || 'POST',
            url : formUrl,
            data : $form.serializeArray(),
            dataType : "json",
            cache : false,
            success : callback || YUNM.ajaxDone,
            error : YUNM.ajaxError
        });
    }
    if (confirmMsg) {
        alertMsg.confirm(confirmMsg, {
            okCall : _submitFn
        });
    } else {
        _submitFn();
    }
    return false;
}


好吧,看到这,你也许会说我剽窃了DWZ的灵感,OK,既然zhanghuihua同学开源了,有必要我们就好好的利用是吧。


注意:


你看到了forwardUrl的相关代码,没错,这个关键的字段就是来传递发起请求的页面路径,比如说1.html,2.html。

然后,ajax执行成功后,也就是登陆成功后,我们要执行callback方法,也就是dialogAjaxDone方法,那么你需要继续看下去。

2.回调函数

/**
 * dialog上的表单提交回调函数 服务器转回forwardUrl,可以重新载入指定的页面.
 * statusCode=YUNM.statusCode.ok表示操作成功, 自动关闭当前dialog
 */
function dialogAjaxDone(json) {
    YUNM.ajaxDone(json);
    if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
        if ("closeCurrent" == json.callbackType) {
            close_pop();
        }
        // 如果指定了后调转页面,进行调转
        if (json.forwardUrl) {
            location.href = json.forwardUrl;
        }
    }
}    ajaxDone : function(json) {
        if (json[YUNM.keys.statusCode] == YUNM.statusCode.error) {
            if (json[YUNM.keys.message])
                $.showErr(json[YUNM.keys.message]);
            ;
        } else if (json[YUNM.keys.statusCode] == YUNM.statusCode.timeout) {
            alertMsg.error(json[YUNM.keys.message]);
        }
    },


注意:


第二串代码就是出于错误消息,诸如“用户不存在的”,还有timeout。

第一串代码就是回调函数,其作用就是成功后关闭弹出框,然后再跳转到对应页面。

image.png


结语:OK,这样一篇文章希望能够给热爱jfinal和bootstrap的同学带来灵感!


相关文章
|
3月前
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
|
6月前
|
前端开发 JavaScript Python
Web实战:基于Django与Bootstrap的在线计算器
Web实战:基于Django与Bootstrap的在线计算器
162 0
|
编解码 前端开发 JavaScript
Web进阶:Day7 响应式、BootStrap、实战演练
Web进阶:Day7 响应式、BootStrap、实战演练
80 0
Web进阶:Day7 响应式、BootStrap、实战演练
Bootstrap03购物车页面&登录注册界面&其他组件使用
Bootstrap03购物车页面&登录注册界面&其他组件使用
136 0
|
前端开发 JavaScript 容器
Bootstrap实战 - 单页面网站
单页面结构简单、布局清晰,常常用来做手机 App 或者某个产品的下载介绍页面。现在,展示型网页整体趋向于单页网站设计,这样一次性把核心信息展现出来,对于用户来说更加直观和简单,能够快速了解一个产品。
286 0
Bootstrap实战 - 单页面网站
|
前端开发 容器
Bootstrap实战 - 评论列表
Bootstrap 是当前很受欢迎的前端框架,如何用 Bootstrap 快速完成一个网站?社交媒体网站盛行,人们常常会使用评论表达自己的观点,评论功能已然成为网站的一部分。一个基础的媒体对象由四个部分组成...
314 0
|
前端开发 数据安全/隐私保护 容器
Bootstrap实战 - 注册和登录
注册和登录在社交和商业网站中是必不可少的一个部分。
220 0
Bootstrap实战 - 注册和登录
|
移动开发 前端开发 JavaScript
Bootstrap实战 - 响应式布局
响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的角色。在响应式布局中,要求导航栏能够根据终端屏幕大小显示不同的样式。
158 0
Bootstrap实战 - 响应式布局
|
前端开发 JavaScript
jfinal与bootstrap的登出实战
jfinal与bootstrap的登出实战
125 0
jfinal与bootstrap的登出实战
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0