【Jsp精品源码栏目提醒】:网学会员,鉴于大家对Jsp精品源码十分关注,论文会员在此为大家搜集整理了“用Spring_JQuery实现信息管理小系统 - 其它资料”一文,供大家参考学习!
DATABASE 数据库 用 Spring+ JQ uery 实现信息管理小系统 王玉贵 摘 要: 分析了 SpringJQuery 技术的实现细节, 并通过一个系统实例, 验证了该技术的高效和可 行性。
关键词: Java 语言; 网络编程; SpringJQuery 技术 的 兼 容 性 。
下 面 就 是 helloworld.htm 页 面 的 结 构 , 里 面 只 列 出1 引言 了关键的标签。
可以看出, 它就是一个简单的静态 html 页面。
Java 的世界真是一个万花筒, 变化万端, 五彩纷呈。
在基 在这个页面中, 首先引用了 jquery1.3.2 库和 jquery 表单插于 Java 平台开发信息管理系统过程中, B/S 架构、 MVC 模式已 件代码, 这是 js 工作的基础。
接着引入 helloworld.js 脚本文件,经变得非常热门, 出现了一大批帮助人们实现这一目标的框架 注 意 命 名 规 则 是 html 页 面 及 其 相 关 的 js 脚 本 文 件 使 用 相 同 的和 技 术 , 像 Hibernate 、 Toplink 、 Spring 、 Struts , 真 是 八 仙 过 名 称 。
在 body 标 签 中 定 义 了 一 个 提 交 数 据 的 表 单 和 一 个 用 来海, 各显其能。
然而在框架选择上有些让人眼花缭乱、 无所适 显示服务器端返回信息的 div 标签:从。
于是先锋们披荆斩棘、 探索出一条条道路, 出现了像 SSH lthtmlgt(Struts Spring Hibernate ) 这样的组合拳套路。
ltheadgt … 如果不讲究方法, 单单使用
JSP 和 servlet 技术就能进行 B/ ltlink href quotresources/skin/blue/css/main.cssquot rel quotS 架 构 的 系 统 开 发 。
如 果 是 那 样 , 就 会 整 天 和 Html 标 签 与 stylesheetquot typequottext/cssquotgt ltscript type quottext/javascriptquot src quotresources/js/jquery -Java 代 码 的 混 合 体 打 交 道 , 从 而 错 过 了 Java 世 界 的 精 彩 。
接 1.3.2.min.jsquotgtlt/scriptgt下来将呈现的是一套框架组合使用技术: SpringJQuery 组合技 ltscript type quottext/javascriptquot src quotresources/js/jquery.术, 引领大家使用这个技术搭建一个很小的一个信息管理系 form.jsquotgtlt/scriptgt统 。
虽 然 这 不 过 是 Java 世 界 中 的 冰 山 一 角 , 却 也 能 够 领 略 到 ltscript type quottext/javascriptquot src quotresources/js/Java 的精彩。
helloworld.jsquotgtlt/scriptgt lt/headgt2 介绍 Hello Word ltbodygt … lt - 显示信息使用 --gt ltdiv classquotorgrootdivquot idquotprocmsgdivquot alignquotcenterquotgtlt Spring MVC 是 服 务 器 端 Java 框 架 , 而 JQuery 是 客 户 端 js /divgt框架, 如何进行组合应用呢。
按编程界惯例, 以 Hello Word 作 … lt - 提交信息使用表单 --gt为旅程的开始。
图 1 就是程序界面, 在输入框中输入姓名, 点 ltform actionquotdata/system/sayHelloquot methodquotpostquot idquot击 “问候” 按钮, 在问候信息栏里就会显示问候信息。
程序虽 helloformquotgt ltinput name quotyournamequot type quottextquot class quot然简单, 却能初步了解将要建立的这个小系统是如何工作的。
textfieldquotgt ltinput typequotsubmitquot namequotbuttonquot valuequot 问候 quotgt lt/formgt … lt/bodygt lt/htmlgt 图1 一个问候小程序 在 helloworld.js 文件中, 使用了一个 JQuery 函数 function2.1 客户端代码 , 在 所 有 js 文 件 中 都 使 用 了 这 样 的 结 构 , 它 的 作 用 是 当 客户端使用静态 的 html 页 面 加 上 JavaScript 脚 本 , 可 以 完 html 页面在浏览器中下载完毕后, 执行被传入的函数, 相当于全 脱 离
jsp 技 术 。
这 个 组 合 与 Flex 技 术 中 MXML 和 body.ready 函 数 。
所 有 js 代 码 都 放 在 被 传 入 函 数 的 函 数 体ActionScript 组合相似, 但是不依赖任何浏览器插件, 具有更好 中, 它的结构如下: 2013. 01 41 实用第一 智慧密集 function // 所有代码在这里 RequestMapping 现 在 解 释 一 下 helloworld.js 的 代 码 。
首 先 使 用 jquery 最 具 public ModelAndView sayHelloString yourname特 色 、 也 是 最 常 用 的 dom 元 素 查 找 函 数 ‘ selector ’ 查 找 用 return new ModelAndView quotjsonviewquotquotdataquotquot 你 好:quotyourname于显示返回信息的 div 标签 , 把 它 缓 存 到 一 个 变 量 中 ; 接 着 查 找页面中的表单元素, 使用 jquery 表单插件把这个表单初始化 成 一 个 Ajax 表 单 。
这 样 做 好 处 很 多 , 最 主 要 的 是 表 单 能 够 以 2.3 联系的实现Ajax 的方式进行提交, 不用刷新页面, 并且能够方便地进行表 客 户 端 代 码 如 何 把 数 据 提 交 给 服 务 器 端 sayHello 方 法 的单数据验证。
呢? 如果想彻底解释清楚这个过程, 恐怕需要写一本书。
在这 代 码 的 功 能 就 不 多 解 释 了 , 熟 悉 jquery 的 人 都 能 看 得 出 里 只 想 粗 略 地 解 释 一 下 这 个 过 程 , 使 大 家 能 够 “知 其 然 ”, 要来, 表单提交成功后, 把服务器端返回的数据以调用参数的形 想 “知其所以然”, 大家还需要找 Spring MVC 相关的书籍进一式传给提交成功回调函数, 回调函数得到执行, 把数据显示在 步学习。
div 标签里: 一 个 来 自 客 户 端 的 HTTP 请 求 在 Spring MVC 框 架 中 经 过 function 多次流转, 最后产生请求结果送回 到 客 户 端 , 这 个 过 程 如 图 2 var hlinfoprocmsgdiv 所示。
helloform.ajaxFormbeforeSubmit:beforsub dataType:json 控制器映射及方法适配 success:functionr ControllerClassNameHandlerMapping hlinfo. AnnotationMethodHandlerAdapter htmlr 请求分配 控制器 请求 Dispatcher 返回 ModleAndView Controller Servlet function beforsubdata 试图解析 ifdata.getnameyourname.value InternalResourceViewResolver alert 请输入您的名字 视图 JsonView return false 服务器端 public class SystemController 控制器名 System publicModelAndView sayHello String yourname 2.2 服务器端代码 ... 参数名 youname 服 务 端 充 分 运 用 了 Spring MVC 框 架 的 功 能 , 编 写 一 个 普 客户端通 的 Java 类 , 也 就 是 常 说 的 pojo (Plain Old Java Objects ) 类 , ltform actionquot data/system/sayHelloquot gt ltinput namequot yournamequot typequot textquot /gt利用 Spring MVC 的 Annotation 注解功能就能使这个普通的 pojo ltinput typequot submitquot valuequot 问候 quot /gt 方法名称 sayHello成为一个神奇的 MVC 控制器, 完成交付给它的使命。
lt/formgt 代 码 中 使 用 了 两 个 非 常 重 要 的 Annotation 注 解 , 一 个 是 图2 url 和 action 方法之间的对应关系Controller , 就 是 它 把 一 个 pojo 变 成 了 一 个 Spring MVC 控 制器 ; 另 一 个 是 RequestMapping , 是 这 个 注 解 把 一 个 普 通 的 类 客户端调用服务器端控制器方法, 主要用统一资源定位符方法变成了一个可以通过 url 进行调用的控制器方法: url 来 确 定 对 应 关 系 。
表 单 的 action 属 性 中 填 入 了 统 一 资 源 定 package cn.chinaunicom.sys.controller 位符, 这个 url 分为 3 个部分, 用 “/ ” 分隔。
其中就包 括 控 制... 器名称 (system , 去掉 Controller 字样, 不区分大小写) 和控制import org.springframework.stereotype.Controller 器方法 syaHello , 区分大小写 两个部分, 有了这两个部分就import org.springframework.web.bind.annotation.Request 能 定 位 到 某 一 个 控 制 器 的 某 一 个 方 法 。
有 的 MVC 框 架 为 了 确Mapping 定 这 个 调 用 关 系 需 要 进 行 一 大 堆 的 配 置 , Spring MVC 采 用 了import org.springframework.web.bind.annotation.RequestMethod “约定优先于配置” 的策略, 使得 url 和 action 方法之间的对应import org.springframework.web.servlet.ModelAndView 关系使用命名约定来确定, 几乎不用进行配置。
Controller 表单数据也使用了 “约定优先于配置” 的策略, 只要客户public class SystemController 端 输 入 文 本 框 的 name 属 性 和 服 务 器 端 控 制 器 方 法 的 形 参 名 称 2013. 0142DATABASE 数据库一致, 输入框中的数据就能传送到这个参数中来。
给客户。
简单了解了源代码和 Spring MVC 的 url 和 action 方 法 之 间 3.3 各类专员的 对 应 策 略 , 理 解 helloworld 就 不 难 了 。
用 户 在 文 本 输 入 框 中 各 位 专 员 分 工 明 确 , 有 的 负 责 用 户 认 证 工 作输 入 姓 名 , 点 击 “ 问 候 ” 按 钮 提 交 , 根 据 表 单 action 属 性 ( AuthenDao ), 有 的 负 责 专 业 生 产 ( UserDao )。
的 它 具 有 专 业“ data/system/sayHello ” 能 够 定 位 到 SystemController 的 sayHello 技术水平很高, 能够操作数据库, 所有的业务逻辑都由它们掌方 法 。
该 方 法 接 收 表 单 中 名 字 为 username 的 文 本 输 入 框 的 内 握, 能够很好地与总管配合, 完成总管交付的工作, 并及时地容, 在前面加上 “你好” 字样, 转换成 json 格式的数据返回到 反馈工作结果。
客 户 端 。
客 户 端 javascript 回 调 提 交 成 功 函 数 , 把 结 果 显 示 在 3.4 后勤div 标签中。
这些员工是为其他员工服务的。
它们虽然不抛头露面, 但 是 其 工 作 却 非 常 重 要 。
例 如 EncodeSetter 负 责 文 书 抄 写 , 使 整3 分工合作 个 系 统 文 字 编 码 一 致 , 不 会 出 现 烦 人 的 乱 码 ; Bean2Json 负 责 上 面 介 绍 的 helloworld 比 较 简 单 , 在 服 务 器 端 一 个 控 制 器 把 Java 对 象 转 换 成 json 格 式 的 数 据 , 以 便 客 户 端 Javascript 脚就可以完成任务, 没有进行进一步分工。
实际系统中往往要复 本进行处理。
杂得多, 进行进一步分工就显得十分必要 (如图 3 所示)。
4 实战--用户数据管理 有了前面的基础, 接着可以进行一次实战演练, 任务是进 行 用 户 数 据 的 增 删 查 改 (CRUD ) 操 作 。
目 的 是 通 过 这 次 演 练 弄清各类员工如何进行配合的和工作流程, 对系统进行进一步 了解, 最后达到能把这种模式熟练地应用到实际开发工作中 去。
参与用户数据工作员工如图 5 所示。
客户端 门卫 用户总管 用户管理专员 User.htm Athen User 数据库 图3 各位员工的源代码位置 UserDao User.js Filter Controller 在系统中, 已经进行了功能划分, 就像一个公司中的员工 图5 参与用户管理的员工一样, 各部分各司其职, 分工合作, 共同完成公司的运营工作 4.1 客户端代码(如图 4 所示)。
下面就带各位领导视察一下我们的员工。
4.1.1 操作页面 User.htm 客户端 门卫 系统总管 认证管理专员 Athen System AthenDao Filter Controller .