此文章是基于　　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#3084. 「GXOI / GZOI2019」宝牌一大堆（递推）

    题面 传送门 题解 为什么又是麻将啊啊啊!而且还是我最讨厌的爆搜类\(dp\)-- 首先国士无双和七对子是可以直接搞掉的,关键是剩下的,可以看成\(1\)个雀头加\(4\)个杠子或面子 直接\(dp\ ...

  2. logstash同步mongodb数据到elasticsearch

    一.安装logstash 二.安装mongodb插件 cd D:\Software\ELK5.5.0\logstash-5.5.0\bin logstash-plugin install logsta ...

  3. FlowPortal-BPM——离线审批（邮箱审批）配置

    一.将系统文件复制到安装目录下 二.以管理员身份运行bat安装程序 三.开启邮件离线审批服务 四.创建数据库表(JAVA数据库 或 .Net数据库) 五.配置config文件(发件箱.收件箱.错误问题 ...

  4. 常用DOS命令和Linux命令

    DOS命令 1.查询端口占用情况:netstat -aon |findstr "8080"; 查看端口进程号: 2.查看进程号信息:   tasklist |findstr &qu ...

  5. 通过MSI解压缩Cab文件

    迁移自我的Github 如果只是想做类似解压缩的操作,那么可以使用如下命令行 C:\Windows\System32\expand.exe <cab file path> -F:* < ...

  6. C#静态和实例

    静态 实例 关键字static修饰类或方法 不能使用static修饰类或方法 修饰后类直接调用 需要先实例化对象,用对象调用 静态只会执行调用一次,并且在程序退出之前会一直保持状态,占领内存 实例化一 ...

  7. IC79620: USER'S ROUTINE MAY BE TERMINATED ABNORMALLY IF SOME SYSTEMROUTINES WERE RUN IN DB2FMP BEFORE

    http://www-01.ibm.com/support/docview.wss?uid=swg1IC79620 APAR status Closed as program error. Error ...

  8. getActionBar()为null的解决方法总结（引用他人）

    最近在看android actionBar的使用,环境为AndroidStudio,建一个简单的工程,功能为:两个按钮,一个单击用于显示actionbar,一个用于隐藏actionbar.默认acti ...

  9. io流之转换流InputStreamReader、OutputStreamWriter

    例子程序: package io; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.File ...

  10. shell脚本杀进程重启

    #!/bin/bash ID=`ps -ef | grep "abc" | grep -v "$0" | grep -v "grep" | ...