此文章是基于　　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. Qt5学习笔记（消息过滤器）

    T06EventFilter.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += widgets gui MyWidget.h #i ...

  2. Requests Header | Http Header

    Requests Header | Http Header Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accep ...

  3. [转] 检查更新时出错：无法启动更新检查（错误代码为 4: 0x80070005 — system level）

    Google浏览器Chrome更新到时候提示错误:检查更新时出错:无法启动更新检查(错误代码为 4: 0x80070005 -- system level),很有可能是Chrome更新服务被禁用了,我 ...

  4. 基于注解的Spring容器源码分析

    从spring3.0版本引入注解容器类之后,Spring注解的使用就变得异常的广泛起来,到如今流行的SpringBoot中,几乎是全部使用了注解.Spring的常用注解有很多,有@Bean,@Comp ...

  5. P4842 城市旅行

    题目链接 题意分析 首先存在树上的删边连边操作 所以我们使用\(LCT\)维护 然后考虑怎么维护答案 可以发现 对于一条链 我们编号为\(1,2,3,...,n\) 那么期望就是 \[\frac{a_ ...

  6. 6、TensorFlow基础（四）队列和线程

    队列和线程 和 TensorFlow 中的其他组件一样,队列(queue)本身也是图中的一个节点,是一种有状态的节点,其他节点,如入队节点(enqueue)和出队节点(dequeue),可以修改它的内 ...

  7. Java switch函数

    switch()函数中能放置的值为:byte,short,char,int,string,enum类型或者byte,short,char,int的包装类,其中,string类型是java7(含)之后才 ...

  8. [转] Mock以及Mockito的使用

    http://www.open-open.com/lib/view/open1462177583813.html [From] http://www.open-open.com/lib/view/op ...

  9. The Ugly Duckling

    THE UGLY DUCKLING   Chapter 1: The Ugly Duckling Hatches   A mother duck sits on many eggs.Crack! Cr ...

  10. Android开发最佳实践

    Android开发最佳实践 摘要 ●使用 Gradle 和它推荐的工程结构 ●把密码和敏感数据放在gradle.properties ●不要自己写 HTTP 客户端,使用Volley或OkHttp库 ...