此文章是基于　　EasyUI+Knockout实现经典表单的查看、编辑

一. 准备工作

　　1. 点击此下载相关文件，并把文件放到 ims 工程对应的文件夹下

二. 相关文件介绍

　　1. login.jsp：系统主界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>企业信息管理系统-登录</title>

    <%@ include file="/common/basePath.jsp"%>

    <link href="content/css/page/login.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

     <div class="second_body">

        <form data-bind="submit:loginClick">

            <div class="logo"></div>

            <div class="title-zh">企业信息管理系统</div>

            <div class="title-en" style="">Enterprise Information Manage System</div>

            <div class="message" data-bind="html:message"></div>

            <table border="0" style="width:300px;">

                <tr>

                    <td style="white-space:nowrap; padding-bottom: 5px;width:55px;">用户名：</td>

                    <td colspan="2"><input type="text" id="userCode" class="login" data-bind="value:form.userCode" /></td>

                </tr>

                <tr>

                    <td class="lable" style="white-space:nowrap; letter-spacing: 0.5em; vertical-align: middle">密码：</td>

                    <td colspan="2"><input type="password" id="password" class="login" data-bind="value:form.password" /></td>

                </tr>

                <tr>

                    <td></td>

                    <td colspan="2"><input type="checkbox" data-bind="checked:form.remember" /><span>系统记住我</span></td>

                </tr>

                <tr>

                    <td colspan="3" style="text-align:center">

                        <input type="submit" value="登录" class="login_button" />

                        <input type="button" value="重置" class="reset_botton" data-bind="click:resetClick" />

                    </td>

                </tr>

            </table>

        </form>

    </div>

     <script type="text/javascript" src="content/js/jquery/jquery-1.8.1.min.js"></script>

    <script type="text/javascript" src="content/js/jquery-plugin/cookie/jquery.cookie.js"></script>

    <script type="text/javascript" src="content/js/core/utils.js"></script>

    <script type="text/javascript" src="content/js/core/common.js"></script>

    <script type="text/javascript" src="content/js/core/knockout-3.4.1.js"></script>

    <script type="text/javascript" src="viewModel/login.js"></script>

     <script type="text/javascript">

         $(function () {

             ko.applyBindings(new viewModel());

         });

     </script>

 </body>

</html>

　　2. login.js：绑定登录界面的功能按钮

var viewModel = function () {

    var self = this;

    this.form = {

        userCode: ko.observable(),

        password: ko.observable(),

        remember: ko.observable(false),

        city: null

    };

    this.message = ko.observable();

    this.loginClick = function (form) {

        if(utils.isEmpty(self.form.password()))// 浏览器记住密码 不执行knockout监听

            self.form.password($("#password").val());

        if(utils.isEmpty(self.form.userCode()))

            self.form.userCode($("#userCode").val());

        $.ajax({

            type: "POST",

            url: rootPath+"/sys/login.do",

            data: ko.toJSON(self.form),

            dataType: "json",

            contentType: "application/json",

            success: function (d) {

                if (d.status == 'success') {

                    self.message("登陆成功正在跳转，请稍候...");

                    window.location.href = rootPath+'/';

                } else {

                    self.message(d.message);

                }

            },

            error: function (e) {

                self.message("登陆失败");

            },

            beforeSend: function () {

                $(form).find("input").attr("disabled", true);

                self.message("正在登陆处理，请稍候...");

            },

            complete: function () {

                $(form).find("input").attr("disabled", false);

            }

        });

    };

    this.resetClick = function () {

        self.form.userCode("");

        self.form.password("");

        self.form.remember(false);

    };

    this.init = function () {

        $.getJSON("http://api.map.baidu.com/location/ip?ak=F454f8a5efe5e577997931cc01de3974&callback=?", function (d) {

            self.form.city = d.content.address;

        });

        if (top != window) top.window.location = window.location;

        //判断之前是否有设置cookie，如果有，则设置【记住我】选择框

        if(com.cookie('userCode')!=null){

            self.form.remember(true);

        }else{

            self.form.remember(false);

        }  

        //读取cookie

        if(self.form.remember()){

            self.form.userCode(com.cookie('userCode'));

            self.form.password(com.cookie('password'));

        }

    };

    this.init();

};

