bos項目第一天（maven、遠程部署、svn、easyui的使用。）
BOS 項目第一天 環境搭建
1. 項目分析
1.1. 產品和項目區別？
產品 先投資 ，做出產品， 再去銷售 (QQ、 360 )
項目 投標 ，分為甲方 （項目應用方）和乙方 （項目開發方）， 甲方先給乙方 項目前期款， 交付項目後，收取尾款 。
1.2. BOS項目規模
項目周期 ： 1年多
純編碼時間 ： 3個多月 ， 項目組開發人員 ：20多人
1.3. 系統分類
OA 自動化辦公
CRM 客戶關系管理
ERP 是針對物資資源管理（物流）、人力資源管理（人流）、財務資源管理（財流）、信息資源管理（信息流）集成一體化的企業管理軟件
BOS 是
1.4. 軟件開發流程
需求調研 （分析） ---- 系統設計 --- 編碼 --- 測試 --- 實施和運維
1.5. BOS 業務分析
開發任務 ： 三個業務模塊
基礎設置模塊（基礎數據模塊 ） ---- 物流基礎數據 （取派人員信息、 區域信息 、 區域分配信息 、 線路信息 …. ） 對應 需求 2.6 章節
取派模塊 對應需求 2.7 業務受理 2.8 調度 ----- 接收客戶業務訴求 ，將業務數據錄入到系統
中轉模塊 （物流中數據管理） ---- 2.9 以後
兩個系統功能模塊 ： 用戶
時間安排 ： JBPM 4天 、搭建環境2天 、權限管理 1天
1.6. 項目開發環境
開發環境 ： window + tomcat6/7 + myeclipse + mysql
產品環境 ： linux (企業服務器版) + Oracle + WebLogic/JBOSS
2. 項目導入
將 bos 項目代碼導入 myeclipse 開發工具
建議新建web項目， 將代碼對應部分復制到項目中 ！
（MyEclipse、Eclipse、 Maven ）
通常三個 source folder
src 存放源碼
resources、config 存放配置文件
test 存放測試用例
struts2 約定要求，將JSP頁面 放入WEB-INF 下 ！！！！
struts2 攔截器，攔截 Action的訪問 ！！！
問題： Filter 和 Interceptor 有何區別？
Filter 可以攔截所有web 資源
Interceptor 只能攔截Action
問題： 將很多JSP都放入WEB-INF 不能直接訪問，通過Action訪問，需要為每一個JSP配置一個Action嗎？
<!-- 需要進行權限控制的頁面訪問 -->
<action name="page_*_*">
<result type="dispatcher">
/WEB-INF/pages/{1}/{2}.jsp
</result>
</action>
訪問 page_a_b.action 映射到 /WEB-INF/pages/a/b.jsp
/page_common_index.action 主頁 /WEB-INF/pages/common/index.jsp
<jsp:forward page="/page_common_index.action"></jsp:forward>
問題： 主頁Action 也需要走struts的Filter ，Filter 默認只在請求方式下攔截
如果沒有配置 dispatcher : forward 不會在轉發情況下執行Filter
3. 使用maven進行項目構建
MyEclipse 自帶maven 插件
Eclipse 需要單獨安裝maven插件
3.1. Maven 在企業中怎麽用的 ？
Maven ： 項目構建工具 ，進行項目編譯、測試、打包、運行、發布 ….
2 使用 maven將工程進行組件化 ，項目分為 表現層、業務層、 數據層 屬於maven創建 三個項目 ，分別進行三層開發
2 Maven 和 Jenkins （hudson） 對項目進行持續集成
2 企業中搭建私服
3.2. 建立maven骨架的項目，運行bos
1、 下載和解壓 maven 的zip包
2、 在myeclipse 配置外部 maven
3、 配置倉庫setting文件 和 倉庫位置
默認位置 C:\Documents and Settings\seawind\.m2 （這個文件夾沒有 settings,xml ）
將解壓maven目錄/ conf/ settings.xml 復制 C:\Documents and Settings\seawind\.m2
在 settings.xml 指定本地倉庫位置
Maven 原理， 使用坐標導入jar包，先在本地倉庫找，如果沒有，會去網絡上倉庫下載 ！
4、 將 repository.rar 解壓，覆蓋本機原來 的倉庫
5、 在myeclipse 建立maven工程
2 可以自己選擇骨架
quickstart 骨架， javase的maven項目
webapp 骨架， javaee的maven項目
2 使用simple project 骨架
輸入maven參數
坐標 ： GroupId 、ArtifactId 、Version
Packing 打包方式 ： jar（給別人引入的）、pom（給別人繼承的）、war （用來運行的）
maven 項目結構分析
src/main/java 存放項目源碼
src/main/resources 存放項目配置文件
src/test/java 存放測試用例代碼
src/test/resources 存放測試配置文件
src/main/webapp 文件夾用來存放頁面代碼
6、 移植項目
將源碼 src/main/java
將配置文件 src/main/resources
將頁面 src/main/webapp (WEB-INF 不要移動lib，只需要pages和web.xml )
7、 編寫pom.xml
使用坐標導入 jar包
只需要獲取 需要項目坐標，就可以引入
http://search.maven.org/
http://mvnrepository.com/
8、運行項目
右鍵項目 – run as --- maven build ---- tomcat:run
使用 maven tomcat plugin 1.1 進行運行
3.3. tomcat-maven-plugin 插件
早期插件 groupId : org.codehaus.mojo ， artifactId : tomcat-maven-plugin 版本1.1
現在這個插件，被分為兩個插件，坐標也改了
3.3.1. 修改內部運行 tomcat的端口
<!-- 對插件進行配置 -->
<configuration>
<port>80</port>
</configuration>
3.3.2. 自動發布到遠程tomcat
使用 tomcat內部manager 程序，進行項目熱部署 （需要遠程tomcat 必須開啟的 ）
使用 manager 組件
配置 tomcat/conf/tomcat-users.xml
<role rolename="admin-gui"/>
<user username="tomcat" password="s3cret" roles="admin-gui"/>
遠程發布
第一步： 在 tomcat/conf/tomcat-user.xml 建立賬號
遠程訪問 tomcat6 ： tomcat-users.xml
<role rolename="manager"/>
<user username="tomcat" password="123456" roles="manager"/>
遠程訪問 tomcat7 : tomcat-users.xml
<role rolename="manager-gui"/>
<role rolename="manager-script"/>
<user username="tomcat" password="123456" roles="manager-gui, manager-script"/>
第二步 ： 配置pom.xml 允許遠程發布
<!-- tomcat6.x -->
<url>http://localhost:8080/manager</url>
<!-- tomcat7.x -->
<url>http://localhost:8080/manager/text</url>
<server>myserver</server>
第三步 ： 配置maven的 setting.xml 服務器myserver 連接屬性
<server>
<id>myserver</id>
<username>tomcat</username>
<password>123456</password>
</server>
保證外部tomcat 正確運行後，執行 tomcat:deploy / tomcat:redeploy
4. SVN的安裝與使用
為什麽要使用版本控制 ？
對代碼進行備份，根據需要恢復
多人同時修改代碼時，防止並發修改代碼覆蓋問題
4.1. 使用 Visual SVN 搭建SVN服務器
搭建純粹SVN服務器 --- svn:// 訪問資源
將SVN 和 Apache服務器整合 ，搭建web SVN服務器 ---- https:// 訪問資源
指定硬盤倉庫位置 d:\Respositories
安裝如果系統賬戶是中文用戶名，報錯
1） 新建 SVN倉庫 bos
2） 新建 SVN 賬戶 yuy/123
訪問 ： https://localhost:8443/svn/bos/
安裝 SVN 客戶端軟件
4.2. SVN客戶端使用
4.2.1. TortoiseSVN 安裝使用
產生右鍵菜單
Repo-browser 查看倉庫中內容
Import 可以將資源上傳 服務器 （沒有建立與SVN倉庫同步 ）
Check out 將SVN倉庫文件檢出 （與SVN倉庫同步 ） --- 開發人員檢出同步修改
Update 將本地文件更新到最新版本
Commit 將本地修改提交到服務器
Export 導出文件，與SVN倉庫不同步 （商品上線，代碼拷貝）
4.2.2. MyEclipse SVN 插件使用
site-1.8.8.zip ---- 綠色安裝
步驟一： 解壓壓縮包，建立插件目錄結構
插件目錄
----- eclipse
------ features
------ plugins
步驟二： 將插件目錄，復制myeclipse/dropins 目錄 ，重啟MyEclipse
步驟三： 在MyEclipse 建立倉庫連接
步驟四： 將MyEclipse 工程代碼上傳 SVN倉庫
步驟五： 將工程文件，上傳SVN服務器
不要將 maven項目target 目錄上傳 ！！！
5. 系統主頁設計
使用 前端UI 框架，制作頁面效果 （Java工程師 不用學習 頁面東西，將頁面制作的很美觀 ）
ExtJS 前端JS框架
Flex 基於Flash 制作頁面前端 （mxml 和 ActionScript 腳本）
今天 項目引入 Jquery Easy UI 框架 （效果類似 Ext JS ）
快速上手，學習成本低
5.1. easyui的目錄分析
課程 以 jquery Easy UI 1.3.2 版本學習
（從1.2.3 版本 開始收費 ）
demo 實例
locale 國際化信息
plugins 框架一些插件
src 源碼
themes 樣式文件
easyloader.js 框架核心加載器 （加載其它plugin）
jquery-1.8.0.min.js jQuery類庫
jquery.easyui.min.js 框架類庫 （等價於 easyloader.js + plugins 所有插件 ）
5.2. 在項目中引入 EasyUI
必須引入
<!-- 先引入 jquery的 js -->
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.8.3.js">
</script>
<!-- 引入 easyui的js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入國際化 js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 默認樣式 css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"/>
<!-- 引入 icon圖標 css -->
<link rel="stylesheet"
type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"/>
5.3. easyui 的layout 控件使用
布局控件 對一個div使用，也可以對 整個頁面 body元素使用
5.4. easyui 的accordion 折疊面板使用
設置fit屬性，讓面板占滿父容器
<!-- 折疊面板 -->
<!-- fit屬性，使當前div大小占滿父容器 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 通過iconCls 設置圖標，找 icon.css中 類定義 -->
<div data-options="title:‘基本功能‘,iconCls:‘icon-mini-add‘">面板一</div> <!-- 這裏每個div就是一個面板 -->
<div data-options="title:‘高級功能‘">面板二</div>
<div data-options="title:‘管理員功能‘">面板三</div>
</div>
5.5. easyui 的 tabs 選項卡面板 使用
<div data-options="region:‘center‘">
<!-- 選項卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<div data-options="title:‘選項卡一‘">內容一</div> <!-- 這裏每個div 就是一個選項卡 -->
<!-- closeable 可關閉 -->
<div data-options="title:‘選項卡二‘,closable:true">內容二</div>
<div data-options="title:‘選項卡三‘">內容三</div>
</div>
</div>
5.6. 樹形菜單的制作
使用 ztree插件，制作樹形菜單
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
下載 ztree 3.5.02 版本
api 文檔
css 樣式
demo 案例
js 核心類庫文件
all.js = core + check + edit + hide 開發中只需要引入 all.js
在頁面引入 ztree
<!-- 引入ztree -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>
案例一： 標準數據tree
1、 在顯示樹位置寫 <ul> 標簽
<!-- 顯示樹 -->
<ul id="basicTree" class="ztree"></ul>
2、 通過js 編寫setting對象
// 設置樹參數
var setting = {};
3、 設置樹節點數據
// 數據
var zNodes = [
{"name":"菜單一"}, // 每個{} 就是一個節點
{"name":"菜單二"}
];
4、初始化樹
// 初始化樹
$.fn.zTree.init($("#basicTree"), setting, zNodes);
復雜樹
問題： 標準數據樹，不適用大數據的樹結構
案例二： 簡單數據ztree
1、 在顯示ztree位置定義 ul
<!-- 顯示樹(簡單數據 ) -->
<ul id="simpleTree" class="ztree"></ul>
2、 設置ztree參數 setting
// 設置樹參數
var setting = {
data : {
simpleData : {
enable : true
}
}
};
3、 樹節點數據
// 數據
var zNodes = [
// id 代表本節點編號，pId代表父節點編號
{"id":"1","pId":"0","name":"菜單一"},
{"id":"2","pId":"0","name":"菜單二"}
];
4、 初始化樹
// 初始化樹
$.fn.zTree.init($("#simpleTree"), setting, zNodes);
復雜樹
通過url 屬性，完成樹節點跳轉
通過icon屬性，定制節點圖標
bos項目第一天（maven、遠程部署、svn、easyui的使用。）