`
Linuxboy
  • 浏览: 76956 次
  • 来自: ...
社区版块
存档分类
最新评论

sitebricks 学习笔记之用户登录和ajax form

阅读更多

这次是一个简单的登录界面,前台由jquery.form负责判断输入是否非空以及无刷新显示后台登录信息。就这么简单,但是中间还是碰到了一个问题,困扰了很久。

先来看看我最初的代码:

一、数据库查询

用的是guice-persist的DynamicFinder,所以只需要实现一个接口,而不需要具体实现。配置方法见本人前面的文章《sitebricks 学习笔记之guice-persist的配置和使用

UserFinder.java:

public interface UserFinder {

    @Finder(query = "select u from User u where u.name=:name and u.password=:password")
    User authenticated(@Named("name") String name, @Named("password") String password);

}

 二、前台登录界面:

使用了sitebricks的decoration技术,详细方法见《sitebricks学习笔记之decoration》。

Login.java:

@Decorated
public class Login extends Decorator {
    public Login() {
    }

    @Override
    public String getPageTitle(){
        return "Bricks - 用户登录";
    }
}

 Login.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>none</title>
    @Require
    <script type="text/javascript" charset="UTF-8" src="static/js/jquery-1.7.2.min.js"></script>
    @Require
    <script type="text/javascript" charset="UTF-8" src="static/js/jquery.form.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function()
            {
                $('#loginform').submit(function()//提交表单
                {
                    var options = {
                        target:'#msg',
                        url:'/hello', //提交给哪个执行
                        type:'POST',
                        beforeSubmit: validate,
                        success: function(data){ $('#msg').html(data.info);} //显示操作提示
                    };
                    $('#loginform').ajaxSubmit(options);
                    return false; //为了不刷新页面,返回false,反正都已经在后台执行完了,没事!
                });
            }
    );
    function validate(formData, jqForm, options) {
        for (var i=0; i < formData.length; i++) {
            if (!formData[i].value) {
                $('#msg').html('请输入用户名和密码!');
                return false;
            }
        }
    }
</script>
<div class="login_container" id="login">
    <div id="msg"></div>
    <div class="login_box">
        <div class="logo_title">
            <h1><img src="/static/images/login_title.gif"/>用户登录</h1>
        </div>
        <div class="login_operate">
            <form id="loginform" method="post" name="loginform">
                <div class="username">
                    <label class="txt_default" for="name">用户名</label>
                    <input class="txt alias" id="name" name="name" type="text" tabindex="1"/>
                </div>
                <div class="password">
                    <label class="txt_default" for="password">密&nbsp;&nbsp;&nbsp;码</label>
                    <input class="txt password" id="password" name="password" type="password" tabindex="2"/>
                </div>
                <div class="about_password">
                    <input class="remerber_password" id="remerber_password" type="checkbox" disabled/>
                    <label for="remerber_password">记住登录状态</label>
                    <a class="forgetPassword" href="" target="_blank">忘记密码?</a>
                </div>
                <div class="login_submit">
                    <a class="login_btn_wrapper" href=""><input class="login_btn" type="submit" value="登录"/></a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

 这里注意两点:1、由于使用了decoration,所以引入的两个必需的js文件,必须使用@Require,不然的话在最终输出的页面中将不会出现这两个js文件。

2、ajax form的具体执行代码需要放在<body>内,原因同上。

三、后台处理

Hello.java:

public class Hello {
    @Inject
    private UserFinder finder;

    private String name;
    private String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Post
    public Reply<Map<String, String>> hello() {
       User user = finder.authenticated(name, password);
        Map<String, String> result = new HashMap<String, String>();
        if (user!=null)
            result.put("info", "用户" + name + "登录成功!");
        else result.put("info", "用户名或密码错误!");
        return Reply.with(result).as(Json.class);
    }
}

 这里注意不要忘了name和password的getter/setter。

四、运行时问题出现

当数据库中不存在所查询的对象时,将会抛出NoResultException。

五、解决办法:

方案一:最初的时候,我用的办法是自己写一个Dao,在获取结果时使用try-catch,当jpa返回NoResultException时,使user=null。

UserDao.java:

public class UserDao{
    @Inject 
    private EntityManager em;

    public User authencated(String name, String password){
         Query q = em.createQuery("select u from User where u.name=:name and u.password=:password");
         User user = null;
         try{
                 user = (User) q.getSingleResult();
                 return user;
         }catch(NoResultException e){
                  return null;
         }
         finally{return user;}
    }
}
 然后将Hello.java中的
private UserFinder finder;

 改为

private UserDao finder;

 其他代码不变,运行正常。但是总觉得这样风格太不统一,就像是一个hack。于是google了一下,发现guice-persist的这个问题与warp-persist是一脉相承的,出现NoresultException其实不是@Finder的问题,而是jpa规范的要求。那么,就没有解决办法了吗?warp-persist&sitebricks的作者dhanji告诉了我们解决方案。

方案二:

很简单,只需要修改@Finder的返回类型为ArrayList<User>,然后在Hello.java修改一下判断语句即可。

UserFinder.java:

public interface UserFinder {

    @Finder(namedQuery = "getUserByNamePwd", returnAs = ArrayList.class)
    ArrayList<User> authenticated(@Named("name") String name, @Named("password") String password);

}

 注意,@Finder里必须指明returnAs。

Hello.java:

public class Hello {
    @Inject
    private UserFinder finder;

    private String name;
    private String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Post
    public Reply<Map<String, String>> hello() {
       ArrayList<User> users = finder.authenticated(name, password);
        System.out.println("\n>>>[BRICKS] Hello world!");
        Map<String, String> result = new HashMap<String, String>();
        if (!users.isEmpty())
            result.put("info", "用户" + name + "登录成功!");
        else result.put("info", "用户名或密码错误!");
        return Reply.with(result).as(Json.class);
    }
}
 这样,即使结果集为空,运行时也不会抛出异常了。
0
4
分享到:
评论

相关推荐

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    ajax学习笔记

    ### AJAX学习笔记 #### 一、引言 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。...

    Java相关课程系列笔记之九Servlet学习笔记

    Java相关课程系列笔记之十一Ajax学习笔记 Java相关课程系列笔记之十二jQuery学习笔记 Java相关课程系列笔记之十三Struts2学习笔记 Java相关课程系列笔记之十四Hibernate学习笔记 Java相关课程系列笔记之十五Spring...

    Java相关课程系列笔记之十一Ajax学习

    在本篇Java相关课程系列笔记之十一中,我们聚焦于Ajax的学习,这是一项在Web开发中广泛使用的技术,用于创建动态、无刷新的用户界面。Ajax全称Asynchronous JavaScript and XML,即异步JavaScript和XML,它允许网页...

    Java学习笔记学习笔记

    Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习...

    ajax学习笔记代码

    通过以上四天的学习,你将能够熟练掌握Ajax的基本原理和应用,从而在实际项目中提高Web应用的性能和用户体验。在MyEclipse环境下,你可以创建源代码示例,动手实践每个步骤,加深理解和记忆。记得不断练习和尝试,...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架,...

    学习笔记之ASP.NET篇——ajax

    本人几年的学习摘要。对想学习ASP.NET的朋友很有帮助。 里面知识面广,内容都是我在实践中遇到的困难的解决方法,和我自己的实现片段代码。现在与大家分享。

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于Web的云的学习笔记系统设计与实现-java代码

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...

    java unix sping ajax struts hibernate 学习笔记

    "Ajax学习笔记"涵盖了异步JavaScript和XML技术,使网页可以实现局部刷新,提高用户体验。虽然现代Web开发中更多的使用了Fetch API和JSON,但了解Ajax的历史和工作原理仍然很有价值。 "Spring学习笔记"聚焦于Spring...

Global site tag (gtag.js) - Google Analytics