三. 效果图

　　1. 访问：http://localhost:8080/ims/login.do，登录主界面

基于easyUI实现登录界面的更多相关文章

  1. EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  2. EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  3. 基于控制权限和登录验证跳转的django登录界面的实现

    django框架提供了出去登录和退出系统的login和logout的视图函数,本实现中使用系统自带的是视图函数.需要在settings.py,urls.py,views.py和模板文件等几个方面进行考 ...

  4. 基于easyui与MVC的前端界面

    1.登录界面: 2.主界面: 下载源码

  5. 基于EasyUI Treegrid的权限管理资源列表

    1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到 ...

  6. ABP 初探 之基于EasyUI的CURD

    结束了天天加班的项目,项目虽然结束,但还是有点小问题,只能在后期优化当中完成了,本次做项目采用了,MVC.Webapi.Entityframework,在园了里看到了有关ABP的介绍,同样ABP也是最 ...

  7. <实训|第三天>Linux登录界面的修改以及Richard Stallman、自由软件运动

    在写博客之前我想说两点: 承认一个错误,昨天写的实训第二天,我把redhat6.7写成了Linux6.7,感谢热心人士的指出! 昨天写的文章名字太长了,今天改善,内容感觉表述不全,希望各位谅解! 官方 ...

  8. 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目

    项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...

  9. 快速开发框架，及库存管理系统，基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。

    快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...

随机推荐

  1. Wireshark系列（从入门到精通的10个干货）

    Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直接与网卡进 ...

  2. 实时监测input输入变化 jQuery

    $('#production_name').on('input propertychange',function(){ alert('输入一个字弹一回'); });

  3. Linux磁盘及文件系统（一）

    一.磁盘 1.IO接口类型 (1)传输类型分类 并口:同一个线缆可以接多块设备 IDE口:两个,一个主设备,一个从设备 SCSI:宽带:16-1:窄带:8-1 串口:同一个线缆只可以接一个设备 (2) ...

  4. windows文件名太长无法删除的解决办法

    安装nodejs 的模块hexo后,由于香重新安装,在删除的时候却提示文件名太长无法删除,dos命令.回收站各种都无法搞定,后来找到解决办法: 1.进入这些文件的所在目录的上层目录,右键这些文件的所在 ...

  5. 爬虫2：urllib

        了解即可,不好用   一. 概述   python内置的http请求库,包括4个模块,分别如下   urllib.request   请求模块 urllib.error       异常处理模 ...

  6. leetcode-6-Z字形变换

    题目描述:  将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数: P A H N A P L S I I G Y I R 之后从左往右,逐行读取字符:" ...

  7. QuantLib 金融计算——数学工具之插值

    目录 QuantLib 金融计算--数学工具之插值 概述 一维插值方法 二维插值方法 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--数学工具之插值 载入模块 ...

  8. Object中的方法以及对象相等的判定

    看图说话 Object有以下几个方法 getClass() final类型,主要是用来获得运行时的类型 hashCode() 返回该对象的哈希码值,方法是为了提高哈希表(例如 java.util.Ha ...

  9. logrotate运行时间指定

    Edit in /etc/crontab the line that says 25 6 * * * root test -x /usr/sbin/anacron || ( cd / &&am ...

  10. 如何对react进行性能优化

    React本身就非常关注性能,其提供的虚拟DOM搭配上DIff算法,实现对DOM操作最小粒度的改变也是非常高效的,然而其组件的渲染机制,也决定了在对组件更新时还可以进行更细致的优化.  react组件 ...