房屋租赁管理系统整体界面设计与实现毕业设计论文.doc

房屋租赁管理系统 整体界面设计与实现数学学院 信息与计算科学（服务软件外包）摘要：现今随着科技的发展与进步、信息需求的增加，许多都已经进入计算机办公了，为广大网络用户提供更加周到和人性化的服务，是当前最重要的任务。但是随着人们对美好事物的追求，对系统界面要求也相应的提高。界面是软件与用户交互的最直接层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。本系统将采用能到达到要求的jQuery EasyUI框架来完成界面设计。关键字：房屋租赁管理；jQuery EasyUIAbstract: Nowadays with the development and progress of science and technology, the growing demand for the information,many are already in the computer business, for the majority of Internet users to provide more thoughtful and personalized service, is the most important task.But as people in the pursuit of good things, to improve the system interface requirements accordingly. Interface is the most direct software and user interaction layer, the stand or fall of interface decided to users first impression of the software. And well designed interface can guide the user to complete the corresponding operations, have the effect of the wizard. Interface as a mans face at the same time, the advantages to attract users directly. Can is adopted in this system to meet the requirements of the jQuery EasyUI framework to complete the interface design.Key woeds: Housing rental management; jQuery EasyUI随着社会经济的发展，城市现代化建设步伐不断加快，城市规模不断扩大，人员的流动也不断加大，房屋出租逐渐成为社会生活的重要组成部分。无论是房屋出租还是房屋求租，都面临着大量需求，再这样的要求下，就逐渐的出现了很多房屋租赁管理的软件，而每一种软件都有自己界面设计风格。现如今人们对美好事物的追求也越来越强，越是美好的事物，都会第一吸引人们的眼球。而最重要的是界面是软件与用户交互的最直接层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。那我们要为自己的系统设计一个怎样的界面风格来吸引人们呢？1 引言1.1 课题研究的背景介绍随着社会经济的发展，城市现代化建设步伐不断加快，城市规模不断扩大，人员的流动也不断加大，房屋出租逐渐成为社会生活的重要组成部分。无论是房屋出租还是房屋求租，都面临着大量需求，再这样的要求下，就逐渐的出现了很多房屋租赁管理的软件，而每一种软件都有自己界面设计风格。现如今人们对美好事物的追求也越来越强，越是美好的事物，都会第一吸引人们的眼球。而最重要的是界面是软件与用户交互的最直接层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。那我们要为自己的系统设计一个怎样的界面风格来吸引人们呢？完成一个这样的界面，不仅能为我们的系统增加人量。并且能够培养我对界面设计的能力，同时提高动手实践的能力。1.2 界面开发工具及工具介绍1.2.1 界面开发工具Html5、jQuery EasyUI框架。1.2.2 工具介绍一、html5介绍1、背景信息HTML 超文本标记语言的开发到1999年推出HTML4就停止了。万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。而浏览器厂商则把精力放到选项卡和丰富站点摘要（RSS）阅读器这类浏览器特性上。Web设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript 语言建立自己的应用程序。但是在接下来的数年时间中，HTML本身没有任何变化。人们从1999 年起就一直期待 HTML的新版本，而为了推动Web标准化运动的发展，一些公司联合起来(主要是 Apple、Opera 和 Mozilla Foundation)，他们成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟）专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5草案的前身名为 Web Applications 1.0，于2004年提出，于2007年被 W3C 接纳，并成立了新的 HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。但大部分现代浏览器已经具备了某些 HTML5 支持。W3C已经提出新计划，将HTML5定位为“推荐标准”。按照W3C的话来说，这意味着到2014年底，HTML5将成为一种完整的成品标准。W3C还计划到2016年底发布后续版本HTML 5.1。根据新计划，HTML工作团队将在2012年底发布一个HTML 5.0候选推荐标准，这个候选推荐标准将是5.0标准的基础。之后，HTML 5.1的草案也会被制定，其中将包括HTML 5.0的候选推荐标准，再加上任何被排除在外的不稳定功能。到2014年，HTML 5.1规范的出炉将经历类似步骤。任何不稳定功能将被剔除，产生HTML 5.1候选推荐标准，此后会制定HTML 5.2的草案，加入不稳定功能。之后HTML 5.3、5.4标准会一直升级下去。此前， HTML 5标准计划将在2022年完成。2、HTML5的优势a.提高可用性和改进用户的友好体验；b.新标签这将有助于开发人员定义重要的内容；c.可以给站点带来更多的多媒体元素(视频和音频)；d.可以很好的替代FLASH和Silverlight；e.当涉及到网站的抓取和索引的时候，对于SEO很友好；f.大量应用于移动应用程序和游戏。3、HTML5的不足a.HTML5 本身还在发展中，它不是用户应用的最迫切需求，更多是厂商试图改变软件生态格局的战略需求。b.HTML5的兼容性受限于各大浏览器表现，例如微软的IE和fireforx之间存在很多差别。c.HTML5需要一个成熟完整的开发环境，目前还缺少。d.HTML5功能的暴增，浏览器必须有一个高效的图形引擎和脚本引擎。e.HTML5需要杀手级应用来吸引和引导用户升级浏览器，最终完成HTML5终端的部署。4、未来前景从2012年1月的数据来看，全球已有超过34%的网站使用了HTML5技术。除去IE6-8浏览器外，其他主流浏览器都支持HTML5，其中仅有iPhone/iPad不支持Flash。据IDC调查研究显示，2013年全球各地将有10亿人使用HTML5浏览器，将有200万开发人员为HTML5浏览器开发应用。HTML5在未来的5-10年中，将成为移动发展的一个重要因素。二、jquery easyUI框架介绍easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。2 房屋租赁管理系统界面需求分析2.1 房屋租赁管理系统界面可行性分析可行性研究的目的就是用最小的代价在尽可能短的时间内确定问题是否能够解决、是否值得去解。下面从四个方面分析本系统界面的可行性：2.1.1 房屋租赁管理系统界面技术可行性本系统采用jQuery EasyUI进行前台界面设计、与后台数据库的链接、数据的录入、查询、在web中参数的传递和数据绑定等功能。jQuery EasyUI可以方便地创建动态、快速、交互性强的系统。减少了类与类之间的命名冲突，充分说明本系统界面在技术方面可行。2.1.2 房屋租赁管理系统界面经济可行性由于目前我国房地产事业蓬勃发展，房地产的租赁在国内呈现越演越烈之势，企业的想以最低的投入成本获得更高的管理利润，必须开发一个易于管理、维护费用低廉、界面友好、安全可靠的商务系统。因此jQuery EasyUI的开发简易性、灵活性尤其是经济方面可行迎合了这一开发前景，并且jQuery EasyUI是免费的。2.1.3 房屋租赁管理系统界面操作可行性该系统界面设计清晰，操作简洁，有完善的异常处理机制和提示信息机制，用户会感到所见即所得，因此操作方面可行。2.1.4 房屋租赁管理系统界面法律可行性本系统界面没有违反国家相关法律规定，法律方面可行。2.2 房屋租赁管理系统界面显示功能分析本系统应具有如下界面显示功能：1.登录：由于在用户和相应的管理者在管理房源时，需要房源的详细信息或其他操作，所以需要客户和管理者先登录才可以对房源进行操作。在进入系统时进行确认时，系统会判断是不是本系统数据库内存在的用户，若不是本站客户，必须建立新帐号。2.主题：由于用户对界面的审视观点不同，喜欢的颜色也不同。在这里增加主题更换，会使用户体验更好。3.导航目录浏览：若房屋租赁管理系统商品书目很多，这样就必须分类构建商品目录了，这样使用者就可以直观而又快速地浏览商品及进行相关操作。4.系统维护：系统维护主要是针对超级管理员设计的，他可以管理整个软件，增加系统选项、系统操作维护、模块维护和菜单维护。将前台与后台写在同一个系统中，有利于管理维护。5.用户管理：可以管理用户。可对系统整个用户进行管理，很分配权限。6.房源的增删改查：本系统提供直观的对房源进行四大操作，不同身份的使用者可进行的操作有限。使用者可键入所要查询的房间名和房间编号。这样设计是为了用户能精确快速的找到自己所需的房源。7.房屋租赁：主要管理租退续方做处理。8.收费管理：是整个房源的费用处理位置。9.合同管理：合同是为了打印并给客户的，所以用列表显示。2.3 房屋租赁管理系统界面系统整体结构本系统界面整体结构如图2-1所示： 图2-1 系统界面整体结构图2.4 房屋租赁管理系统界面开发环境1.本系统界面的硬件环境如下：l 客户机：普通PCn CPU：P4 1.8GHzn 内存：256MB以上n 分辨率：推荐使用1024*768像素l WEB服务器n CPU：P4 1.8GHzn 内存：256MB以上l 数据库服务器n CPU：P4 1.8GHzn 内存：256MB以上2.本系统界面的硬件环境如下：l 操作系统：WindowsXP/WIN7/WIN8l 数据库：Mysql6.0l 浏览器：IE9.0,火狐浏览器2.5 房屋租赁管理系统界面业务流程图1、本系统界面业务操作员流程图如图2-2所示： 图2-2 系统界面业务操作员业务流程图2、本系统界面管理员流程图如图2-3所示： 图2-3 系统界面管理员业务流程图2.6 房屋租赁管理系统界面响应时间需求无论是客户端和管理端，当用户登录，进行任何操作的时候，系统应该及时的进行反应，反应的时间在5秒以内。系统应能监测出各种非正常情况，如与设备的通信中断，无法连接数据库服务器等，避免出现长时间等待甚至无响应。3 房屋租赁管理系统界面概要设计3.1 引言3.1.1 编写目的在房屋租售管理系统项目的前一阶段，也就是房屋租赁管理系统界面需求分析阶段中，已经将系统用户对本系统的界面需求做了详细的阐述，这些用户需求已经在房屋租赁管理系统界面需求分析中获得，并在需求分析中得到详尽得叙述及阐明。本阶段已在系统界面的需求分析的基础上，对房屋租售管理系统做界面的概要设计。该部分是概要实际阶段的工作成果，它应说明界面对系统功能是如何展示等，为详细设计提供基础。主要解决了实现该系统界面需求的功能模块设计问题。包括如何显示目录、显示数据、数据与数据之间的联系、实现前台与数据库的连接等。在下一阶段的房屋租赁管理系统界面详细设计中，可参考此概要设计，在概要设计对房屋租售管理系统所做的界面模块结构设计的基础上，对系统进行详细设计。在以后的软件测试以及软件维护阶段也可参考此内容，以便于了解在房屋租赁管理系统界面概要设计过程中所完成的各界面模块设计结构，或在修改时找出在本阶段设计的不足或错误。本内容的预期读者是：l 设计人员l 开发人员l 项目管理人员l 测试人员l 用户3.1.2 编写范围在确认房屋租赁管理系统界面需求规格说明书后，根据房屋租赁管理系统界面需求规格说明书的描述对系统界面的功能进行模块化设计和分配，得出系统的界面系统的界面和接口。该内容是解决房屋租售管理系统整个项目系统界面“如何规划”的问题。在这里，而主要是通过系统界面明确的流程，为客户、用户、开发方等不同参与方提供一个交流的渠道。3.1.3 定义无3.1.4 参考资料房屋租赁管理系统需求规格说明书房屋租赁管理系统概要设计说明书房屋租赁管理系统界面需求分析3.2 总体设计3.2.1 需求规定1.页面内容：主题突出，站点定义、术语和行文格式统一、规范、明确，栏目、菜单设置和布局合理，传递的信息准确、及时。内容丰富，文字准确，语句通顺；专用术语规范，行文格式统一规范。2.导航结构：页面具有明确的导航指示，且便于理解，方便用户使用。3.技术环境：页面大小适当，能用各种常用浏览器以不同分辨率浏览；无错误链接和空链接；采用CSS处理，控制字体大小和版面布局。4.艺术风格：界面、版面形象清新悦目、布局合理,字号大小适宜、字体选择合理，前后一致，美观大方；动与静搭配恰当,动静效果好；色彩和谐自然,与主题内容相协调。3.2.2 运行环境1.本系统界面的硬件环境如下：l 客户机：普通PCn CPU：P4 1.8GHzn 内存：256MB以上n 分辨率：推荐使用1024*768像素l WEB服务器n CPU：P4 1.8GHzn 内存：256MB以上l 数据库服务器n CPU：P4 1.8GHzn 内存：256MB以上2.本系统界面的硬件环境如下：l 操作系统：WindowsXP/WIN7/WIN8l 数据库：Mysql6.0l 浏览器：IE9.0,火狐浏览器3.2.3 界面基础设计概念和界面处理流程一、界面基础设计概念界面基本设计概念如图3-1所示： 图3-1 界面基础设计概念二、界面处理流程界面处理流程如图3-2所示： 图3-2 界面处理流程图3.2.4 界面结构一、房屋租赁管理系统中间层1.房源管理主要是通过数据绑定的方法使用Mysql控制数据。2.用户管理，在用户管理中主要是用户登录，因此必须为这个服务来设计一个美观的登陆界面。3.房源信息管理是本系统管理所涉及的模块较多，所以界面需要对房源信息添加添加和删除，修改等操作按钮。4.房源管理包括房源管理定单的打印、定单中房源的详细描述信息的保存、房源租赁的成交处理等。二、房屋租赁管理系统表示层在该层中主要是采用jQuery EasyUI技术来构建窗口来支持整个面向服务对象的应用。该系统中主要的网页有，相关图将在界面详细设计展示：用户登录窗体，主窗体，系统操作维护窗口，模块维护窗口（如图3-1），菜单管理窗口（如图3-2），系统选项窗口（如图3-3），用户组窗口（如图3-4），系统用户窗口（如图3-5），房源管理窗口，资费管理窗口，房屋租售窗口(，合同管理窗口，收费管理窗口等。图3-1 模块维护窗口图3-2 菜单管理窗口图3-3 系统选项窗口图3-4 用户组窗口图3-5 系统用户窗口3.2.5 界面设计需求与程序的关系本条用一张如下的矩阵图说明各项界面设计需求的实现同各块程序的分配关系：表3.2 界面设计需求与程序关系表使用用户系统信息管理客户增删改查房源租赁历史信息售房管理退房续租出租管理合同管理收费项目管理欠费信息查询收费明细查询财务收支管理人员信息管理房源信息管理退房续租出租管理财务收费管理3.2.6 人工处理过程无3.2.7 尚未解决的问题无3.3 接口设计3.3.1 用户接口在用户接口部分，根据需求分析的结果，用户需要一个用户友善界面。在界面设计上，应做到简单明了，易于操作，并且要注意到界面的布局，应突出的显示重要以及出错信息。外观上也要做到合理化，考虑到用户多对WINDOW 风格较熟悉，应尽量向这一方向靠拢。而我们采用的是B/S结构，更应使用WINDOW 风格。在设计语言上，已决定使用jQuery EasyUI 插件进行编程，在界面上可使用其提供的可视化组件，向WINDOWS 风格靠近。 在设计上采用下拉式菜单及树形展开方式，在出错显示上可调用jQuery EasyUI 插件中的错误提示函数。总的来说，系统的用户界面应作到可靠性、简单性、易学习和使用。3.3.2 外部接口一、软件接口服务器程序可使用jQuery EasyUI （CURD）提供的对 Mysql 的接口，进行对数据库的所有访问。二、硬件接口在输入方面，对于键盘、鼠标的输入，可用java的标准输入/输出，对输入进行处理。在输出方面，打印机的连接及使用，也可用java的标准输入/输出对其进行处理。3.4 界面运行设计房屋租赁程序在界面显示时，根据相应的内容显示对应的窗口。有输入时启动系统接收数据模块，通过各模块之间的调用，读入并对输入进行格式化。在接收数据模块得到充分的数据时，将调用网络传输模块，将数据通过网络送到服务器，并等待接收服务器返回的信息。接收到返回信息后随即调用数据输出模块，对信息进行处理，产生相应的输出。服务器程序的接收网络数据模块必须始终处于活动状态。接收到数据后，调用数据处理/查询模块对数据库进行访问，完成后调用网络发送模块，将信息返回客户机，客户机窗口刷新显示相关数据。3.4.1 界面运行控制运行控制将严格按照各界面模块间链接关系来实现。在各界面事务中心模块中，需对运行控制进行正确的判断，选择正确的运行控制路径。 3.4.2 运行时间在软体的需求分析中，对运行时间的要求为必须对作出的操作有较快的反应。网络硬件对运行时间有最大的影响，当网络负载量大时，对操作反应将受到很大的影响。所以将采用高速ATM 网络，实现客户机与服务器之间的连接，以减少网络传输上的开销。其次是服务器的性能，这将影响对数据库访问时间即操作时间的长短，影响加大客户机操作的等待时间，所以必须使用高性能的服务器，建议使用 Pentium III 处理器。硬件对本系统的速度影响将会大于软件的影响。3.5 界面出错处理设计3.5.1 出错信息表3.5 出错信息表序号出错信息系统输出信息的形式含义处理方法1由于网络不稳定，出现界面加载报错网络连接错误因为网络的原因，前台与后台的数据连接不正常显示请示用户保持良好的网络环境。后台进行判断，在网络状态良好时，在允许前台加载网页，避免加载页面内容出错。2由于其他问题，如用户操作不当系统使用alert()给予提示无提醒用户按正常的步骤进行操作。3.5.2 界面补救措施故障出现后可能采取的变通措施，包括：a.后备技术：将页面分在不同的站点，同时加载界面。b.降效技术：保存原始记录，在连接到后台时，在更新界面；c.恢复及再启动技术：系统重置，将系统还原为初始状态。3.5.3 系统界面维护设计维护方面主要为对系统界面的灵活性进行维护。可根据实际情况在不影响系统功能的情况下作出相应的调整。4 房屋租赁管理系统界面详细设计4.1 引言4.1.1 编写目的本阶段是软件开发周期的第三个阶段，也是软件界面设计的第二步。在它的前一步界面概要设计阶段，已经确定了软件系统界面的总体布局，给出了系统中各个功能界面展示方式和功能界面间的联系。界面详细设计的工作，就是在上述结果的基础上，考虑“怎样实现”这个软件系统界面，直到对系统中的每个模块的界面给出足够的过程描述。本内容的预期读者是：l 设计人员l 开发人员l 项目管理人员l 测试人员l 用户4.1.2 背景a. 待开发的软件系统的名称：房屋租赁管理系统b.本项目的任务提出者、开发者：高达川小组。4.1.3 定义无4.1.4 参考资料房屋租赁管理系统需求规格说明书房屋租赁管理系统概要设计说明书房屋租赁管理系统界面需求分析房屋租赁管理系统界面概要设计4.2 程序系统的界面结构 图4-2-1 程序系统的界面结构图4.3 用户界面整体设计说明4.3.1 字体采用jQuery EasyUI框架的默认字体大小和样式。4.3.2 控件 采用jQuery EasyUI框架的默认样式。4.3.3 尺寸在合理的布局下尽可能多的显示控件的内容。4.3.4 布局按照概要设计里的操作流程顺序由上到下、由左到右的排放各种控件，使界面整体协调、美观大方。4.3.5 自适应父对象的尺寸改变控件应具有适应父对象尺寸改变的能力，当父对象的尺寸发生变化时，控件应能自动改变自身的尺寸并使界面保持整体协调，尽量减少因父对象的尺寸改变而带来的操作不便。4.4 登录窗口设计说明4.4.1 界面描述登陆界面如4-1所示：图4-1 登陆界面窗口本系统的登录界面为: login.jsp；给系统安排一个登录界面，提高用户数据的安全性。登录界面在窗口中是中间布局，有两个输入框和一个按钮，当输入框数据不为空时，点击按钮将实现登录。4.4.2 界面实现的功能实现用户登录系统的功能4.4.3 界面性能对精度、灵活性、容错性、时间特性的要求。4.4.4 窗口实现代码代码如下： 4.4.5 限制条件连接网络才可使用登陆界面。4.5 主窗口设计说明4.5.1 界面描述主窗口界面如4-2所示：图4-2 主窗口界面窗口本系统的主窗体界面为:xxx.htm；在界面头部是一个菜单栏，右边是一些辅助本系统的功能，更换密码、主题等。在这里我们用的是iframe。在菜单栏下面是整体显示内容，左边是导航栏，可以为用户导航，起到引导的作用，右边就是相对于左边导航栏显示的内容。给系统一个导航栏是给用户带来一个明亮操作系统的路线，带领用户使用本系统。4.5.2 界面实现的功能显示系统的整体功能，让用户一目了然。4.5.3 界面性能对精度、灵活性、容错性、时间特性的要求。4.5.4 窗口实现代码代码如下（详细代码请查看源代码）： 房源管理 客户管理资费管理房屋租售合同管理收费管理4.5.5 限制条件要登录成功之后才可以进入此窗口。4.6 房源管理窗口设计说明4.6.1 界面描述房源管理窗口界面如4-3所示：图4-3 房源管理界面窗口本页面有两个div组成，第一个div主要是条件搜索，第二个是由两个div组成，第一个div里面主要编辑增删改功能的按钮，第二个div是一个列表显示房源数据。4.6.2 界面实现的功能显示房源管理中的房源信息，并可以进行增删改。4.6.3 界面性能对精度、灵活性、容错性、时间特性的要求。4.6.4 窗口实现代码一、搜索代码如下： 房源名称: 房源编号: 房源类型:       搜索二、列表代码如下：房源编号: 房源名称: 房源面积: 装修情况: 房源类型: 房间设施: inp