物联网IPv6远程监控应用示范系统——说明.doc

物联网/Ipv6/远程视频监控信息管理系统V1.0 41物联网/IPv6/远程视频监控信息管理系统V1.01 系统设计本系统基于MVC模式，即JSP +Servlet+JavaBeans的技术，大量使用Java script语句，采用Browse/Server工作模式，结合应用MySQL数据库，搭建了视频监控系统管理系统。实现了管理整个监控系统相关信息的作用，同时为视频监控系统管理人员提供方便和快捷的可视化操作平台。 系统通过前台页面，设立专门的登录页面，通过前台登陆人员权限的判定，决定是否允许登陆后台。11 MVC架构该系统使用经典的MVC架构。使用MVC模式应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。视图是用户看到并与之交互的界面。对老式的Web应用程序来说，视图就是由HTML元素组成的界面，在新式的Web应用程序中，HTML依旧在视图中扮演着重要的角色，但一些新的技术已层出不穷，它们包括Macromedia Flash和象XHTML，XML/XSL，WML等一些标识语言和Web services. 如何处理应用程序的界面变得越来越有挑战性。MVC一个大的好处是它能为你的应用程序处理很多不同的视图。在视图中其实没有真正的处理发生，不管这些数据是联机存储的还是一个雇员列表，作为视图来讲，它只是作为一种输出数据并允许用户操纵的方式。模型模型表示企业数据和业务规则。在MVC的三个部件中，模型拥有最多的处理任务。例如它可能用象EJBs和ColdFusion Components这样的构件对象来处理数据库。被模型返回的数据是中立的，就是说模型与数据格式无关，这样一个模型能为多个视图提供数据。由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。 控制器控制器接受用户的输入并调用模型和视图去完成用户的需求。所以当单击Web页面中的超链接和发送HTML表单时，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后用确定用哪个视图来显示模型处理返回的数据。在工程里，servlet扮演控制器的角色，负责请求处理和产生jsp要使用的bean和对象，以及根据客户的动作决定下一步转发到哪一个jsp页面。jsp页面内部并没有处理逻辑；它只是简单地负责取得可能是servelet事先创建的对象和bean，并为在了静态模版中插入从servlet释放出动态内容。12 网页设计构思 DIV+CSS网页重构的思想DIV+CSS是系统标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML系统设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。CSS即层叠样式表，它的关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，将页面内容与样式分离。DIV+CSS优势所在1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的系统不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的系统都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户系统，网易，新浪等国内门户系统，和主流的WEB2.0系统，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 5、CSS的极大优势表现在简洁的代码，对于一个大型系统来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 DIV+CSS的行内套用在HTML文件内直接宣告样式。 举例来说，Thisisfontsize16. 以上的HTML文件在浏览器上会显现为：Thisisfontsize16.嵌入套用样式可以嵌入于HTML文件中(通常是在内)。举例来说， divdivbackground-color:#FF0000;背景颜色是红色 以上的HTML会显现出：背景颜色是红色，外部连接套用在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。 该档案通常名称为.css。 在HTML文件的.之中，我们将用以下的程式码将这个.css档案连接进入： 以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。 DIV+CSS布局系统的优点一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的系统来说是最大的优势了。 三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道系统做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用： 一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于系统设计高手也很容易出现问题。 二、CSS系统制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个系统将变得复杂。 三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML系统有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的系统在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，系统结构、内容、相关系统链接等因素始终是系统优化最重要的指标。 13 功能组件的选用1.3.1 jquery脚本库的使用jQuery是继prototype之后又一个优秀的Javascrpt框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为系统提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。引入JQuery在head标签内加入这个 这是引用代码 $(function()1.3.2 jfreechart的状态图设计JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写，是为applications, applets, servlets 以及JSP等使用所设计。JFreeChart可生成饼图（pie charts）、柱状图（bar charts）、散点图（scatter plots）、时序图（time series）、甘特图（Gantt charts）等等多种图表，并且可以产生PNG和JPEG格式的输出，还可以与PDF和EXCEL关联。 JFreeChart目前是最好的java图形解决方案，基本能够解决目前的图形方面的需求。 JFreeChart的源码主要由以下两个包组成： 1. org.jfree.chart，主要与图形本身有关 2. org.jfree.data，主要与图形显示的数据有关1.3.3 Jxl.jar报表的设计通过java操作excel表格的工具类库 支持Excel 95-2000的所有版本 生成Excel 2000标准格式 支持字体、数字、日期操作 能够修饰单元格属性 支持图像和图表 应该说以上功能已经能够大致满足我们的需要。最关键的是这套API是纯Java的，并不依赖Windows系统，即使运行在Linux下，它同样能够正确的处理Excel文件。另外需要说明的是，这套API对图形和图表的支持很有限，而且仅仅识别PNG格式。 搭建环境将下载后的文件解包，得到JXL.JAR，放入classpath，安装就完成了。如果包不能正常的加载，可以把你下载好的JXL.JAR包放入D：JAVAjrelibext中。在配置TOMCAT时也需要把相关的三个包放到这里面。 基本操作拟生成一个名为“测试数据.xls”的Excel文件，其中第一个工作表被命名为“第一页”，大致效果如下： 代码（CreateXLS.java）： /生成Excel的类 import java.io.*; import jxl.*; import jxl.write.*; public class CreateXLS public static void main(String args) try /打开文件 WritableWorkbook book= Workbook.createWorkbook(new File(“测试.xls”); /生成名为“第一页”的工作表，参数0表示这是第一页 WritableSheet sheet=book.createSheet(“第一页”,0); /在Label对象的构造子中指名单元格位置是第一列第一行(0,0) /以及单元格内容为test Label label=new Label(0,0,”test”); /将定义好的单元格添加到工作表中 sheet.addCell(label); /*生成一个保存数字的单元格 必须使用Number的完整包路径，否则有语法歧义 单元格位置是第二列，第一行，值为789.123*/ jxl.write.Number number = new jxl.write.Number(1,0,789.123); sheet.addCell(number); /写入数据并关闭文件 book.write(); book.close(); catch(Exception e) System.out.println(e); 编译执行后，会在当前位置产生一个Excel文件。 二、读取文件以刚才我们创建的Excel文件为例，做一个简单的读取操作，程序代码如下： /读取Excel的类 import java.io.*; import jxl.*; public class ReadXLS public static void main(String args) try Workbook book= Workbook.getWorkbook(new File(“测试.xls”); /获得第一个工作表对象 Sheet sheet=book.getSheet(0); /得到第一列第一行的单元格 Cell cell1=sheet.getCell(0,0); String result=cell1.getContents(); System.out.println(result); book.close(); catch(Exception e) System.out.println(e); 程序执行结果：test 三、修改文件利用jExcelAPI可以修改已有的Excel文件，修改Excel文件的时候，除了打开文件的方式不同之外，其他操作和创建Excel是一样的。下面的例子是在我们已经生成的Excel文件中添加一个工作表： /修改Excel的类，添加一个工作表 import java.io.*; import jxl.*; import jxl.write.*; public class UpdateXLS public static void main(String args) try /Excel获得文件 Workbook wb=Workbook.getWorkbook(new File(“测试.xls”); /打开一个文件的副本，并且指定数据写回到原文件 WritableWorkbook book= Workbook.createWorkbook(new File(“测试.xls”),wb); /添加一个工作表 WritableSheet sheet=book.createSheet(“第二页”,1); sheet.addCell(new Label(0,0,”第二页的测试数据”); book.write(); book.close(); catch(Exception e) System.out.println(e); 四、数据格式化在Excel中不涉及复杂的数据类型，能够比较好的处理字串、数字和日期已经能够满足一般的应用。 1、字串格式化 字符串的格式化涉及到的是字体、粗细、字号等元素，这些功能主要由WritableFont和WritableCellFormat类来负责。假设我们在生成一个含有字串的单元格时，使用如下语句，为方便叙述，我们为每一行命令加了编号： WritableFont font1= new WritableFont(WritableFont.TIMES,16,WritableFont.BOLD); 或/设置字体格式为excel支持的格式 WritableFont font3=new WritableFont(WritableFont.createFont(楷体 _GB2312),12,WritableFont.NO_BOLD ); WritableCellFormat format1=new WritableCellFormat(font1); Label label=new Label(0,0,”data 4 test”,format1); 其中指定了字串格式：字体为TIMES，字号16，加粗显示。 WritableFont有非常丰富的构造子，供不同情况下使用，jExcelAPI的 java-doc中有详细列表，这里不再列出。 处代码使用了WritableCellFormat类，这个类非常重要，通过它可以指定单元格的各种属性，后面的单元格格式化中会有更多描述。 处使用了Label类的构造子，指定了字串被赋予那种格式。在WritableCellFormat类中，还有一个很重要的方法是指定数据的对齐方式，比如针对我们上面的实例，可以指定： /把水平对齐方式指定为居中 format1.setAlignment(jxl.format.Alignment.CENTRE); /把垂直对齐方式指定为居中 format1.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE); /设置自动换行 format1.setWrap(true); 二、单元格操作Excel中很重要的一部分是对单元格的操作，比如行高、列宽、单元格合并等，所幸jExcelAPI提供了这些支持。这些操作相对比较简单，下面只介绍一下相关的API。 1、 合并单元格 WritableSheet.mergeCells(int m,int n,int p,int q); 作用是从(m,n)到(p,q)的单元格全部合并，比如： WritableSheet sheet=book.createSheet(“第一页”,0); /合并第一列第一行到第六列第一行的所有单元格 sheet.mergeCells(0,0,5,0); 合并既可以是横向的，也可以是纵向的。合并后的单元格不能再次进行合并，否则会触发异常。 2、 行高和列宽 WritableSheet.setRowView(int i,int height); 作用是指定第i+1行的高度，比如： /将第一行的高度设为200 sheet.setRowView(0,200); WritableSheet.setColumnView(int i,int width); 作用是指定第i+1列的宽度，比如： /将第一列的宽度设为30 sheet.setColumnView(0,30);14 数据库设计数据库名称：ipcamera用户名：root密码：123分别有以下几个表：用户登录表 user本表对应用户登录系统。字段含义字段名类型宽度是否主键是否非空1、唯一编号idint20YY2、用户名nameVarchar50Y3、密码passwordVarchar50Y4、权限authorityint10Y5、手机号码phoneNumVarchar206、职位postVarchar507、备注remarkVarchar200发送信息内容 msgcon向用户发送信息的内容 字段含义字段名类型宽度是否主键是否非空1、唯一编号idInt10YY2、发送内容msgconVarchar200Y接收信息用户表 message字段含义字段名类型宽度是否主键是否非空1、唯一编号idInt10YY2、姓名nameVarchar50Y3、手机号码phoneNumVarchar30Y 卡片信息表 card字段含义字段名类型宽度是否主键是否非空1、卡号cardIdInt20YY2、密码passwordVarchar50Y3、卡片类型 0为访客卡1为用户卡cardTypeboolean1Y3、是否受限0为非受限1为受限forbiddenboolean1Y5. 员工信息表 employee字段含义字段名类型宽度是否主键是否非空1、员工号employeeIdVarchar(50)YY2、卡号cardIdint10Y3、员工部门departmentVarchar(50)Y4、员工职位postVarchar(50)Y5、员工姓名employeeNameVarchar(20)Y6、员工头像imageVarchar(50)Y7、备注remarkVarchar(200)6.门禁记录表 entrance字段含义字段名类型宽度是否主键是否非空1、唯一编号idint10YY2、刷卡状态typeVarchar(50)50Y3、卡号cardIdint10Y4、年eYearintY5、月eMonthintY6、日eDayintY7系统设置表syscon字段含义字段名类型宽度是否主键是否非空1、唯一编号idint1YY2、自动录像autoRecordBooleanY1、短信告警messageSendBooleanY2 模块功能使用说明2.1 功能模块概述本系统由面向用户的前台显示和针对管理员的后台管理两大部分。其中前台用户端显示界面共包括四个功能模块，分别为：系统首页、视频监控、短信管理、门禁查看、系统信息。对应前台显示后台管理共有用户管理、报警管理等5大模块。图1-1 功能模块示意图2.2 典型模块功能使用说明系统分为三种权限：待审核用户，普通用户，管理员。没有账号的用户可以登录注册页面登记注册信息，注册成功后成为待审核用户，等待管理员审核。普通用户能够登录前台，实现前台的所有功能。管理员有最高权限，可以对待审核用户进行审核，同时能够实现前台和后台的所有功能。系统用户用例图如下：图1-2系统用户用例图2.2.1前台典型栏目功能使用说明本系统的前台包含三个功能模块，分别是视屏监控、短信管理、门禁查看、系统介绍。下面我们会针对各个模块展开详细介绍。1、 系统登录用户在登录系统系统之前，首先进入的是系统的登陆界面。在此页面用户可以输入自己的用户名和密码进入系统，如果你还没有成为系统的用户，则点击注册进行用户注册，注册完成之后等待管理员审核之后，才可以进入系统。登录页面如图所示：图1-3系统用户登录界面注册界面如图所示： 图1-4系统用户注册界面在用户注册的过程中出现如下红字，则证明数据库已经存在此用户名，用户需要重新输入用户名 如图所示图1-5 注册界面（续2）注册完成之后的用户不能立即进入系统，应该等待管理员审核，否则会在登录界面出现如下提示，如图所示：图1-6登录界面(2)2、视频监控模块介绍进入系统之后，首先进入的视频监控模块,用户可以在该模块进行视频监控。该模块有三个功能，分别是单台摄像、多台摄像、录像回放。其中在单台摄像里面用户可以选择查看的监控区域，也可以遥控摄像头进行水平和垂直的移动，也可以进行变焦和亮度的调节等各种操作。初次之外用户可以对非法进入的人员进行短信报警和拍摄录像等。单台摄像页面如下所示：图1-7：系统首页单击多台摄像可以，用户可以同时监控几个区域。多台摄像的界面如下所示：图1-8 多台摄像机监控页面用户录像界面如图所示：图1-9用户录像页面2、短信管理模块介绍短信管理模块主要是对各种报警信息的综述。用户可以在短信提示里面详细了解到短线的具体意义，当前值班室当前值班用户的个人小资料和系统的管理状态，用户可以在这里查看系统现在的状态和进展情况。在短信专区里面可以详细了解各种短信报警信息的详细内容，还可以将短信专区里面的短信内容将其导出到你指定的位置。方便用户储蓄资料。如果用户想将其打印，可以点击打印。在打印页面可以进行打印内容的浏览和进行打印的操作。大大方便用户进行资料的打印和管理，以及资料的保存。短信管理界面如下所示： 图1-10 短信管理界面2、门禁管理模块介绍在门禁查看管理模块有四个小模块，分别是对门禁的按年查询、按月查询、按日查询和卡号查询。当鼠标放在短信管理导航条时会出现下拉菜单，用户可在在这里选择想进入的模块。同短信模块一样也可以对门禁信息进行导出和的打印。如图所示：图1-11 门禁管理界面（续1）选择查询的方式数据表格，如图所示：图1-12 门禁管理界面（续2）选择查询的方式状态图，如图所示：图1-13 门禁状态查询5、系