毕业论文--本科毕业设计文档管理系统设计.doc

河河北北农农业业大大学学 本本科科毕毕业业论论文文 设设计计 题题 目 目 本科毕业设计文档管理系统设计 学学 院 院 信息科学与技术学院 专业班级 专业班级 软件工程 1002 班 学学 号 号 学生姓名 学生姓名 指导教师姓名 指导教师姓名 指导教师职称 指导教师职称 教授 二二 O 一四一四 年年 六六 月月 五五 日日 摘要 目前OA办公系统技术已经十分成熟 但是本院毕业设计文档管理还是用的 传统的纸质文档管理 由于毕业生在做毕业设计及论文的时候文档繁多 管理 复杂且容易出错 所以笔者开始着手设计开发该文档管理系统 将全院本科毕 业设计文档有效的管理起来 让这些文档的管理可以通过不同的人在有网络的 地方进行管理 不用再使用纸质的文档 这样可以大大加强管理的方便性和快 捷性 文中详细介绍了该系统的设计方案及已实现的系统功能 主要研究内容 如下 第一 介绍了本系统用到的基础理论知识 分析实现该系统框架 并且根据 本文中系统的需求最终确定系统开发所采用的框架 第二 分析J2EE企业级系统 开发 J2EE框架的运行原理 分析J2EE的Struts 与Hibernate框架的实现原 理 Struts 是Apache软件基金会 ASF 赞助的一个开源项目 它采用MVC模式 能够很好地帮助java 开发者利用J2EE开发Web应用 Hibernate是一个开放源代 码的对象关系映射框架 它对JDBC进行了非常轻量级的对象封装 使得Java程 序员可以随心所欲的使用对象编程思维来操纵数据库 第三 分析数据库设计原 理 关键字 OA 办公系统 Struts Hibernate SQLServer2005 Undergraduate Course Graduation Design Document Management System Design Abstract OA office system technology is already very mature but the school graduation design document management or use of the traditional paper based document management due to graduate when doing the graduation design and thesis document is various management complex and error prone so set out to design and develop such a document management system Will the school undergraduate course graduation design document and effective management can let the document management through different people where there is network management Don t use paper document so can greatly strengthen the management of the convenience and fast speed This paper introduces in detail the system design scheme and the implemented system function The main research content is as follows first introduced this system using the basic theory of knowledge analysis the realization of the system framework and finally determined according to the requirements of this article system adopted by the system development framework Second the analysis of the J2EE enterprise operation principle of system development J2EE framework Analysis of J2EE implementation principle of Struts and Hibernate framework Struts is Apache software foundation ASF sponsored an open source project it USES the MVC pattern can effectively help Java developers use the J2EE Web application Hibernate is an open source object relational mapping framework it is very lightweight for JDBC object encapsulation make the use of Java programmers can follow one s inclinations to manipulate the database object programming thinking Third the analysis principle of database design Key words OA office system Struts Hibernate SQLServer2005 目录 1 引言引言 1 1 1 课题研究的背景 1 1 2 课题研究成果应用的实际意义 1 2 相关技术简介相关技术简介 3 2 1 STRUTS 技术 3 2 2 HIBERNATE 技术 3 2 3 AJAX架构 3 2 4 JSON 技术 4 2 5 DWR技术 4 2 6 EXT技术 4 3 需求分析需求分析 5 3 1 系统实现目标 5 3 2 系统开发环境 5 3 3 功能性需求描述 6 4 系统设计系统设计 9 4 1 发布毕业设计项目功能 9 4 2 学生选题功能 11 4 3 项目调整功能 12 4 4 毕业设计项目公布功能 13 4 5 数据库设计 13 5 系统实现系统实现 18 5 1 登陆界面 18 5 2 系统主页 19 5 3 后台管理功能 19 1 教师管理 19 2 学生管理 20 5 4 定义毕业设计功能 21 5 5 项目管理功能 22 5 6 选题公布功能 23 5 7 其他后续功能 24 6 结论结论 25 7 致谢致谢 26 参考文献参考文献 27 1 1 引言 1 1 课题研究的背景 随着管理软件应用的逐渐成熟 企业管理软件完成一轮的 应用洗牌 后 渐淘汰掉一批零散型的应用系统 形成了以行业核心业务系统 如 ERP CTAX HIS等 和OA二分天下的局面 办公自动化 OA 是面向组织的日常 运作和管理 员工及管理者使用频率最高的应用系统 自1985年国内召开第一 次办公自动化规划会议以来 OA在应用内容的深度与广度 IT技术运用等方面 都有了新的变化和发展 并成为组织不可缺的核心应用系统 OA系统是实现办 公自动化的工具 是通过采用Internet技术 基于工作流的概念 以信息技术为中 心 采用一系列现代化的办公设备和先进的通信技术 广泛 全面 迅速地对信 息进行收集 整理 加工 存储和使用的办公系统 经过笔者研究发现 全院 毕业设计文档管理还是用的传统的纸质文档管理 由于毕业生在做毕业设计及 论文的时候文档繁多 管理复杂且容易出错 还存在消息不容易发布 有问题 反馈不及时等问题 本项目在充分了解毕业设计文档管理的流程和方法之后 分析出能够形成OA系统的需求 然后通过系统概要设计 详细设计 数据库设 计 开发形成了一个本科毕业设计文档OA系统 让这些文档的管理可以通过不 同的人在有网络的地方进行管理 不用再使用纸质的文档 这样可以大大加强 文档管理的简洁性 方便性和信息交流的快捷性 1 2 课题研究成果应用的实际意义 在传统的毕业设计文档管理模式下 信息交流往往是老师和学生沟通 管 理的瓶颈 教师没有一个同意的毕业设计信息发布平台 学生也没有一个可以 查看与咨询的平台 历届的毕业设计从选题 开题 项目任务书编写一直到最 后的材料汇总 进十份的不同材料都需要学生打印纸质文档交付给教师 教师 往往要保留很多学生的纸质文档 久而久之 纸质文档的丢失 遗漏以及保存 的不便等弊端体现出来 而通过OA系统可以灵活地实现点对点交流 点对面交 流 信息交流可以在鼠标点击的一个瞬间完成 这种师生间方便快捷的信息交 流将为毕业设计文档管理带来质的飞跃 同时 OA系统为学校提供的流程固化 与流程优化平台 使得毕业生做毕业设计的各项流程运转更加高效和可控 已 然成为建立现在学校管理制度的必备管理平台 OA系统还能够实现信息化的统 一更新和发布 当然 OA系统还能把众多的纸质文档信息化 实现无纸化办公 大大方便文档的保存 针对全院的毕业设计文档管理现状 产生了开发一款方便快捷毕业设计文 档OA管理系统的想法 本系统的用户定位是全院本科毕业生和老师 也就是说 为全院的毕业生及相关教师提供了一个信息交流平台 他们可以使用该系统所 提供的平台交流信息与文档收集 使教师在开展毕业设计的整个活动的各项工 2 作更加规范化 组织各项活动更加方便快捷 图 1 0 毕业设计管理系统用到的技术框架 3 2 相关技术简介 2 1 STRUTS 技术 Struts是Apache软件基金下Jakarta项目的一部分 除Struts之外 还有其 他成功的开源产品 包括Tomcat Ant 和Velocity 2000 年Craig R McClanahan 先生贡献了他编写的JSP Model 2 架构的Application Framework 原始程序代码给Apache 基金会 成为Apache Jakarta 计划Struts Framework 前身 Struts是Apache 基金会Jakarta 项目组的一个Open Source 项目 它采用 MVC模式 能够很好地帮助java 开发者利用J2EE开发Web应用 和其他的java架 构一样 Struts 也是面向对象设计 将MVC模式 分离显示逻辑和业务逻辑 的能力发挥得淋漓尽致 Structs 框架的核心是一个弹性的控制层 基于如 Java Servlets JavaBeans ResourceBundles与XML等标准技术 以及 Jakarta Commons 的一些类库 Struts由一组相互协作的类 组件 Servlet 以及jsp tag lib组成 基于struts构架的web应用程序可以说是一个传统 MVC设计模式的一种变化类型 2 2 HIBERNATE 技术 Hibernate是一个开放源代码的对象关系映射框架 它对JDBC进行了非常轻 量级的对象封装 使得Java程序员可以随心所欲的使用对象编程思维来操纵数 据库 Hibernate可以应用在任何使用JDBC的场合 既可以在Java的客户端程 序使用 也可以在Servlet JSP的Web应用中使用 最具革命意义的是 Hibernate可以在应用EJB的J2EE架构中取代CMP 完成数据持久化的重任 2 3 Ajax 架构 AJAX即 Asynchronous Javascript XML 1 异步JavaScript和XML 1 是指一种创建交互式网页应用的网页开发技术 AJAX 异步JavaScript 和XML 标准通用标记语言的子集 AJAX 是一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换 AJAX 可以使网页实现异步更新 这意 味着可以在不重新加载整个网页的情况下 对网页的某部分进行更新 传统的 网页 不使用 AJAX 如果需要更新内容 必须重载整个网页面 AJAX不是一种新的编程语言 而是一种用于创建更好更快以及交互性更强 的 Web 应用程序的技术 使用Javascript向服务器提出请求并处理响应而不阻 塞用户 核心对象XMLHTTPRequest 通过这个对象 您的 JavaScript 可在不 重载页面的情况与Web服务器交换数据 AJAX 在浏览器与 Web 服务器之间使用 异步数据传输 HTTP 请求 这样就可使网页从服务器请求少量的信息 而不 4 是整个页面 AJAX 可使因特网应用程序更小 更快 更友好 AJAX 是一种独 立于 Web 服务器软件的浏览器技术 AJAX 基于下列 Web 标准 JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义 并被所 有的主流浏览器支持 AJAX 应用程序独立于浏览器和平台 Web 应用程序较桌 面应用程序有诸多优势 它们能够涉及广大的用户 它们更易安装及维护 也 更易开发 不过 因特网应用程序并不像传统的桌面应用程序那样完善且友好 通过 AJAX 因特网应用程序可以变得更完善 更友好 2 4 JSON 技术 JSON JavaScript Object Notation 是一种轻量级的数据交换格式 它基 于JavaScript Standard ECMA 262 3rd Edition December 1999 的一个子 集 JSON采用完全独立于语言的文本格式 但是也使用了类似于C语言家族的 习惯 包括C C C Java JavaScript Perl Python等 这些特性使 JSON成为理想的数据交换语言 易于人阅读和编写 同时也易于机器解析和生 成 简单地说 JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串 然后就可以在函数之间轻松地传递这个字符串 或者在异步应用程序中将字符 串从 Web 客户机传递给服务器端程序 这个字符串看起来有点儿古怪 但是 JavaScript很容易解释它 而且 JSON 可以表示比 名称 值对 更复杂的结 构 例如 可以表示数组和复杂的对象 而不仅仅是键和值的简单列表 2 5 DWR 技术 DWR Direct Web Remoting 是一个用于改善web页面与Java类交互的远程 服务器端Ajax开源框架 可以帮助开发人员开发包含AJAX技术的网站 它可以 允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数 就像它就在浏览器 里一样 它包含两个主要的部分 允许JavaScript从WEB服务器上一个遵循了 AJAX原则的Servlet中获取数据 另外一方面一个JavaScript库可以帮助网站开 发人员轻松地利用获取的数据来动态改变网页的内容 2 6 EXT 技术 Ext是一个强大的js类库 以前是基于雅虎UI 现在已经完全独立了 主要 包括data widget form grid dd menu 其中最强大的应该算grid了 编 程思想是基于面向对象编程 oop 扩展性相当的好 可以自己写扩展 自己定 义命名空间 主要包括三个大的文件 ext all css ext base js ext all js 包括所有的类库 您可以根据需要进行删减 官方网站提供这一接口 在引用ext类库的时候 这三个文件必不可少 它提供了丰富的 非常漂亮的外 观体验 成为众多界面层开发人员的追捧 其核心的组件基本覆盖了我们构建 5 client的常用的组件 3 需求分析 需求分析是软件开发流程中重要的一环 需求分析的基本任务是根据用户 的需求 准确定义要完成的系统的目标 回答系统必须 做什么 的问题 它 的主要用途是明确系统需求 是用户和开发人员之间进行讨论的基础 并作为 系统设计和实现的依据 3 1 系统实现目标 系统是一个OA办公系统 为了能达到这一点 从功能上必须达到以下目标 1 院系班级 教师 学生等基本信息可以录入 修改 删除 2 可以发布消息和查看消息实现信息交流 3 学生与教师之间可以协同完成毕业设计活动开展的工作 4 功能全面的界面 使用户不需要培训就能够很好的使用本系统 3 2 系统开发环境 3 2 1 操作系统 本系统是建立在Java基础上开发的 而Java又是与平台无关的 因此 对 开发环境的操作系统没有特别需求 在此 本系统选择了微软Windows 7 X86 3 2 2 软件环境 开发中所使用到的软件环境如下所列 可能还有些相关支持组件没有全部 列出 1 Java Development Kit JDK 6 0 Update 14 2 MyEclipse 8 5 3 Apache Tomcat 6 0 20 4 Hibernate 3 3 5 Struts 2 1 6 JSON 2 2 2 7 DWR 3 0 6 8 EXT 5 0 9 SQL SERVER2005 3 3 功能性需求分析 3 3 1 发布毕业设计项目 3 3 1 1 功能描述 功能需求 引言 该功能是为了提供毕业设计项目 以下简称为项目 的题目供学生 选择 由提供项目的老师填写项目的题目和内容 提出项目的老师可以修改或 删除已有项目 由系主任审核项目 最后公布给学生 输入 由老师输入设计题目和内容 并允许老师修改其内容 加工 记录项目的题目和内容 审核 并公布给学生 输出 输出本科毕业设计项目 3 3 1 2 业务建模 图 3 1 发布毕业设计 3 3 2 学生选题 3 3 2 1 功能描述 功能需求 引言 该功能是学生选择项目和老师 学生可以修改或删除已选项目和老 师 输入 可选设计题目和内容 添加新项目 老师 修改项目 删除项目 系主 任 公布毕业设计项 目 7 加工 学生选择项目和老师 记录学生选择项目和老师 输出 输出学生选择的项目和老师 3 3 2 2业务建模 图 3 2 图 3 2 学生选题 3 3 3 毕业设计项目调整 3 3 3 1 功能描述 功能需求 引言 该功能是指导老师为每个设计项目选择学生 最后由系主任调整所 有 学生与毕业设计项目的关系 把学生平均分配到每个项目上 输入 所有的设计题目 学生 指导老师和学生选择的项目和老师情况 输入 老师为每个设计项目选择学生 系主任调整所有学生的毕业设计 输出 输出每个学生最后确定下来的毕业设计项目和指导老师 3 3 2 2业务建模 查看选择设计项目 学生 修改选择的项目和老师 删除选择的项目和老师 查看选择设计项目和指定该项目设 计的学生 修改对应项目的指定学生 指导老师 删除对应项目的指定学生 查看所有项目及指定的学生 修改项目及指定的学生 系主任 删除项目里指定的学生 8 图 3 3 毕业设计项目调整 3 3 4 毕业设计项目公布 3 3 4 1 功能描述 功能需求 引言 该功能是由系主任将已分配好的毕业设计与对应学生公布出来 然 后 学生可以查看公布情况 输入 每个学生最后确定下来的毕业设计项目和指导老师 输入 系主任确认所有学生的毕业设计是否正确 输出 公布所有学生的毕业设计项目和指导老师 3 3 4 2业务建模 图 3 4 毕业设计项目公布 查看所有学生的毕业设计项目 和指导老师 公布结果 修改对应项目的指定学生 删除对应项目的指定学生 系主任 查看毕业设计项目及对应学生 的公布结果 学生 9 4 系统设计 图 4 0 系统结构 4 1 发布毕业设计项目功能 该功能是为了提供毕业设计项目 以下简称为项目 的题目供学生选择 由提供项目的老师填写项目的题目和内容 提出项目的老师可以修改或删除已 有项目 由系主任审核项目 最后公布给学生 如图4 1 本科毕业设计文档管理系统 后台管理模块 业务功能模块 教 师 信 息 管 理 学 生 信 息 管 理 院 信 息 管 理 系 信 息 管 理 专 业 信 息 管 理 班 级 信 息 管 理 毕 业 设 计 定 义 功 能 项 目 发 布 功 能 学 生 选 题 功 能 项 目 调 整 功 能 项 目 公 布 功 能 10 图 4 1 发布毕业设计项目流程图 11 4 2 学生选题功能 该功能是学生选择项目和老师 学生可以修改或删除已选项目和老师 如 图4 2 图 4 2 学生选题流程图 12 4 3 项目调整功能 一 指导老师用户 图 4 3 指导教师项目调整流程图 二 系主任用户 图 4 4 系主任项目调整流程图 13 4 4 毕业设计项目公布功能 图 4 4 项目公布流程图 4 5 数据库设计 表 4 1 Department 系 属性名属性的描述属性的约束等说明属性的特性说明 DepartID 编号 INT not nullprimary key DepartName 系名称 varchar 50 DepartInfo 系简介 text Depart College 系所属的院 INTnot nullREFERENCES College CollegeID 表 4 2 Specialty 专业 属性名属性的描述属性的约束等说明属性的特性说明 SpecialID 编号 INT not nullprimary key SpecialName 专业名称 varchar 50 SpecialLength 学制 int SpecialCategory 类别 varchar 50 OfDepart INT REFERENCES Department Depa rtID 系主任公布项目 终止 开 始 学生查看项目公布结果 14 表 4 3 College 学院 属性名属性的描述属性的约束等说明属性的特性说明 CollegeID 编号 INTnot nullprimary key CollegeName 学院名 varchar 50 CollegeInfo 院简介 text 表 4 4 Teacher 教师 表 4 5 Student 学生 属性名属性的描述属性的约束等说明属性的特性说明 TeacherID 编号 INTnot nullprimary key TeacherName 姓名 varchar 50 not null TeacherSex 性别 varchar 50 TeacherPass 密码 varchar 50 not null State 状态 char 4 CHECK State ok OR State no TeacherTitle 职称 varchar 50 TeacherUsernam e 账号 VARCHAR 50 not null TeacherOfDepart 所在系 INT Research 研究方向 text TeacherInfo 简介 text TeacherMail 邮件 text TeacherPhone 电话 text TeacherQQ QQtext 属性名属性的描述属性的约束等说明属性的特性说明 StuID 编号 INTnot nullprimary key StuName 姓名 VARCHAR 50 not null StuSex 性别 varchar 50 StuUsername 账号 VARCHAR 50 StuLearnNum 学号 VARCHAR 50 not null StuPass 密码 VARCHAR 50 not null State 状态 char 4 StuClass 班级 int OfCollege 学院 varchar 50 StuMail 邮件 VARCHAR 50 StuPhone 电话 VARCHAR 50 StuQQ QQVARCHAR 50 LoseItemID INT SelectedState char 4 15 表 4 6 Project 项目 属性名属性的描述属性的约束等说明属性的特性说明 ProjectID 编号 INTnot nullprimary key ProjectName 项目名 VARCHAR 50 not null SelectedState 状态 char 4 CHECK SelectedState 未选 OR SelectedState 被选 CommitState int CHECK CommitState 0 OR CommitState 1 OR CommitState 2 SelectedNum int default 0 ProjectContent 内容 text ProjectRequire 要求 text StudentNeedNu m 需要学生数 intnot NULL DEFAULT 1 ProjectSource 选题来源 VARCHAR 50 ProjectTeacherID 出题教师编号 INTNOT NULLREFERENCES Teacher 教师编 号 ThesisScore 成绩 INTCHECK 成绩 0 AND 成绩 0 AND 毕业论文得分 100 表 4 7 Characters 角色 属性名属性的描述属性的约束等说明属性的特性说明 CharacterID 编号 INTnot nullprimary key CharacterName 角色名 VARCHAR 50 not null CharacterLevel 等级 INTCHECK 角色等级 1 OR 角色等级 2 OR 角色等级 3 1 管理员 2 系主任 3 教师 4 学生 备注 16 表 4 8 Class 班级 属性名属性的描述属性的约束等说明属性的特性说明 ClassID 编号 INTnot nullprimary key ClassName 班级 intnot null StartYear 入学年份 int OfSpecial 所属专业 VARCHAR 50 REFERENCES Specialty SpecialID 表 4 9 Graduation design 毕业设计定义表 属性名属性的描述属性的约束等说 明 属性的特性说明 GraduationDesig nID 编号 INTnot nullprimary key GraduationDesig nName SumStudent 总人数 int BeginYear int参加的学生入学年份 EndYear 毕业年份 DefinePeople 定义人 INTNOT NULLREFERENCES Teacher 教师编号 Date 定义时间 DATETIME Announce varchar 1 SelectItem varchar 1 Adjust varchar 1 Publish varchar 1 ProjectTask varchar 1 OpeningReport varchar 1 PaperReview varchar 1 Defense varchar 1 MaterialSummar y varchar 1 Grading varchar 1 表 4 10 Role Assignment 角色分配 属性名属性的描述属性的约束等说明属性的特性说明 RoleAssignID 编号 INTnot nullprimary key TeacherID 用户 char 20 not null CharacterID 角色 StartTime 开始时间 StopTime 有效时间 State 状态 17 表 4 11 Project GraduationDesign Teacher 项目 定义 教师表 属性名属性的描述属性的约束等说明属性的特性说明 ID 编号 INTnot null IDENTITY 0 1 primary key ProjectID 项目 IDINT not nullREFERENCES Project ProjectID GraduationDesig nID INT not nullREFERENCES GraduationDesign GraduationDesign ID TeacherID INT REFERENCES Teacher TeacherID UploadTeacher INT REFERENCES Teacher TeacherID UploadTime DATETIME 表 4 12 Student Selected 学生选题表 属性名属性的描述属性的约束等说明属性的特性说明 ID 编号 INTnot null IDENTITY 0 1 primary key ProjectID 项目 IDINT not nullREFERENCES Project ProjectID StuID 学生 INT REFERENCES Student StuID SelectedState 状态 CHAR 2 表 4 13 Teacher Selected 老师选学生表 属性名属性的描述属性的约束等说明属性的特性说明 ID 编号 INTnot null IDENTITY 0 1 primary key ProjectID 项目 IDINT not nullREFERENCES Project ProjectID TeacherID 学生 INT REFERENCES Student StuID 18 5 系统实现 5 1 登陆页面 此为系统登录界面也是初始界面 如图5 1 图 5 1 登陆界面 19 5 2 系统主页 如图5 2所示 该界面是整个网站的首页 界面上方的导航栏可以进入相应 的功能界面 右上角有显示用户所拥有的身份 图 5 2 系统主页 5 3 后台管理功能 由于后台管理页面较多 学生添加是上传固定格式的EXCEL表来批量添加 而添加教师与其他添加院系班级的页面类似 所以这里只展示有代表性的两个 模块 教师管理和学生管理 1 教师管理 教师管理主界面如图5 3 在界面上方可以添加新的教师 界面下方的列表 显示的是所有教师的信息 在表格最右侧对应着三个按钮 分别为修改 查看 删除键 点击修改或查看会弹出修改或查看的对话框如图5 4 20 图 5 3 教师管理界面 图 5 4 教师修改界面 2 学生管理 学生管理界面如图5 5 该界面可以进行学生的批量上传 修改和删除 由 于学生信息会比较多 通常是以系为单位上传大量的数据 单个上传不现实 所以上传是读取相对应格式的EXCEL表中的数据进行的 21 图 5 5 学生管理界面 5 4 定义毕业设计功能 该界面用于系主任定义毕业设计使其整个系开始毕业设计活动 页面如图 5 6 界面上方可以添加毕业设计定义 下方显示当前登录用户定义过的所有毕 业设计 在该功能中 系主任还可以开放或关闭所有功能模块 只需要在相应 的模块名称对应的CHECKBOX上打勾或取消打勾 图 5 6 定义毕业设计界面 22 5 5 项目管理功能 项目管理如图5 7 该界面下可以进行项目的增删改查 根据输入的条件组 合查询在下方列表中显示 系主任用户不但有项目的增删改查功能 还有审核 项目的功能 界面如图5 8 并且系主任可以代替任意教师上传项目 如图 5 9 图 5 7 项目管理功能 图 5 8 项目审核 23 图 5 9 系主任代替教师上传项目 5 6 选题公布功能 选题公布如图5 10 该界面是对之前学生选题调整完之后的一个公示 图 5 10 选题公布界面 24 5 7 其他后续功能 由于时间有限 还有一大部分功能没有能够实现 比较可惜 只能全部显 示为暂未开放 等待以后再完善 暂未实现的功能显示如图5 11 同未开放的 页面 图 5 11