此文章是基于 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="300px;"> <tr> <td style="white-space:nowrap; padding-bottom: 5px;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，登录主界面
