day49_BOS專案_01
摘要：
專案12天安排：
1-2天：專案概述、搭建開發環境、主頁設計、持久層和表現層設計
3-6天：專案業務開發（取派員、區域、分割槽、定區、業務受理）--> 整個專案分為基礎設定、取派、中轉、路由、報表
7-8天：許可權控制、許可...
- 專案12天安排：
- 今天內容安排：
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;
- 第四步：使用新建立的資料庫使用者登入SQL/">MySQL系統，並檢視資料庫
mysql -uheize -p1234
show databases;
2.2、web專案環境
- 第一步：使用ecplise，建立一個動態web專案，將Dynamic web module version 設定為2.5，建立完成後修改jdk版本為jdk1.8。
- 第二步：匯入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外掛
- 安裝教程連結： ofollow,noindex">https://www.cnblogs.com/chenmingjun/p/9459401.html#_label0_10
- 第五步：將搭建的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
示例圖片：
