java-WEB模塊物流項目一

1、BOS物流管理系統(tǒng) 第一天 搭建環(huán)境 內(nèi)容安排：1、 運行項目，分析功能 結(jié)構(gòu)Struts2 通配符映射，將所有頁面放在WEB-INF下 2、 項目改造為maven結(jié)構(gòu) 項目使用 STS 3、 jQuery EasyUI 框架 常用各個布局插件 、Ztree菜單技術(shù) 學習目標：maven 、svn 、eclipse 工具、 掌握前端開發(fā)框架EasyUI 1. BOS項目概述 1.1. 項目背景什么是BOS？ (Business Operation System) ，各個軟件最核心業(yè)務系統(tǒng) 用友軟件公司 為宅急送公司 開發(fā)ERP系統(tǒng) - 核心系統(tǒng) BOS一期工程 C/S結(jié)構(gòu) ，二期工程B/S 結(jié)

2、構(gòu) 傳統(tǒng)項目分類 ： OA 自動化辦公系統(tǒng) 、CRM 客戶關(guān)系管理系統(tǒng)、 ERP 綜合管理平臺 1.2. 項目開發(fā)任務 項目完整開發(fā)流程： 需求分析 （需求分析文檔） - 系統(tǒng)設計 （頁面原型設計 jquery easyui 、 數(shù)據(jù)庫設計 PowerDesigner ） - 編碼 - 測試 - 集成部署和運維 BOS系統(tǒng)非常龐大，十幾天學習哪些功能 涉及三大核心業(yè)務模塊 ： 基礎設置模塊、 取派模塊、中轉(zhuǎn)模塊 基礎設置模塊： 管理物流信息基礎元素信息 （快遞員、配送區(qū)域、配送時間、排班 ）取派模塊： 客戶要進行快遞，系統(tǒng)進行業(yè)務受理、系統(tǒng)分單到快遞員、快遞員取件、打包、計費中轉(zhuǎn)模塊： 管理貨

3、物在配送路程中間數(shù)據(jù) 路由模塊： 管理車輛和線路財務模塊： 計費PDA模塊： 管理快遞員無線電通信報表模塊： 生成統(tǒng)計數(shù)據(jù) 用戶權(quán)限管理： 通用權(quán)限管理系統(tǒng) Apache Shiro 1.3. 項目開發(fā)平臺和技術(shù) 新建一個Maven工程 mavenbos1.4. 導入原型頁面配置說明 pom.xml 導入 參照下發(fā)pom.xml 文檔!目錄結(jié)構(gòu)說明css 樣式表文件 images 系統(tǒng)需要圖片js 存放 js 腳本 Jquery easyui(頁面設計) ztree(樹形菜單)json 臨時數(shù)據(jù) 菜單頁面設計 擴展名稱.json系統(tǒng)所有頁面原型頁面存放WEB-INF 下 瀏覽器不可以直接訪問!

4、 通過action 訪問對應頁面 采用通配符 打開struts.xml lib 刪除導入項目需要配置文件 導入: src/java/resource action 請求資源路徑 page_*_* 沒有class 默認執(zhí)行 ActionSupport (默認的結(jié)果集SUCCESS) 轉(zhuǎn)發(fā)!使用該配置 后續(xù)的自定義攔截器可以對action 有效 從而實現(xiàn)對靜態(tài)頁面實現(xiàn)權(quán)限控制 .web.xml 配置 1: spring容器配置文件加載 2: 前端控制器配置1.5. pom.xml 配置參照資源包下發(fā)ppm.xml說明: 后續(xù)的dao 實現(xiàn) 我們采用 spring-data 實現(xiàn) crud 操作!測

5、試 訪問主頁!1.6. 前端框架之easyui學習(掌握)引入jquery easyui 完成 頁面原型布局設置! 打開下發(fā)的easyui 資源包 解壓demo 案例演示代碼(學習指導)locale 國際化腳本 (中文)plugings easyui頁面需要依賴腳本插件src 源碼themes 主題樣式(css 文件)easyloader.js 插件加載器 easyui所有插件由該腳本驅(qū)動加載jquery.easyui.min.js 相同于 easyloader.js+所有插件(推薦導入該腳本即可)jquery-1.8.0.js 必須導入bos系統(tǒng)頁面導入的easyui 腳本說明工程導入四個即

