此文章是基于　　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. LOJ#6544. 杀苍蝇（计算几何）

    题面 传送门 题解 枚举一个定点,把剩下的所有点按照极角排序就行了 //minamoto #include<bits/stdc++.h> #define R register #defin ...

  2. [ActionScript 3.0] 通过as3操作web内容

    package com.controls.utils { import flash.net.*; import flash.utils.ByteArray; import flash.external ...

  3. gulp 搭建个人工作流：文件注入、热启动、跨域

    个人比价推崇前后端分离的开发方式,大家伙各司其职,只需通过 API 进行交流,不仅避免了沟通上的成本,更提升了开发效率.而在前端开发工作中,许多需求和问题是相似的,所以我们的开发模式往往是雷同的,是否 ...

  4. Python中 '==' 与'is' 以及它们背后的故事

    摘要 比较判断逻辑是在代码中经常使用的,在Python中常用 '==' 和 is 来做比较判断. ==  :  双等号是用来比较变量所指向内存单元中的值是否相等,它只关心值,并不在意值的内存地址,也就 ...

  5. L05-Linux部署msmtp+mutt发送邮件

    一.前言 首先,得明白发送一封邮件的流程,下面一段理论摘抄自廖雪峰的官网网站https://www.liaoxuefeng.com/article/00137387674890099a71c04005 ...

  6. 安卓monkey自动化测试，软硬回车

    1.Monkey程序介绍 在android手机上做自动化测试,monkey比cts,Android UnitTest 好用多了,他其实是继承与adb shell中的一段的shell指令. monkey ...

  7. Python unittest第一篇：基础入门+命令行编译

    unittest单元测试框架最初受JUnit启发,与其他语言的主要单元测试框架具有相似的风格. 它支持测试自动化,支持开启或关闭某个测试,支持结合测试.另外它可以生成各个单元测试的报告.为了实现以上功 ...

  8. orcal创建序列

    CREATE SEQUENCE flowjobseq --序列名INCREMENT BY 1 -- 每次加几个 START WITH 2000 -- 从1开始计数 NOMAXVALUE -- 不设置最 ...

  9. python 报错： Dog() takes no arguments

    后来上网找了一下.发现是 构造方法 __init__ 两边的下划线是双下划线,我写的是单下划线. 读书不认真,该打. 特此记录.

  10. Mac下Homebrew的图形化界面工具Cakebrew

    安装: brew cask install cakebrew 如果不能下载直接上官网下载dmg包进行安装. 参考: https://www.cakebrew.com/ https://github.c ...