图书管理系统实例

WEB 前端 Ajax 课程设计课程设计 题题 目 目 图书馆管理系统 设设 计计 者者 专业班级专业班级 学学 号 号 2016 年 06 月 09 日 XXXXXX 大学计算机学院 1 第一章第一章 前言前言 1 1 选题背景选题背景 本课题设计并实现了基于 Web 的图书馆管理系统 该系统采用现今比较流行的 Ajax XHTML 和 CSS jQuery Ext JS Prototype DWR 结合 ASP NET 语言 结合 SQL Server 数据库 实现了图书的借阅 查询 管理等基本功能 系统不仅维 护方便 节省了图书馆的资源 方便图书馆进行图书管理 同时 用户也能够 更容易更直观的查询书籍 管理藏书 使借书 还书 查书的过程大大简化 更加的方便和容易 毕业设计做的系统就是对图书馆的书籍进行管理 主要工作是实现了图书 信息功能 图书借还功能等 图书信息功能是实现了图书的数字管理 能方便 管理员快速查看图书信息 借书功能 用户可以通过此功能选择是否借出检索 的书籍 还书功能 读者可以查看自己所借书籍信息 管理员可以查看借书还 书历史和违规书籍信息 查看书籍具体信息 管理员可以查看书籍的具体信息 以及在图书馆的存储状态 本论文内容主要是运用软件工程的知识 先进行系统需求分析 之后是系 统概要设计 详细设计 并且详细介绍了ASP NET图书馆管理系统的操作代码 和排序的代码编写和测试 1 2 系统开发的环境系统开发的环境 1 2 1 硬件环境 1 能够运行 Windows 系统的高档 PC 台式机 笔记本电脑 1 2 2 软件环境 1 中文 Windows XP 操作系统 2 Microsoft Visual Studio 2005 集成开发环境 2 3 IIS5 1 服务器 4 Microsoft SQL Server 2000 数据库服务器 1 3 系统需求分析系统需求分析 1 3 1 需求分析 长期以来 人们使用传统的人工方式管理图书馆的日常业务 其操作流程 比较繁琐 在借书时 读者首先将要借的书和借阅证交给工作人员 工作人员 然后将每本书的信息卡片和读者的借阅证放在一个小格栏里 最后在借阅证和 每本书贴的借阅条上填写借阅信息 在还书时 读者首先将要还的书交给工作 人员 工作人员然后根据图书信息找到相应的书卡和借阅证 并填写相应的还 书信息 9 从上述描述中可以发现 传统的手工流程存在种种不足 首先处理借书 还书业务流程的效率很低 其次处理能力比较低 一段时间内 所能服务的读 者人数是很有限的 为此 图书信息管理系统需要为企业解决上述问题 提供 快速的图书信息检索功能及快捷的图书借阅 归还流程 1 3 2 系统目标 1 设计界面友好 美观 数据存储安全 可靠 2 基本信息设置保证图书信息和读者信息的分类管理 3 强大的查询功能 保证数据查询的灵活性 4 实现对图书借阅 续借 归还过程的全程数据信息跟踪 5 设置读者借阅和图书借阅排行榜 为图书管理提供真实的数据信息 6 提供借阅到期提醒 使管理者可以及时了解到期的图书借阅信息 7 提供管理员修改自己密码的功能 保证系统的安全性 8 提供灵活 方便的权限设置功能 使整个系统的管理分工明确 9 采用人机对话的操作方式 方便管理员的日常操作 10 系统最大限度地实现了易维护性和易操作性 3 1 3 3 可行性分析 技术可行性 根据系统的功能 性能及实现系统的各项约束条件 现有的技术及硬件软 件都能够满足 经济可行性 本系统建立在 ASP NET 开发的基础上 项目开发成本非常小 只需要有一 台能够运行 Windows 系统的高档 PC 台式机即可 并不需要什么高的成本 运行可行性 系统采用完全的图形化界面 易于管理 方便管理者查询设备信息 能够 满足使用者的要求 该系统应该提供简单的操作界面 能够快速的实现查书 借书 还书功能 第二章第二章 相关技术介绍相关技术介绍 2 1 AJAX 在传统的 Web 应用里 每个请求即对应一个页面 每次请求都会丢弃当前页面 等待 服务器生成新页面 即使两个页面几乎完全相同即使两个页面几乎完全相同 如果服务器响应还没有完全结束 则用户只能等待 不能继续原来的操作或发送请求 同步请求 Ajax 的全称是 Asynchronous JavaScript And XML 即异步 Javascript 和 XML Ajax 并 非一种全新的技术 它所使用的 Javascript CSS DOM 等技术早已存在 Ajax 的最大优势在于异步交互 即浏览者在浏览页面时 可同时向服务器发送请求 4 使用异步请求 服务器的响应不再是整个页面的内容 而只是必须更新的部分数据 浏览器无须频繁地重新加载新页面 Ajax 可以减轻服务器和带宽的负担 提供更好的服务响应 浏览器通过 Javascript 代码向服务器发送请求 请求到响应的过程在后台进行 不影响 用户当前界面 响应完成后 JavaScript 代码负责解析服务器的响应数据 并把样式表 加到数据上 然后在现有网页中显示出来 Ajax 使用简单的 XMLHttpRequest 对象发送请求 使用简单的 JavaScript 函数监听服 务器响应 在服务器完成响应后 JavaScript 通过 DOM 动态更新 HTML 页面 自始 至终 用户的动作无须中断 所感受的是一种连续的体验 通过使用 Ajax 技术 可以使互联网网页具有更友好的人机交互和更美观的浏览页面 Ajax 并不是要颠覆传统的 B S 结构的应用 而只是让 B S 结构的应用更加完善 1 Ajax 应用的工作过程应用的工作过程 JavaScript 脚本使用 XMLHttpRequest 对象向服务器发送请求 发送请求时 既可以发 送 GET 请求 也可以发送 POST 请求 JavaScript 脚本使用 XMLHttpRequest 对象解析服务器响应数据 JavaScript 脚本通过 DOM 动态更新 HTML 页面 也可以为服务器响应数据增加 CSS 样式表 在当前页面的某个部分加以显示 2 Ajax 相关技术相关技术 Ajax 核心技术 XMLHttpRequest XMLHttpRequest 是 Ajax 技术的灵魂 没有 XMLHttpRequest 就没有 Ajax XMLHttpRequest 用于发送异步请求 Ajax 的编程脚本 JavaScript JavaScript 是 Ajax 技术的黏合剂 JavaScript 主要工作 创建 XMLHttpRequest 对象 5 通过 XMLHttpRequest 向服务器发送请求 创建回调函数 监视服务器响应状态 在服务器响应完成后 启动回调函数 回调函数通过 DOM 动态更新 HTML 页面 动态改变 HTML 页面内容的方法 DOM DOM 可将 HTML 页面视为一组包含父子关系的节点的集合 DOM 是 JavaScript 获取页面数据的方式 JavaScript 可以通过 DOM 访问每个节点 修改节点内容及其属性 新增节点 删 除节点 让页面表现更友好的技术 CSS 在 Web 页面采用 CSS 技术 可以有效地对页面的布 局 字体 颜色 背景和其他效果实现更加精确的控制 数据交换格式 JSON 而不是 XML Ajax 技术提出时 XML 主要作为通信双方的数据交换载体 但后来被 JSON 取 代 JSON 的全称是 JavaScript Object Notation 意思是 JavaScript 对象表示法 它 是一种基于文本 独立于语言的轻量级数据交换格式 JSON 语法规则 数据在名称 值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 数据的书写格式是 名称 值对 名称 值对包括字段名称 在双引号中 后面写一个冒号 然后是值 firstName John JSON 值 数字 整数或浮点数 字符串 在双引号中 逻辑值 true 或 false 数组 在方括号中 对象 在花括号中 null JSON 对象在花括号中书写 firstName John lastName Doe JSON 数组在方括号中书写 employees firstName John lastName Doe firstName Anna lastName Smith firstName Peter lastName Jones 3 Ajax 的特征的特征 异步发送请求 服务器响应是数据 而不是页面内容 浏览器中的是应用 不是简单视图 6 在传统 Web 应用中 浏览器只是简单视图 不包含任何逻辑功能 对于 Ajax 应用 浏览器不仅可以包含简单逻辑 甚至可以保存用户会话状态 以以 购物车为例 购物车为例 在传统的 Web 应用里 采用 Session 保存会话状态 即将用户的状态信息保 存到服务器端 每次用户添加商品 都必须提交一次请求 从而将购买物品 提交到服务器的 Session 中 Ajax 可以采用 JavaScript 的变量保存用户购买的所有物品 用户购买的物品 无须提交到服务器的 Session 而是直接修改浏览器中的 JavaScript 变量 直 到用户提交购买请求 数据需要持久化时 JavaScript 才将请求发送到服务器 Ajax 应用初始化时 需要加载大量的 JavaScript 代码 这些 JavaScript 代码中已经 包含了部分业务逻辑 将在后台默默工作 负责处理部分逻辑 异步提交请求 以及读取服务器响应数据 动态更新页面 4 Ajax 带来的典型优势带来的典型优势 级联菜单的传统实现 Ajax 应用特别适用于交互较多 频繁读数据 数据分类良好的 Web 应用 大体上 使用 Ajax 技术有如下优势 减轻了客户端的内存消耗 Ajax 的根本理念是 按需取数据 无刷新更新页面 将传统的服务器工作转嫁到客户端 从而减轻服务器和带宽的负担 节约空间和 带宽租用成本 Ajax 基于标准化技术 几乎所有浏览器都支持这种技术 无须下载插件或虚拟机 程序 5 jQuery 简介简介 jQuery 库是非常优秀的 JavaScript 库 也是一个纯粹的 JavaScript 代码库 可以在任何 Web 应用中使用 jQuery 可以做到跨浏览器运行 开发者只要面向 jQuery 编程 JavaScript 脚本即可在 不同浏览器之间自由切换 优雅的解决方案 使用 jQuery 库之后 开发者操作的对象不再是原始的 DOM 元素 而是 jQuery 对象 通过这种方式就使开发者无须理会不同浏览器处理 DOM 对象时存 在的差异 而是直接以 jQuery 对象所支持的属性和方法操作 DOM 对象 对 Ajax 提供了良好的支持 使用 jQuery 无须手动创建 XMLHttpRequest 对象 只需 指定发送请求的 URL 和处理响应的回调函数即可 jQuery 负责完成剩下的工作 提供了工具方法以简化数组 字符串的操作 6 理解理解 jQuery 的设计的设计 使用 jQuery 动态更新 HTML 页面的两个步骤 7 获取 jQuery 对象 jQuery 对象通常是对 DOM 对象的包装 调用 jQuery 对象的方法来改变自身 当 jQuery 对象被改变时 jQuery 包装的 DOM 对象随之改变 HTML 页面的内容也就随之改变了 var target lee target html 我要学习 jQuery height 60 width 160 css border 2px solid black css background color ddddff css padding 20 jQuery 很多改变自身属性的方法的返回值 就是该对象本身 因此可以连续调用改变 自身属性的方法 学习 jQuery 只需掌握 2 点 获取 jQuery 对象 jQuery 对象有哪些可用的方法 7 获取获取 jQuery 对象对象 获取 jQuery 对象的两种方式 使用 函数或用 jQuery 对象提供的 利用父子关系来返回的 jQuery 对象 jQuery 对象的调用方法改变自身后返回的 jQuery 对象 jQuery 核心函数 3 2 html jQuery expression context 这个函数接收一个包含 CSS 选择器的字符串 然后用这个字符串去匹配一 组元素 jQuery 的核心功能都是通过这个函数实现的 这个函数最基本的用 法就是向它传递一个表达式 通常由 CSS 选择器组成 然后根据这个表达 式来查找所有匹配的元素 默认情况下 如果没有指定 context 参数 将在当前的 HTML 文档中查找 DOM 元素 如果指定了 context 参数 如一个 DOM 元素集或 jQuery 对 象 那就会在这个 context 中查找 例例 在文档的第一个表单中 查找所有的单选按钮 即 type 值为 radio 的 input 元素 input radio document forms 0 jQuery elements 将一个或多个 DOM 元素转化为 jQuery 对象 例例 设置页面背景色 document body css background black 例例 隐藏一个表单中所有元素 myForm elements hide jQuery html ownerDocument 该函数根据 html 参数 该参数是一个 html 字符串 创建一个或多个 DOM 对象 返回包装这些 DOM 对象的 jQuery 对象 其中 ownerDocument 是可选参数 用于指定创建 DOM 元素所在的文档 jQuery html props 该函数根据 html 参数创建一个或多个 DOM 对象 返回包装这 些 DOM 对象的 jQuery 对象 其中 props 是一个形如 prop value prop2 value 的对 8 象 该对象指定的属性将被附加到 HTML 字符串所创建的 DOM 对象上 jQuery callback 这种用法是 document read 的简写 其中 callback 指定一个函 数 在页面加载完成时自动触发 callback 例例 function alert 页面加载完成 2 2 ASP NET 语言的发展语言的发展 1996 年 ASP1 0 诞生 它的诞生给 Web 开发界带来了福音 它作为 IIS 的附属产品免费发送 并且不久就在 Windows 平台上广泛使用 2 早期的 Web 开发是十分繁琐的 以至于要制作一个简单的动态页面都需要编写大量的代码 才能完成 而 ASP 却允许使用 VBScript 这样简单的脚本语言 执行嵌在 HTML 网页中的代码 在进行程序设计时可以使用它的内部组件来实现一些高 级的功能 它的最大贡献在于它的 ADO ActiveX Data Object 使得对数据库 的操作十分简单 进行动态网页设计也变成了一件轻松的事情 3 1998 年 微软发布了 ASP2 0 与 ASP1 0 的主要区别在于它的外部组件是 可以初始化的 这样 在 ASP 程序内部的所有组件都有了自己的独立内存空间 并可以进行事务处理 2000 年 随着 Windows2000 的发行 它内带的 ASP3 0 也开始流行 与 ASP2 0 的主要区别是它使用了 COM 并且效果提高 版本稳定 2000 年 7 月 ASP NET 发行 ASP NET 不是 ASP 的简单升级 而是微软 推出的新一代 Active Server Pages ASP NET 是微软发展的新的体系结构 NET 的一部分 其中全新的技术架构会让每个人员的编程生活变得更为简单 Web 应用程序的开发人员使用这个开发环境可以实现更加模块化 功能更强大的应 用程序的编程 4 2 2 1 ASP NET 语言的特色语言的特色 网页的交互作用是通过 CGI 来实现的 CGI 程序的伸缩性不是很理想 因为它为每一个正在运行的 CGI 程序开一个独立进程 解决方法就是将经常 用来编写 CGI 程序的语言的解释器编译进你的 Web 服务器 5 ASP NET 是 MicroSoft NET 的一部分 作为战略产品 微软为 ASP NET 设计了这样一些策略 易于写出结构清晰的代码 代码易于重用和共享 可用 9 编译类语言编写等等 目的是让程序员更容易的开发出 Web 应用程序 满足 计算向 Web 转移的战略方向的需要 6 ASP NET 不仅仅是 Active Server Page ASP 的下一个版本 而且是一 种建立在通用语言上的程序构架 能被用于一台Web 服务器来建立强大的 Web 应用程序 ASP NET 提供许多比现在的 Web 开发模式强大的优势 2 2 2 SQL Server 2000 SQL Server 是一个关系数据库管理系统 它最初是由 Microsoft Sybase 和 Ashton Tate 三家公司共同开发的 于 1988 年推出了第一个 OS 2 版本 在 Windows NT 推出后 Microsoft 与 Sybase 在 SQL Server 的开发上就分道扬镳了 7 Microsoft 将 SQL Server 移植到 Windows NT 系统上 专注于开发推广 SQL Server 的 Windows NT 版本 Sybase 则较专注于 SQL Server 在 UNIX 操作系统 上的应用 在本书中介绍的是 Microsoft SQL Server 以后简称为 SQL Server 或 MS SQL Server SQL Server 2000 是 Microsoft 公司推出的 SQL Server 数据库管 理系统的较新版本 该版本继承了 SQL Server 7 0 版本的优点同时又比它增加 了许多更先进的功能 具有使用方便可伸缩性好与相关软件集成程度高等优点 可跨越从运行 Microsoft Windows 2000 的膝上型电脑到运行 Microsoft Windows 2000 的大型多处理器的服务器等多种平台使用 8 第第 3 章章 总体设计总体设计 3 1 业务流程图业务流程图 根据系统的需求分析和可行性分析 画出图书馆管理系统的系统流程图 如 图 3 1 所示 10 读者 图书借阅图书续借图书归还 管理 员 管理图书档案 管理读者档案信息 读者档案 获取读者信息 图书档案 图书借阅档案 根据读者信息获取 借阅信息 完成图书续借 完成图书借阅 归还相关图书 图书归还档案 图 3 1 系统流程图 3 2 系统功能结构系统功能结构 根据图书馆管理系统的特点 可以将其分为系统设置 读者管理 图书管 理 图书借还 系统查询等 5 个部分 其中各个部分及其包括的具体功能模块 如图 3 2 所示 11 图书馆管理系统 系统设置读者管理图书管理图书借还系统查询 图 书 馆 信 息 管 理 员 设 置 书 架 设 置 读 者 类 型 管 理 读 者 档 案 管 理 图 书 类 型 管 理 图 书 档 案 管 理 图 书 借 阅 图 书 续 借 图 书 归 还 图 书 档 案 查 询 图 书 借 阅 查 询 更 改 口 令 推 出 系 统 图 3 2 系统功能模块 3 3 数据库设计数据库设计 3 3 1 数据总体结构设计数据总体结构设计 整个系统所包括的所有信息包含图书信息 读者信息 图书借 阅信息 图书归还信息 管理员信息 读者类型信息 图书类型信 息 可将信息抽象为下列系统所需要的数据项和数据结构 1 图书信息 图书编号 图书名称 图书类型 作者 译者 ISBN 号 价格 出版社 所在书架 入库时间 操作员 2 图书类型 图书编号 名称 可借阅天数 3 读者信息 编号 姓名 性别 借阅证编号 读者类型 出 生年月 有效证件 证件号码 登记日期 电话 邮箱 操作员 12 4 读者类型 名称 可借阅图书本数 5 图书借阅信息 图书编号 读者 ID 借出时间 应还时间 是否归还 操作员 6 图书归还信息 图书编号 读者 ID 归还时间 操作员 7 管理员信息 名称 密码 图书馆书架信息 名称 出 版社信息 权限信息 8 图书馆信息 编号 名称 馆长 电话 地址 邮箱 创建日 期 简介 在这里使用 E R 图描述了图书馆管理系统的数据模型 下图标 识涉及的实体及关系 3 3 2 图书信息表结构设计图书信息表结构设计 图书馆馆藏中图书的信息主要在图书信息表中反映出来 在一 本书入库时 就会由操作员添加它们的相关信息 系统借助本表来 完成图书信息的查询 比如出版社则为出版该书出版社 图书入库 时间显示图书进入图书馆的时间 13 表的具体结果如下 表表 6 1 图书信息表图书信息表 tb bookinfo 字段名称数据类型字段长度是否为空说明 barcodeVarchar30NoKey booknameVarchar70No 书名 authorVarchar30Yes 作者 translatorVarchar30Yes 译者 ISBNVarchar20No 出版社 priceFloat 8 2 No 图书价格 bookcaseVarchar10No 图书所在书架 pressVarchar70No 出版社 intimeDateNo 图书入库时间 operatorVarchar30No 操作员 pageInt 10Yes 图书页码 3 3 3 图书类型信息表结构设计图书类型信息表结构设计 图书总是分为很多类型 比如社科 比如文学 该表的主要内 容就是为图书进行分类 可借阅天数反映了该种类型图书的可借阅 天数 表的具体结构设计如下 表表 6 2 图书类型信息表图书类型信息表 tb booktype 字段名称数据类型字段长度是否为空说明 ID Int10NoKey booknameVarchar30No 书名 DaysInt10No 可借阅天数 14 3 3 4 读者信息表结构设计读者信息表结构设计 该表设计了就是为了读者进行分类 而且不同类型的读者可借 阅图书的数据是不同的 在此表中 还可以对各种类型读者的可借 阅图书数据进行修改 表的具体结构设计如下 表表 6 3 读者信息表读者信息表 tb reader 字段名称数据类型字段长度是否为空说明 Idint10NoKey Namevarchar20No 姓名 Sexvarchar4No 性别 barcodevarchar30No 借阅证编号 readertypevarchar11No 读者类型 Telvarchar20Yes 电话 e mailvarchar100Yes 邮箱 paperTypevarchar10No 证件类型 PaperNO Varchar20No 证件号码 birthdaydateYes 出生日期 intimedateNo 登记时间 operatorvarchar30No 操作员 3 3 5 读者类型信息表结构设计读者类型信息表结构设计 不同类型的读者拥有不同的权限 而可借阅图书数据也由其权 限规定 本表就是对不同类型读者进行分类的表 表的结构设计如 下 表表 6 4 读者类型信息表读者类型信息表 tb readertype 字段名称数据类型字段长度是否为空说明 ID int10NoKey readernamevarchar50No 姓名 15 numberint4No 可借图书本数 3 3 6 图书借阅信息表结构设计图书借阅信息表结构设计 当一本书入库了之后 也就有了其相关的信息 比如入借阅时 间 归还时间 本表记录的就是这些信息 记录了图书的状态 是 被借出还是被归还 表的结构设计如下 表表 6 5 图书借阅信息表图书借阅信息表 tb borrow 字段名称数据类型字段长度是否为空说明 ID Int10NoKey readerIDVarchar10No 借阅证编号 bookIDInt10No 图书编号 borrowTimeDateNo 结出时间 backTimeDateNo 应归还时间 operatorVarchar30No 操作员 ifbackTinyint1No 是否归还 3 3 7 图书归还信息表结构设计图书归还信息表结构设计 该表的主要作用就是记录图书应该被归还的时间 除此之外 把图书与借阅者联系起来应该也是它的一个功能 表的结构设计如 下表 表表 6 6 图书归还信息表图书归还信息表 tb giveback 字段名称数据类型字段长度是否为空说明 ID Int10NoKey readerIDVarchar11No 借阅证编号 bookIDInt11No 图书编号 backTimeDateNo 归还时间 16 operatorvarchar30No 操作员 3 3 8 管理员信息表结构设计管理员信息表结构设计 用于记录信息 包含 ID 和登陆密码表的具体结构设计见下表 表表 6 7 系统用户信息表系统用户信息表 tb mamager 字段名称数据类型字段长度是否为空说明 ID Int10NoKey namevarchar30No 用户 passwordvarchar30No 密码 3 3 9 图书馆信息表结构设计图书馆信息表结构设计 包含图书馆的诸多信息 方便读者对图书馆的了解 表的具体 设计如下 表表 6 8 图书馆信息表图书馆信息表 tb library 字段名称数据类型字段长度是否为空说明 ID Int10NoKey librarynamevarchar50No 图书馆馆名 curatorvarchar10No 馆长 telvarchar20Yes 结出时间 addressvarchar100No 应归还时间 e mailvarchar100No 邮箱 urlvarchar100No 图书馆网站 createDatevarcharNo 创馆时间 introduceTextYes 图书馆简介 15 17 3 3 10 书架信息表结构设计书架信息表结构设计 该表存储的为书架信息 表的具体设计如下 表表 6 9 书架信息表书架信息表 tb bookcase 字段名称数据类型字段长度是否为空说明 ID Int10NoKey namevarchar30No 书架名称 第第 4 章章 详细设计详细设计 4 1登录模块实现 登录模块主要功能是实现用户的登陆 一般是从系统首页登陆然后 进入系统 具体操作为 打开浏览器 然后在地址栏中输入 http 127 0 0 1 8080 Library Sys 即能看到系统首页了 根 据提示输入用户名及其密码 再按确定 即可立即进入系统了 struts xml 18 applicationContext xml org hibernate dialect MySQLDialect 19 com mybbs vo Question hbm xml com mybbs vo Admin hbm xml com mybbs vo Answer hbm xml com mybbs vo User hbm xml 20 UserAction java Action 只有一个 userManager 的 set 方法没有 get 方法 写在 spring 注入是会同时 提供 get 和 set 方法 若使用 json 执行 action 后返回 json 数据 此时就会出 现上面的异常错误 解决办法是 去掉 get 方法 package com mybbs action import com mybbs manager UserManager import com mybbs vo User import com opensymphony xwork2 ActionSupport public class UserAction extends ActionSupport UserManager userManager User user public String info public User getUsery return usery public void setUsery User usery this usery usery public String check throws Exception System out println username User user1 userManager check user getUsername ll info 恭喜你可以使用 else info 用户已经存在 System out println info return SUCCESS 21 public void setUserManager UserManager userManager this userManager userManager public User getUser return user public void setUser User user this user user public void setInfo String info this info info public String getInfo return info index jsp base href My JSP register jsp starting page script type text javascript src js jquery 1 1 2 6 pack js document ready function 22 check blur function var params check serialize ajax url check action type post dataType json data params success update page function update page info var json eval info var str json info information html str 用户名 密码 年龄 查看所有用户 23 4 2 图书馆主界面模块的实现图书馆主界面模块的实现 在该图书馆管理系统主界面中有首页 日常工作 下拉表中有 借阅处理 还书处理 图书续借 读者资料维护 读者类型管理 读者档案管理 图书资料维护 图书类型设置 图书档案管理 查询 图书资料查询 借阅历史记录查询 借阅到期提醒 系统管 理 图书馆信息 管理员管理 书架设置 更改口令 退出系统 左端显示今日日期时间 中间显示当前登录用户名 右上端显 示两个链接 刷新页面 关闭系统 系统首页主要显示了图书借阅排行榜 利于查看借阅情况 读 者对哪些图书感兴趣 便于管理图书 图书馆主界面如下图 4 3 所 示 图图 4 3 图书馆主界面图图书馆主界面图 24 4 3 读者资料维护功能模块的实现读者资料维护功能模块的实现 读者资料维护有两个功能模块 分明为读 者类型管理和读者信 息管理 读者类型管理设置不同类型能够借阅图书的最大数量不一 样 读者信息管理则是记录下读者相关的信息 并且可以对这些信 息进行添加 删除 修改等功能 其各自操作界面如下所示 1 读者类型管理功能界面 图图 4 4 读者类型管理操作界面读者类型管理操作界面 点击界面上的 添加读者类型信息 出现图 4 4 可以增加类 型名称和其对应的借书数目 点击 修改 出现图 4 5 可以修 改学生类型名称和其对应的借书数目 点击 删除 实现删除读者类型 图图 4 5 添加读者类型操作界面添加读者类型操作界面 图图 4 6 修改学生类型操作界面修改学生类型操作界面 2 读者档案管理功能界面 25 图图 4 7 读者档案管理界面读者档案管理界面 设置读者信息的时候需要输入读者全面的信息 比如姓名 姓 名 借阅证编号 选择读者类别 有效证件 证件号码 电话 e mail 等信息 而且证件的号码是必填的 除此 可以添加读者信息 如下图 4 7 显示添加成功图标如下 图 4 8 及成功界面如下图 4 9 还可以修改读者信息 图图 4 8 添加读者详细信息添加读者详细信息 图图 4 9 添加成功图标添加成功图标 26 图图 4 10 添加信息成功界面添加信息成功界面 点击读者姓名 注 显现灰色即为可连接标识 可以查询查看读者 详细资料 比如点击读者姓名唐大治 查看她的详细资料 如下图 4 11 图图 4 12 读者唐大治读者唐大治 的详细资料的详细资料 27 4 4 Jquery 异步处理异步处理 json 数据数据 前台页面 无标题页 hover cursor pointer 小手 background ffc 背景 无参数调用 document ready function btn1 click function ajax type POST 访问 WebService 使用 Post 方式请求 contentType application json WebService 会返回 Json 类型 url Default2 aspx HelloWorld 调用 WebService 的地址和方法名称组 合 WsURL 方法名 data 这里是要传递的参数 格式为 data paraName paraValue 下 面将会看到 dataType json success function result 回调函数 result 返回值 alert result d 有参数调用 document ready function btn2 click function ajax type POST contentType application json 28 url Default2 aspx GetWish data value1 心想事成 value2 万事如意 value3 牛牛牛 value4 2009 dataType json success function result alert result d 返回集合 引用自网络 很说明问题 document ready function btn3 click function ajax type POST contentType application json url Default2 aspx GetArray data i 10 dataType json success function result result d each function alert this dictionary append this toString alert result d join 返回复合类型 document ready function btn4 click function ajax type POST contentType application json url Default2 aspx GetClass data dataType json success function result result d each function alert this dictionary append this ID this Value alert result d join 29 Ajax 为用户提供反馈 他们两个方法可以添加给 jQuery 对象在 Ajax 前后回 调 但对与 Ajax 的监控 本身是全局性的 document ready function loading ajaxStart function this show ajaxStop function this hide 鼠标移入移出效果 多个元素的时候 可以使用 隔开 document ready function btn hover function this addClass hover function this removeClass hover dictionary 后台 cs 文件 using System using System Collections using System Collections Generic using System Configuration using System Data 30 using System Linq using System Web using System Web Security using System Web UI using System Web UI HtmlControls using System Web UI WebControls using System Web UI WebControls WebParts using System Web Services public partial class Default2 System Web UI Page protected void Page Load object sender EventArgs e WebMethod public static string HelloWorld return 123 456 WebMethod public static string ABC string ABC return ABC WebMethod public static string GetWish string value1 string value2 string value3 int value4 return string Format 祝您在 3 年里 0 1 2 value1 value2 value3 value4 返回集合 WebMethod public static List GetArray int i List list new List while i 0 list Add i return list 31 返回一个复合类型 WebMethod public static Class1 GetClass return new Class1 ID 1 Value 牛年大吉 public class Class1 public string ID get set public string Value get set 利用 Jquery 让返回的各类数据 string 集合 List 类 以 Json 数据格式 返回 为什么要用到 result d 这里我们顺带讲下 Json Json 简单讲就是 Javascript 对象或数组 Json 形式一 javascript 对象 firstName Brett lastName McLaughlin email aaaa Json 形式二 javascript 数组 firstName Brett lastName McLaughlin email aaaa firstName Jason lastName Hunterwang email bbbb 当然 javascript 数组和对象可以互相嵌套 如形式一中的 Brett 可以换成 一个 Js 数组或 Js 对象 那微软的 Ajax 返回的是哪种形式呢 是第一种 微软框架默认返回一个 d 后台返回的数据 这里我们用以上示例 中的测试到得比如 如上例的返回的是 string 类型的话 Firefox 调试如下 当返回的是 List类型的话 FireFox 调试如下 32 返回的数据也是放在 Js 对象中的 d 属性里面 所以说这就是为什么我们老是用 result d 来取微软的框架返回的数据 方法一不常用 一般用得多的还是方法二 方法二方法二 建一个一般处理程序即建一个一般处理程序即 ashx ashx 文件文件 用这种方法一般是我们要在 ashx 文件里手动写好返回的 Json 格式的数据返回 给前台用 ashx 你可以配成 Json 格式一或 Json 格式二 Default aspx 页面 Js 代码如下 ajax type POST url Handler ashx dataType json success function data alert data name 返回的为 Json 格式一 Js 对象 返回的为 Json 格式二 Js 对象 data each function i alert data i name Handler ashx 代码如下 using System using System Web using System Collections using System Collections Generic using System Web Script Serialization public class Handler IHttpHandler public void ProcessRequest HttpContext context JavaScriptSerializer jss new JavaScriptSerializer 33 context Response ContentType text plain 返回的为 Json 格式一 Js 对象 string data name wang age 25 返回的为 Json 格式二 Js 数组 string data name wang age 25 name zhang age 22 context Response Write data public bool IsReusable get return false 以上基本上就第二种方法 可能有人不喜欢拼字符串 那有什么好办法呢 答案是 有 微软对 Json 有很好的支持 拿上例子说我们只要把 Handler ashx 改一下就可以了 Handler ashx 代码如下 using System using System Web using System Collections using System Collections Generic Dictionary 键值对集合所需 using System Web Script Serialization JavaScriptSerializer 类所需 public class Handler IHttpHandler public void ProcessRequest HttpContext context JavaScriptSerializer jss new JavaScriptSerializer context Response ContentType text plain Dictionary drow new Dictionary drow Add name Wang drow Add age 24 context Response Write jss Serialize drow public bool IsReusable get return false ASP Net 中的 JavaScriptSerializer 为我们提供了很好的方法 jss Ser