6、可jquery +eazyui.min.js +themes+國際化文件!easyui 學習之頁面原型設計一 layout 學習!layou1.jsp頁面導入 2個css+3個js 完成參照文檔 布局 打開文檔手冊 學習 easyui 布局樣式!layout 組件 north south east west center data-options="key:value"1.7. accordion插件，實現(xiàn)折疊菜單 以及和layout 整合參照文檔(easyui)案例為主學習 西部設置效果1.8. ztree 菜單制作(菜單制作說明)ztree解壓目錄 優(yōu)異的功能 靈活配置

7、api 文檔 查詢使用css 樣式文件demo 例子 js ztree依賴腳本bos系統(tǒng)引入 Ztree樹形菜單說明導入ztree 腳本 1 js :2:css 樣式3: 案例演示樹形菜單學習: layout2.jsp 引入ztree腳本打開文檔案例 制作屬性菜單 提供兩種方式 standardData 學習!樹形菜單! 需要ul 標簽! 提供class 樣式 ="ztree" 提供idbody 提供 ul標簽即可參照腳本: 導入相關(guān)ztree 相關(guān)腳本simpleData.html 學習 簡單樹的學習效果:腳本相關(guān)腳本說明<!- jquery -><sc

8、ript type="text/javascript" src="$pageContext.request.contextPath /js/jquery-1.8.3.js"></script><!- jquery easyui -><script type="text/javascript" src="$pageContext.request.contextPath /js/easyui/jquery.easyui.min.js"></script><!-

9、 easyui 國際化 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

10、/easyui/themes/default/easyui.css" /><!- 圖標css -><link rel="stylesheet" type="text/css" href="$pageContext.request.contextPath /js/easyui/themes/icon.css" />1.9. layout插件，完成bos主頁布局 引入樹形菜單和Layout 布局的編寫!1.10. jquery + ztree 插件制作bos系統(tǒng)菜單 西部整合 according 需

11、要提供ul 標簽 可以將菜單制作內(nèi)容 引入到外部文件 xxx.json引入項目 json 文件 通過ajax請求 獲取系統(tǒng)菜單的生成 1: 頁面加載立刻發(fā)送ajax 請求 json 文件2: 獲取 文件信息 文件內(nèi)容就是 zNodes數(shù)據(jù)如果數(shù)據(jù)來自外部文件 按照標準寫法 key:value 需要添加引號3: 效果: 菜單數(shù)據(jù)來自外部文件!1.11. tabs插件，實現(xiàn)選項卡菜單 1.12. ztree和tabs選項卡合并(點擊菜單生成選項卡)導入相關(guān)腳本 ztree_according.jsp 頁面 折疊選項卡第一個 引入ul標簽完成屬性菜單1: 查詢ztree文檔 添加點擊事件 根據(jù)文檔

12、查詢 setting 添加點擊事件2: 查詢easyui -tabs 里面add方法添加一個選項卡!目標選項卡添加id 被jquery 選擇 center區(qū)域 添加 tabs選項卡樣式點擊事件中添加選項卡 add 填充父容器js 點擊事件 判斷選項卡是否存在 如果不存在新建一個tabs最終判斷點擊菜單是否含有Page 屬性iframe 內(nèi)嵌頁面布局1.13. datagrid數(shù)據(jù)表格插件 (重點)Datagrid數(shù)據(jù)表格，是jquery easyui 功能最強大，最重要的一個插件 ，簡化開發(fā) 數(shù)據(jù)表格： 數(shù)據(jù)列表顯示、分頁、排序、編輯 需要table 提供 thead tbody tfoot1

13、.14. 案例一：datagrid加載HTML靜態(tài)數(shù)據(jù) 1: 編寫一個表格 提供thead tbody 標簽 還需要給 th 添加field屬性 pagination: true 顯示分頁欄 rownumbers :true 顯示行號checkbox:true 出現(xiàn)列中 顯示復選框添加工具欄 toolBars 需要提供一個div a 標簽就是按鈕!需要編寫js 完成工具欄的加載1.15. 案例二：datagrid 加載json遠程數(shù)據(jù) 當前文件jsp 同級目錄 提供一個data.json 文件 json ,對象數(shù)據(jù)key 一定要和 每一個表頭 field: 屬性值要一致id:xxx,name:xxx,sex:xxx,age:xxx 格式測試!1.16. 案例三：使用Javascript編寫datagrid 頁面提供帶有id class table 標簽即可參照文檔 提供table 標簽即可純js 完成!效果!作業(yè): 1: 項目bos導入 (maven 安裝ok pom.xml 導入 知道為什么所有業(yè)務頁面存放在WEB