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 相关文章推荐
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
详解datagrid使用方法(重要)
Nov 06 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
async和DOM Script文件加载比较
2014/07/20 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
深入理解Vue nextTick 机制
2018/04/28 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序template模版的使用方法
2019/04/13 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
高中数学教学反思
2014/01/30 职场文书
国培远程培训感言
2014/03/08 职场文书
个人借款担保书
2014/04/02 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
新闻人物通讯稿
2014/10/09 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
Vue如何清空对象
2022/03/03 Vue.js