首页手记使用EasyUI开发银行业绩统计系统[16]-用户登录实现

使用EasyUI开发银行业绩统计系统[16]-用户登录实现

标签：

Java Html/CSS MySQL

在之前实现的JSP+Servlet培训班管理系统中也讲过用户登录，那时候技术栈里面元素还只有HTML/CCC/JSP/Servlet。

现如今鸟枪换炮已实现，使用了EasyUI框架之后，我们可以直接通过浏览器端脚本抛送请求给后端。因为EasyUI框架是基于jQuery的，所以在使用EasyUI的时候默认已经可以使用jQuery脚本啦。

废话不多说，现在来实现用户登录。

一，功能说明&演示

1，用户输入编号、密码登录

2，登录成功，跳转登录成功页面

3，登录失败，直接在登录页提示失败信息

二，前端页面设计

首先设计下前端页面，如下：

  <body>
    <form class="main_form">
        <div class="easyui-panel" title="业绩统计系统登录" style="padding:30px 60px;">
            <div class="input_container">
                <input id="userId" class="easyui-textbox" label="员工编号：" labelPosition="top" data-options="prompt:'请输入员工编码',iconCls:'icon-man'" style="width:100%;height:52px">
            </div>
            <div class="input_container">
                <input id="userPassword" class="easyui-textbox" label="密码：" labelPosition="top" data-options="prompt:'请输入密码',iconCls:'icon-lock'" style="width:100%;height:52px">
            </div>
            <div>
                <a onclick="login();" href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:32px">登录</a>
            </div>
        </div>
    </form>
  </body>

点击登录按钮后对应事件代码如下，简单介绍几个关键点：

1，$.messager.alert是EasyUI提供的信息提示框，比alert好看多了，起码不会IE下面一个样子，Chrome下面又一个样子，很奇怪。

2，$.post后面的三个参数分别表示post请求地址，携带参数，回调方法。其实还有第四个参数，很重要的第四个参数，下篇再专门讨论。

3，将用户名，密码作为参数抛给了/BankStatistics/LoginServlet，Math.random是产生一个随机数，避免浏览器缓存JS（浏览器机制、选项及设置可能会相关，这个就不展开讲了）。

4，根据LoginServlet返回值，来确定是跳转还是提示错误信息。

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        function login(){
            var userId=$("#userId").val();
            var userPassword=$("#userPassword").val();
            if(userId===""||userPassword===""){
                $.messager.alert('提示','员工编号及密码不能为空!','info');
                return false;
            }
            $.post("/BankStatistics/LoginServlet?ran='+Math.random()",
                {userId:userId,userPassword:userPassword},
                function(data){
                    var result = eval('('+data+')');
                    if (result.success===true){
                        window.location.href="main.jsp";
                        return true;
                    }
                    else{
                        $.messager.alert('提示','员工号或密码有误，请核准!','info');
                        return false;
                    }
                }//function(data)
            );//$.post
        }//login()
    </script>

三，后端设计

后端很简单，注意是使用注解来关联/LoginServlet这个请求url的。

还有就是稍微注意下转义字符的使用，严格上讲，json的键得使用双引号。可能在一些情况下部分语言也支持单引号的键名，不建议采用，还是得严格遵循标准为妙。

@WebServlet(urlPatterns="/LoginServlet")
public class LoginServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String method=request.getParameter("method");
        String userId=request.getParameter("userId");
        String userPassword=request.getParameter("userPassword");
        UserService service=new UserService(User.class);
        User user=service.checkLogin(userId, userPassword);
        if(user==null)
            out.print("{\"success\":false}");
        else
            out.print("{\"success\":true}");
        out.flush();
        out.close();
    }
}

四，数据库服务

        UserService service=new UserService(User.class);
        User user=service.checkLogin(userId, userPassword);

这两句调用了UserService类处理数据库逻辑，因为试用了PandaORM，数据库操作非常简单，直接贴下代码：

public class UserService extends Service{
    public UserService(Class entityClass) {
        super(entityClass);
    }
    public User checkLogin(String userId,String userPassword){
        User user=(User)operation.selectOne(userId);
        if(user==null)
            return null;
        if(!user.getUser_password().equals(userPassword))
            return null;
        return user;
    }
}
public class Service {
    protected IOperation operation;
    public Service(Class entityClass){
        operation=new EntityOperation(entityClass);
    }
}

五，总结

使用前端语言和前端框架有一个很妙的地方，就是浏览器客户端化。可以将浏览器看作一个简单的C/S的客户端，然后通过JS脚本向服务器抛出请求，只不过这请求是基于HTTP协议而已。

所以后端，不论是JAVA C# PHP等等，无所谓了，反正请求参数给你，你按json/xml/text等格式返回给我就是了。

挺妙！

点击查看更多内容