BOS项目 第1天
项目12天安排：
1-2天：项目概述、搭建开发环境、主页设计、持久层和表现层设计
3-6天：项目业务开发（取派员、区域、分区、定区、业务受理）---整个项目分为基础设置、取派、中转、路由、报表
7-8天：权限控制、权限管理----apache shiro
9-11天：工作流开发----activiti
12天：总结
今天内容安排：
1、项目概述（背景、常见软件类型、软件开发流程（瀑布模型））
2、搭建开发（数据库、web项目、SVN管理项目）
3、主页设计（jQuery easyUI）
4、ＵＭＬ工具使用PowerDesigner
1. 项目概述
1.1 项目背景介绍
BOS----Bussiness Operating System业务操作系统
甲方：宅急送物流公司，软件的使用方
乙方：用友软件，软件的开发方
本项目属于宅急送公司二期改造项目
项目的团队人数20多个人，项目开发周期1年多（13个月），编码阶段4个月。
1.2 常见的软件类型
OA:办公自动化系统
CRM:客户关系管理系统
ERP:企业资源计划平台
CMS:content Mangement System
1.3 软件开发流程（瀑布模型）
0、可行性分析
1、需求调研分析----需求规格说明书
2、设计阶段（概要设计、详细设计）----数据库设计、原型设计
3、编码阶段（单元测试）
4、测试阶段（系统测试、白盒测试、黑盒测试）
5、上线和运维
敏捷开发
1.4 开发环境
1.5 技术选型
2. 搭建开发环境
2.1 数据库环境
第一步：创建一个数据库
第二步：创建一个数据库用户
第三步：为创建的用户授权
第四步：使用新创建的数据库用户登录MySQL系统
2.2 web项目环境
第一步：创建一个动态web项目
第二步：导入jar包（SSH、spring依赖、日志、数据库驱动）
第三步：配置web.xml（struts2的过滤器、spring监听器、解决Hibernate延迟加载问题的过滤器、解决中文乱码的过滤器）
第四步：创建项目目录结构
第五步：在config目录中提供struts2的配置文件
|
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.devMode" value="true" /> <constant name="struts.objectFactory" value="spring"/> <package name="basicstruts2" extends="struts-default"> <!-- 需要进行权限控制的页面访问 --> <action name="page_*_*"> <result name="success" type="dispatcher">/WEB-INF/pages/{1}/{2}.jsp</result> </action> </package> </struts> |
第六步：在config目录下提供spring的配置文件applicationContext.xml
|
<!-- 加载jdbc属性文件 --> <context:property-placeholder location="classpath:jdbc.properties"/>
<!-- 数据源 --> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"> <property name="driverClass" value="${driverClass}"/> <property name="jdbcUrl" value="${jdbcUrl}"/> <property name="user" value="${user}"/> <property name="password" value="${password}"/> </bean> <!-- spring框架用于整合Hibernate的工厂bean --> <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <!-- 注入Hibernate相关的属性 --> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.format_sql">true</prop> <prop key="hibernate.hbm2ddl.auto">update</prop> </props> </property> <!-- 注入Hibernate的映射文件 --> <property name="mappingDirectoryLocations"> <list> <value>classpath:com/itheima/bos/domain</value> </list> </property> </bean>
<!-- 事务管理器 --> <bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager"> <property name="sessionFactory" ref="sessionFactory"/> </bean>
<!-- 组件扫描 --> <context:component-scan base-package="com.itheima.bos"/> <!-- 引入注解解析器 --> <context:annotation-config/> <!-- 事务注解 --> <tx:annotation-driven /> |
第七步：提供项目所需的资源文件
注意，web.xml中配置服务器内部转发经过struts2过滤器处理
2.3 使用svn管理项目代码
第一步：创建一个SVN仓库
第二步：修改SVN的配置文件
svnserve.conf:
passwd:
authz:
第三步：启动SVN服务,使用批处理文件
第四步：将搭建的web项目共享到SVN仓库
3. 主页设计---jQuery EasyUI插件
jQuery EasyUI目录结构：
l 在jsp页面中引入easyUI相关的资源文件
|
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script> |
3.1 layout页面布局
这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的,但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的。
|
<body class="easyui-layout"> <!-- 使用div指定区域 --> <div title="XX管理系统" data-options="region:'north'" style="height: 100px">北部区域</div> <div title="系统菜单" data-options="region:'west'" style=" 200px">西部区域</div> <div data-options="region:'center'">中心区域</div> <div data-options="region:'east'" style=" 100px">东部区域</div> <div data-options="region:'south'" style="height: 50px">南部区域</div> </body> |
3.2 accordion折叠面板
|
<!-- 折叠面板效果 --> <div class="easyui-accordion" data-options="fit:true"> <!-- 每个子div是其中的一个面板 --> <div title="面板一">棉衣一</div> <div title="面板二">test2</div> <div title="面板三">test3</div> </div> |
3.3 tabs选项卡面板
|
<!-- 选项卡面板效果 --> <div class="easyui-tabs" data-options="fit:true"> <!-- 每个子div是其中的一个面板 --> <div data-options="closable:true,iconCls:'icon-help'" title="面板一">棉衣一</div> <div title="面板二">test2</div> <div title="面板三">test3</div> </div> |
3.4 动态添加选项卡
|
<a class="easyui-linkbutton" onclick="doAdd();">百度</a> <script type="text/javascript"> function doAdd(){ //动态添加一个选项卡面板 $("#tt").tabs("add",{ title:'这个可是动态的', content:'<iframe frameborder="0" width="100%" height="100%" src="page_base_staff.action"></iframe>', closable:true, iconCls:'icon-search' }); } </script> |
4. ztree树形插件---jQuery插件
目录结构:
l 在jsp页面中引入ztree相关的资源文件
|
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script> |
4.1 使用标准json数据构造ztree
|
<!-- 展示树形菜单 ：使用标准json数据构造--> <ul id="ztree1" class="ztree"></ul> <script type="text/javascript"> $(function(){ //当页面加载完成后，动态创建ztree菜单 var setting = {};//设置ztree相关的属性 //构造json数据 var zNodes = [ {name:'系统管理'},//每个json对象对应一个节点数据 {name:'用户管理',children:[ {name:'用户添加'}, {name:'用户修改'} ]},//每个json对象对应一个节点数据 {name:'权限管理'}//每个json对象对应一个节点数据 ]; //创建ztree $.fn.zTree.init($("#ztree1"),setting,zNodes); }); </script> |
4.2 使用简单json数据构造ztree（建议）
|
<!-- 展示树形菜单 ：使用简单json数据构造--> <ul id="ztree2" class="ztree"></ul> <script type="text/javascript"> $(function(){ //当页面加载完成后，动态创建ztree菜单 var setting2 = { data: { simpleData: { enable: true//启用简单json数据描述节点数据 } } };//设置ztree相关的属性 //构造json数据 var zNodes2 = [ {id:'1',pId:'0',name:'系统管理'},//每个json对象对应一个节点数据 {id:'2',pId:'0',name:'用户管理'},//每个json对象对应一个节点数据 {id:'21',pId:'2',name:'用户添加'},//每个json对象对应一个节点数据 {id:'22',pId:'2',name:'用户修改'},//每个json对象对应一个节点数据 {id:'3',pId:'0',name:'权限管理'}//每个json对象对应一个节点数据 ]; //创建ztree $.fn.zTree.init($("#ztree2"),setting2,zNodes2); }); </script> |
效果：
4.3 发送ajax请求获取菜单数据构造ztree
|
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //启用简单json数据描述节点数据 } } };//设置ztree相关的属性 //发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //创建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script> |
效果：
4.4 为ztree节点绑定事件
|
<ul id="ztree3" class="ztree"></ul> <script type="text/javascript"> $(function(){ var setting3 = { data : { simpleData : { enable : true //启用简单json数据描述节点数据 } }, callback: {//绑定事件 onClick: function(a,b,treeNode){ var page = treeNode.page; if(page != undefined){//需要打开选项卡 //判断当前选项卡是否已经打开 var e = $("#tt").tabs("exists",treeNode.name); if(e){ //已经打开 $("#tt").tabs("select",treeNode.name); }else{ $("#tt") .tabs( "add", { title : treeNode.name, content : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>', closable : true, iconCls : 'icon-edit' }); } } } } };//设置ztree相关的属性 //发送ajax请求获取json数据构造ztree var url = "${pageContext.request.contextPath}/json/menu.json"; $.post(url,{},function(data){ //创建ztree $.fn.zTree.init($("#ztree3"), setting3, data); },'json'); }); </script> |