day49_BOS项目_01
- 项目12天安排：
- 1-2天：项目概述、搭建开发环境、主页设计、持久层和表现层设计
- 3-6天：项目业务开发（取派员、区域、分区、定区、业务受理） --> 整个项目分为基础设置、取派、中转、路由、报表
- 7-8天：权限控制、权限管理 --> apache shiro
- 9-11天：工作流开发 --> activiti
- 12天：总结
- 今天内容安排：
- 1、项目概述（背景介绍、常见软件类型、软件开发流程（瀑布模型））
- 2、搭建开发（数据库、web项目、SVN管理项目）
- 3、主页设计（jQuery的插件easyUI）
- 4、UML工具使用PowerDesigner
1、项目概述
1.1、项目背景介绍
- BOS --> Bussiness Operating System 业务操作系统
- 甲方：宅急送物流公司，软件的使用方
- 乙方：用友软件，软件的开发方
- 本项目属于宅急送公司二期改造项目。
- ERP--> Enterprise Resource Planning 企业资源计划，如下图所示：
- 项目的团队人数20多个人，项目开发周期1年多（13个月），编码阶段4个月。
1.2、常见的软件类型
- OA：Office Automation办公自动化系统
- CRM：Customer Relationship Management客户关系管理系统
- ERP：Enterprise Resource Planning企业资源计划平台（物资流、人力流、财务流、信息流）
- CMS：Content Mangement System内容管理系统
1.3、软件开发流程
- 本案例使用：瀑布模型，该模型适用于规模小、周期短的项目。
- 0、可行性分析
- 1、需求调研分析 --> 需求规格说明书
- 2、设计阶段（概要设计、详细设计） --> 数据库设计、原型设计
- 3、编码阶段（单元测试）
- 4、测试阶段（系统测试、性能测试、白盒测试(需要检查代码，懂技术)、黑盒测试(不懂技术)）
- 5、上线和运维
- 敏捷开发 --> 思想：分阶段，分模块
1.4、开发环境
- 如下图所示：
1.5、技术选型
- 如下图所示：
- Webservice和Hession都属于远程调用技术。二者区别如下：
- Webservice，传输的数据格式是xml格式，数据冗余比较多，网络传输比较大的话，会成为性能的瓶颈。
- Hession，传输的数据格式是二进制格式，传输效率更高。
2、搭建开发环境
2.1、数据库环境
- 第一步：创建一个数据库 mysql -uroot -proot
- 第二步：创建一个数据库用户 create database bos19;
- 第三步：为创建的用户授权 grant all on bos19.* to heize;
- 第四步：使用新创建的数据库用户登录MySQL系统，并查看数据库 mysql -uheize -p1234 show databases;
2.2、web项目环境
- 第一步：使用ecplise，创建一个动态web项目，将Dynamic web module version 设置为2.5，创建完成后修改jdk版本为jdk1.7。
- 方法：选中项目右键 --> Bulid Path --> Configure Bulid Path… --> Libraries --> JRE System Library [J2SE-1.5] --> Remove，然后再 Add Library… --> JRE System Library --> Next --> Workspace default JRE (jdk1.7.0_80)
- 由于 EAR Libraries 是一个空的库，没有什么用，所以我们把它也Remove掉。
- 第二步：导入jar包
- Struts 11个jar + 1个整合Springj的jar = 12个
- Spring 10个jar + 5个依赖jar = 15 个
- Hibernate 1个Hibernate3的jar + 6个必须jar + 1个jpa的jar + 1个slf4j-log4j12-1.7.2.jar = 9个
- 1个数据库驱动jar
- 共计37个jar
- 干掉重复的低版本的jar
- 第三步：配置web.xml（配置struts2的过滤器、配置spring的监听器、配置解决Hibernate延迟加载问题的过滤器、配置解决中文乱码的过滤器）
示例代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>bos19</display-name>
<!-- 配置解决中文乱码的过滤器，注意：该方式不能解决get方式提交中文乱码，除此之外，其余的都可以 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<!--
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
-->
<!-- encoding用来设置编码格式，forceEncoding用来设置是否理会 request.getCharacterEncoding()方法，设置为true则强制覆盖之前的编码格式 -->
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 配置解决Hibernate延迟加载问题的过滤器 -->
<filter>
<filter-name>openSession</filter-name>
<filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>openSession</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 指定spring配置文件的位置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 配置spring监听器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 配置struts2的过滤器 -->
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>- 第四步：创建项目目录结构 如下图所示：
- 第五步：在config目录下提供struts2的配置文件struts.xml和日志配置文件log4j.properties
示例代码如下：
<?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"/>
<!-- 使Spring对象工厂成为自动默认值，struts2与spring整合，该句不是必须的，在整合jar中已经配置过了 ，这里只是为了强调-->
<constant name="struts.objectFactory" value="spring"/>
<package name="basicstruts2" extends="struts-default">
<!-- 需要进行权限控制的页面访问，使用默认的类和默认的方法，默认的类和默认的方法可以不用写，这里写出来为了强调 -->
<action name="page_*_*" class="com.opensymphony.xwork2.ActionSupport" method="execute">
<result name="success" type="dispatcher">/WEB-INF/pages/{1}/{2}.jsp</result>
</action>
</package>
</struts>- 第六步：在config目录下提供spring的配置文件applicationContext.xml
示例代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<!-- 添加命名空间 ，让spring扫描含有注解类 -->
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!-- 加载 JdbcInfo.properties配置文件 -->
<context:property-placeholder location="classpath:JdbcInfo.properties" />
<!-- 配置数据源，基本四项 -->
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driverClass}"></property>
<property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>
<property name="user" value="${jdbc.user}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>
<!-- spring框架用于整合hibernate的工厂bean -->
<bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<!-- 注入数据源 -->
<property name="dataSource" ref="dataSource"></property>
<!-- 注入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"></property>
</bean>
<!-- 使用注解：组件扫描 -->
<context:component-scan base-package="com.itheima.bos"/>
<!-- 引入注解解析器：就可以使用它们了：@Controller @Service @Repository @Resource @Autowrired -->
<context:annotation-config/>
<!-- 事务注解:transaction-manager属性可以省略 -->
<tx:annotation-driven/>
</beans>- 第七步：提供项目所需的资源文件，如下图所示：
- `注意1`：如果所需的资源文件图标上有红色的叉，说明需要引入外部jar包servlet-api.jar和jsp-api.jar。
- `注意2`：由于本系统的很多页面使用了`标签`，属于服务器内部转发，会跳转到WEB-INF目录下对应的页面，而该目录下的页面是受保护的，所以web.xml中需要配置服务器内部转发也要经过struts2过滤器处理后才能跳转，否则的话服务器会报404错误，配置如下图所示：
2.3、使用svn管理项目代码
- 第一步：创建一个SVN仓库，在bos目录下右键 --> TortoiseSVN --> Create repository here
- 第二步：修改SVN的配置文件，如下图所示： svnserve.conf
passwd
authz
- 第三步：启动SVN服务
- 法一：我们将启动SVN服务的操作注册成操作系统的“服务”，我们的电脑开机时SVN服务器就启动了。
- 法二：使用批处理文件。（本案例我们采用法二）
- `注意`：我们启动的是多仓库。
- 批处理文件创建好后，我们双击运行该文件即可启动svn服务。
- 第四步：eclipse上安装svn插件
- 第五步：将搭建的web项目共享到SVN仓库
- 首先新建资源库位置，如下图所示：
其余步骤参考如下链接： https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 --> Team --> Share Project…
点击SVN --> Next --> 创建新的资源库位置 --> Next --> svn://localhost:3690/bos/code --> Next
再次确认下，没问题，点击Next --> 第一次使用默认注释即可 --> Finish --> Yes --> 切换到提交视图，即已经纳入到svn的版本控制了，但是还没有真正上传。 在提交视图下，右键项目 --> 提交(C)
稍等一会儿，代码提交至svn仓库界面如下：
然后，我们切换至SVN资源库视图进行查看，如下图所示：
3、主页设计 --> jQuery EasyUI 插件
- jQuery EasyUI的目录结构，如下图所示：
- 在jsp页面中引入jQuery 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 布局
详解如下：
通过 $.fn.layout.defaults 重写默认的 defaults。
这个布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区center）的容器。
中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。
布局（layout）可以嵌套，因此用户可建立复杂的布局。示例代码如下：
<body class="easyui-layout">
<!-- 使用div指定区域 -->
<div title="XX管理系统" data-options="region:'north'" style="height:100px">北部区域</div>
<div title="系统菜单" data-options="region:'west'" style="width:200px">西部区域</div>
<div data-options="region:'center'">中心区域</div>
<div data-options="region:'east'" style="width:200px">东部区域</div>
<div data-options="region:'south'" style="height:50px">南部区域</div>
</body>效果如下图所示：
3.2、accordion 折叠面板
详解如下：
通过 $.fn.accordion.defaults 重写默认的 defaults。
折叠面板（accordion）允许您提供多个面板（panel），同时显示一个或多个面板（panel）。
每个面板（panel）都有展开和折叠的内建支持。点击面板（panel）头部可展开或折叠面板（panel）主体。
面板（panel）内容可通过 ajax 指定 'href' 属性来加载。用户可定义被选中的面板（panel）。如果为指定，则默认选中第一个面板（panel）。示例代码如下：
<body class="easyui-layout">
<!-- 使用div指定区域 -->
<div title="XX管理系统" data-options="region:'north'" style="height:100px">北部区域</div>
<div title="系统菜单" data-options="region:'west'" style="width:200px">
<!-- 折叠面板效果 -->
<!-- data-options="fit:true"表示自适应或者叫填充父容器 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每个子div是其中的一个面板 -->
<div title="面板一">棉衣一</div>
<div title="面板二">test2</div>
<div title="面板三">test3</div>
</div>
</div>
<div data-options="region:'center'">中心区域</div>
<div data-options="region:'east'" style="width:200px">东部区域</div>
<div data-options="region:'south'" style="height:50px">南部区域</div>
</body>效果如下图所示：
3.3、tabs 标签页/选项卡面板
详解如下：
通过 $.fn.tabs.defaults 重写默认的 defaults。
选项卡显示一组面板。它一次只显示一个选项卡面板。
每个选项卡面板都有标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。示例代码如下：
<body class="easyui-layout">
<!-- 使用div指定区域 -->
<div title="XX管理系统" data-options="region:'north'" style="height:100px">北部区域</div>
<div title="系统菜单" data-options="region:'west'" style="width:200px">
<!-- 折叠面板效果 -->
<!-- data-options="fit:true"表示自适应或者叫填充父容器 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每个子div是其中的一个面板 -->
<div title="面板一">棉衣一</div>
<div title="面板二">test2</div>
<div title="面板三">test3</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 选项卡面板效果 -->
<div id="tt" 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>
</div>
<div data-options="region:'east'" style="width:200px">东部区域</div>
<div data-options="region:'south'" style="height:50px">南部区域</div>
</body>效果如下图所示：
3.4、动态添加选项卡面板
示例代码如下：
<body class="easyui-layout">
<!-- 使用div指定区域 -->
<div title="XX管理系统" data-options="region:'north'" style="height:100px">北部区域</div>
<div title="系统菜单" data-options="region:'west'" style="width:200px">
<!-- 折叠面板效果 -->
<!-- data-options="fit:true"表示自适应或者叫填充父容器 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每个子div是其中的一个面板 -->
<div title="面板一">
<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>
</div>
<div title="面板二">test2</div>
<div title="面板三">test3</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 选项卡面板效果 -->
<div id="tt" 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>
</div>
<div data-options="region:'east'" style="width:200px">东部区域</div>
<div data-options="region:'south'" style="height:50px">南部区域</div>
</body>效果如下图所示：
4、ztree 树形插件 --> jQuery 插件
- 主要用于制作系统菜单。
- ztree的目录结构：
- 在jsp页面中引入ztree相关的资源文件
示例代码如下：
<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
示例代码如下：
<div title="面板二">
<!-- 展示树形菜单 ：使用标准json数据构造-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function() {
// 当页面加载完成后，动态创建ztree菜单
// 设置ztree相关的属性，该属性中不用写数据，因为我们使用标准json数据构造
var setting = {};
// 构造json数据
var zNodes = [
// 每个json对象对应一个节点数据
{name : '系统管理'},
// 每个json对象对应一个节点数据
{name : '用户管理', children : [{name : '用户添加'}, {name : '用户修改'}]},
// 每个json对象对应一个节点数据
{name : '权限管理'}
];
// 创建ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
</div>效果如下图所示：
4.2、使用简单json数据构造ztree（建议使用）
由于使用标准json数据构造ztree，代码的层级结构太深，不利于阅读，所以使用简单json数据构造ztree。 示例代码如下：
<div title="面板三">
<!-- 展示树形菜单 ：使用简单json数据构造-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function() {
// 当页面加载完成后，动态创建ztree菜单
// 设置ztree相关的属性
var setting2 = {
data : {
simpleData : {
// 启用简单json数据描述节点数据
enable : true
}
}
};
// 构造json数据
var zNodes2 = [
// 每个json对象对应一个节点数据
{id : '1', pId : '0', name : '系统管理'},
// 每个json对象对应一个节点数据
{id : '2', pId : '0', name : '用户管理'},
{id : '21', pId : '2', name : '用户添加'},
{id : '22', pId : '2', name : '用户修改'},
// 每个json对象对应一个节点数据
{id : '3', pId : '0', name : '权限管理'}
];
// 创建ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script>
</div>效果如下图所示：
4.3、发送ajax请求获取菜单数据构造ztree
示例代码如下：
<div title="面板四">
<!-- 展示树形菜单 ：发送ajax请求获取菜单数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function() {
// 设置ztree相关的属性
var setting3 = {
data : {
simpleData : {
// 启用简单json数据描述节点数据
enable : true
}
}
};
// 发送ajax请求获取json数据构造ztree
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url, {}, function(data) {
// 创建ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
}, 'json');
});
</script>
</div>效果如下图所示：
4.4、为ztree节点绑定事件
示例代码如下：
<div title="面板五">
<!-- 展示树形菜单 ：发送ajax请求获取菜单数据构造ztree，并为ztree节点绑定事件-->
<ul id="ztree4" class="ztree"></ul>
<script type="text/javascript">
$(function() {
// 设置ztree相关的属性
var setting4 = {
data : {
simpleData : {
// 启用简单json数据描述节点数据
enable : true
}
},
// 绑定事件
callback: {
onClick: function(event, treeId, treeNode) {
// alert(treeNode);
// alert(treeNode.page);
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'
});
}
}
}
}
};
// 发送ajax请求获取json数据构造ztree
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url, {}, function(data) {
// 创建ztree
$.fn.zTree.init($("#ztree4"), setting4, data);
}, 'json');
});
</script>
</div>效果如下图所示：
5、UML工具 --> PowerDesiger 的使用
- PowerDesigner16.5安装教程（含下载+汉化+破解）链接地址： https://www.fujieace.com/software/powerdesigner.html
示例图片：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读