此文章是基于　　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. acedSSGet 翻译

    ObjectARX 参考指南 > 全局函数 > AcEd 全局函数 > acedSSGet 函数 acedSSGet 折叠全部 C++ int acedSSGet( const AC ...

  2. [AS3.0] 解决Number类型计算不精确问题

    看下面代码运行结果: trace(256.08+123.1); //379.17999999999995 trace(256.08-123.11); //132.96999999999997 trac ...

  3. jquery源码解析：attr，prop，attrHooks，propHooks详解

    我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来 ...

  4. scrapy实战1，基础知识回顾和虚拟环境准备

        视频地址 https://coding.imooc.com/learn/list/92.html   一. 基础知识回顾     1. 正则表达式 1)贪婪匹配,非贪婪匹配 .*? 非贪婪 . ...

  5. HTML实例（四）

    实例一:有序列表,无序列表,<dl>,<dt>,<dd>,div块级标签等,实现上面的效果. <!DOCTYPE html> <html lang ...

  6. Linux之virtualbox中的ubuntu虚拟机linux系统共享文件夹

    windows通过virtualbox软件与linux系统机型文件共享 1.第一步 在设置中找到共享文件夹选项,选择添加共享文件夹 2.第二步 选择需要与linux进行共享的文件夹,并选择固定分配 3 ...

  7. HDU-1160-FatMouse's Speed（线性DP，LIS）

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. leetcode-6-Z字形变换

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

  9. [BZOJ 5072][Lydsy1710月赛]小A的树

    传送门 \(\color{green}{solution}\) 嗯...其实我也不太会,所以大胆猜个结论吧(后来证了一下,然后放弃了...). 我们发现如果要使一个联通块的黑点数量为\(k\)的方案最 ...

  10. 关于Nginx启动成功，浏览器不能访问的解决办法

    本人初学Nginx,第一天配置成功并能通过浏览器进行访问. 第二天重新打开,将Nginx启动,但是浏览器却访问不了. 执行 ps aux|grep nginx ,执行结果如下,的确Nginx服务已经启 ...