jfinal与bootstrap的登录跳转实战演习


Posted in Javascript onSeptember 22, 2015

前言:终于来了一篇有质量的文章,我个人感觉非常不错,《jfinal与bootstrap之间的登录跳转实战》。具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。

弹出模态框以及jquery validate可以参照jquery weebox总结、弹出窗口不居中显示?、jquery validate初上手系列文章。

从jfinal的validate说起

当然你可以参考jfinal提供的帮助文档,我当然也必须是参照了官方文档,当然对于这种开源技术每个人在使用的过程中肯定有千奇百态的问题,那么依据我的实战结果,我想再赘述一遍也是非常有必要的。

1.指定config中的路由

me.add("/login", MembersController.class, "/pages/login");

2.编写conroller类

public class MembersController extends BaseController {
  @Before(MembersValidator.class)
  @ActionKey("/login")
  public void login() {

    // 获取用户名
    String name = getPara("username");
    // 获取密码
    String password = getPara("password");

    Members mem = Members.me.getMemByNamePasswd(name, CipherUtils.generatePassword(password));

    if (mem != null) {
      // 保存session
      getSession().setAttribute("username", name);

      // 最后登录ip
      mem.set("lastip", getRequest().getRemoteHost());
      mem.set("lastvisit", DateUtils.getCurrentTime());

      mem.update();

      ajaxDoneSuccess("登录成功!");
    } else {
      ajaxDoneError("用户不存在!");
    }

    // 跳转到前台发起请求的路径
    renderJson();

  }
}

注意:

使用before绑定validate

使用actionkey绑定前端请求action名

使用getSession().setAttribute来操作session,同时前端稍后介绍如何使用

封装ajaxDone系列方法进行数据格式绑定,前端稍后介绍

使用renderJson方法对ajax请求返回结果数据进行json格式输出

接下来你需要看看我封装的baseController

3.BaseController

package com.hc.jf.controller;
import com.jfinal.core.Controller;
public class BaseController extends Controller {
  protected void ajaxDone(int statusCode, String message) {
    setAttr("statusCode", statusCode);
    setAttr("message", message);
    // 跳转路径
    String forwardUrl = getPara("forwardUrl");
    if (forwardUrl == null || forwardUrl.equals("")) {
      forwardUrl = getRequest().getRequestURL().toString();
    }
    setAttr("forwardUrl", forwardUrl);
    setAttr("callbackType", getPara("callbackType"));
  }
  protected void ajaxDoneSuccess(String message) {
    ajaxDone(200, message);
  }
  protected void ajaxDoneInfo(String message) {
    ajaxDone(201, message);
  }
  protected void ajaxDoneSuccess(String message, String forwarUrl) {
    ajaxDone(200, message);
  }
  protected void ajaxDoneError(String message) {
    ajaxDone(300, message);
  }
  protected void ajaxDoneError(String message, String forwarUrl) {
    ajaxDone(300, message);
  }
}

注意:

分别封装成功、错误、info级别的信息
增加了statusCode、message、forwardUrl、callbackType四个属性。
以上两个属性和前端也有对应,稍后介绍。

4.MembersValidator

package com.hc.jf.validator;

import com.hc.jf.entity.Members;
import com.jfinal.core.Controller;
import com.jfinal.validate.Validator;

public class MembersValidator extends Validator {

  @Override
  protected void validate(Controller controller) {
    validateRequiredString("username", "usernameMsg", "请输入用户名!");
    validateRequiredString("password", "passwordMsg", "请输入密码!");
  }

  @Override
  protected void handleError(Controller controller) {
    controller.keepModel(Members.class);
    controller.render("login.jsp");
  }

}

注意:

这个validate确实没什么?庞茫?蛭?岸艘丫?褂?query validate进行了check,然而请注意,如果你没有使用jquery的或者为了网络安全等等,有这个也不错。

好吧,我其实不想加入这个validate,但是我觉得可以我还没有想到用处,但是心有戚戚焉,觉得它还是有用的。

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

 jfinal与bootstrap的登录跳转实战演习

这个图片为了商业机密,我只能截图到这里了,哈哈。
就像很多互联网网站一样,你如果是游客的话,也可以打开很多页面进行相关的信息进行查看,比如你可以打开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”

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

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

 jfinal与bootstrap的登录跳转实战演习

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

然后关键的部分来了,请继续关注下节,我把发送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。
第一串代码就是回调函数,其作用就是成功后关闭弹出框,然后再跳转到对应页面。

 jfinal与bootstrap的登录跳转实战演习

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

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 #Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
javascript实现的一个随机点名功能
2014/08/26 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python 数据的清理行为实例详解
2017/07/12 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python中eval与int的区别浅析
2019/08/11 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python extract及contains方法代码实例
2020/09/11 Python
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
团委书记的竞聘演讲稿
2014/04/24 职场文书
股东授权委托书范文
2014/09/13 职场文书
个人工作表现自我评价
2015/03/06 职场文书
大学生见习总结报告
2015/06/24 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
如何利用golang运用mysql数据库
2022/03/13 Golang
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers