1、1 修訂記錄日期版本修訂目的描述修訂章節作者審核2015/07/291.0文檔初建 黃秀偉2015/08/041.1文檔內容完善黃秀偉目錄1修訂記錄12說明42.1概述42.2子系統命名42.3資源準備42.4項目發布53模塊化開發53.1開發協作方式53.2工程目錄規范53.2.1src_cnpc目錄：63.2.2resources目錄63.2.3WEB-INF目錄63.2.4Psyche目錄63.3配置文件統一管理74開發步驟74.1導入項目74.2配置菜單74.3新建模塊85功能開發85.1RBAC模型85.2權限配置85.2.1菜單配置menu.xml95.2.2操作配置operati

2、on.xml105.2.3權限注解RequiresPermissions115.2.4角色授權115.3Rest 支持125.3.1概念125.3.2REST開發125.4操作日志記錄145.4.1實現原理145.4.2使用方法155.5表單驗證155.6圖表echarts155.6.1簡介155.6.2使用方法165.7報表模塊175.7.1簡介175.7.2使用方法185.8系統變量185.9用戶首選項186打包部署187進階配置182 說明2.1 概述本文檔是web平臺開發手冊，根據CSOC項目需要，結合泰合對項目級系統開發平臺的要求而編寫的，面向項目開發人員，包括開發規范及開發流程等。

3、web平臺將提供給用戶Web開發手冊、web工程及項目使用的軟件包。2.2 子系統命名我們需要各子系統確定英文簡稱，因為項目開發中的權限控制注解、菜單id、數據庫名、項目發布名都要用到子系統簡稱。參見下表：子系統名稱子系統簡稱門戶子系統portal工作流系統workflow數據子系統data解析子系統analysis批處理子系統Batch processing？2.3 資源準備l 項目開發在Windows7 64位系統上，部署在Linux系統上。為了避免一些兼容性問題，請使用我們的提供的軟件包進行開發，包括Tomcat、Eclipse、JDK、Mariadb 、HeidiSQL等。l 本框架使

4、用的組件及版本如下表：組件名稱版本號Spring4.1.4Hibernate4.1.8Shiro1.2.0jQuery1.7Bootstrap3.3.4J2EE6Log4j1.2.17junit4.8.2jstl1.2echarts 項目發布由于各組之間的項目發布名稱不能重復，故規定發布的項目名稱為子系統英文簡稱，各組拿到項目后首先要將發布名稱修改為自己的子系統簡稱。參見2.2子系統統命名章節。修改方法如下：項目導入eclipse后，右鍵項目名稱>選擇properties > web project settings à將context root 內容改為

5、子系統簡稱。3 模塊化開發3.1 開發協作方式采用協作開發方式，web平臺與其他系統做協作開發，我們會將web平臺本身的功能打成jar包形式，其他組不允許修改平臺的源碼，只能在現有平臺上按照規范開發自己系統的功能。3.2 工程目錄規范工程要嚴格按照web框架要求進行開發。3.2.1 src_cnpc目錄：用來存放開發模塊的Java類及部分配置文件。在src_cnpc目錄的pc的包下新建模塊。格式：pc.模塊名在模塊下面建包，包名稱要嚴格按照以下規范命名：l controller包：存放自己的controller訪問控制層，因為要通過掃描所有的controller方法名來記錄日志，所以命名必須為

6、controller，。l entity包：存放實體類l service包：存放自己的service接口，在service.impl存放實現類l dao包：存放dao的接口，在dao.impl下存放自己的實現類3.2.2 resources目錄Ø WebContent/resources目錄存放腳本、樣式、圖片等靜態資源。Ø 分別在js，css，img下建子文件夾（要求文件夾名稱與模塊名相同）存放各個模塊的js，css，img文件。3.2.3 WEB-INF目錄Ø WebContent /WEB-INF目錄中存放jsp頁面。Ø 在jsp文件加下建子文件夾

7、（要求文件夾名稱與模塊名相同）存放各個模塊的jsp文件。3.2.4 psyche目錄Ø 在文件夾或包名是psyche的目錄，存放的是平臺所用的組件，其中psyche/common目錄下存放的是通用組件。Ø 由于框架升級原因不允許對psyche下的目錄做任何操作，（升級時會覆蓋這個目錄下的文件，如果有需要請聯系架構組人員）。3.3 配置文件統一管理Web框架對配置文件進行統一管理，必須按照以下配置文件名稱命名。Ø 基礎配置文件：必須功能Ø menu.xml：菜單配置文件，存放在WEB-INF下的config目錄下，為了初始化時提供一個demo界面，如果沒有

8、配置menu.xml系統則會自動加載demo1中的菜單。Ø perties后臺表單數據校驗的配置文件，存放在src_cnpc下，后臺校驗必須要有。Ø 高級進階配置文件：非必須功能。參見進階配置章節。4 開發步驟4.1 導入項目l 我們會給出一個工程，拿到工程后首先導入eclipse，在數據庫中創建數據庫，庫名稱為子系統簡稱。 l 在根目錄下的ddl文件夾中建腳本文件，名稱為”子系統簡稱.sql” （非必須, 如果沒有腳本可以省略）。l 手動初始化，執行ddl下的腳本導入數據庫（打包不打進去），啟動無報錯后進行下一步。4.2 配置菜單導

9、入項目后第一件事就是確定配置系統的菜單，菜單是通過menu.xml文件配置的。該文件存放在：WEB-INF/config/子系統名下面，會顯示在首頁菜單列表位置，并且支持多級菜單。菜單的配置與權限有緊密關系，一定要慎重。給角色設置權限時會讀取該文件，按照菜單授予對等操作權限。參見下面章節介紹的“權限配置“中的“菜單配置menu.xml”內容。4.3 新建模塊參考工程目錄規范，建模塊、添加靜態資源及jsp頁面5 功能開發5.1 RBAC模型Web平臺權限控制采用shiro+RBAC模型實現的。RBAC模型如下:模型分析：Ø 用戶與角色是多對多的關系，一個用戶可以擁有多個角色，一個角色可

10、以賦給多個用戶；Ø 權限只賦予給角色，每個角色可以擁有多個權限，用戶屬于某個角色即擁有該角色所有的權限。5.2 權限配置權限通過注解和xml配置，xml分為菜單配置menu.xml和操作配置operation.xml。5.2.1 菜單配置menu.xmlmenu.xml文件是對菜單的配置，存放在：WEB-INF/config/子系統名下面，顯示在首頁菜單列表位置，支持多級菜單。Xml文件格式如下：<?xml version="1.0" encoding="UTF-8"?><root><menu name="

11、;權限管理" id = "workflow_pms"><img>/resources/img/demo1/pms.png</img><menu-item name="用戶管理" id = "wf_pms_user"><img>/resources/img/demo1/user.png</img><url>pms/user/list.do</url></menu-item><menu-item name="角色

12、管理" id = "wf_pms_role"><img>/resources/img/demo1/role.png</img><url>pms/role/list.do</url></menu-item></menu><menu name="日志管理" id = "wf_log"><img>/resources/img/demo1/log.png</img><url>log/list.do</u

13、rl></menu></root>文件節點說明l <menu></menu>：一級菜單l <menu-item></menu-item>：子菜單屬性說明：l name：模塊名稱（中文），必輸項。l id：模塊id（英文），唯一標識不能重復，必輸項。(1) 一級模塊id命名規范格式：子系統簡稱_模塊名實例：wf_process含義：工作流系統中的流程管理模塊id(2) 二級模塊id命名規范（只支持2級）格式：一級模塊id_模塊名實例：wf_process_def含義：工作流系統中流程管理模塊的子模塊流程定義模塊注：代碼

14、中權限控制方法上的注解模塊名要與id保持一致（參見下面的權限注解）。l img：菜單顯示的圖標，非必輸。l url：訪問地址，非必輸。注意事項：1、配置中的id屬性值是與權限控制注解中的模塊名一致（詳情參見權限注解章節）。2、菜單配置后，如果已經有角色的授權操作，那么id不可以再改變，如果id改變會影響已經入庫的角色權限對應關系，后果很嚴重。5.2.2 權限注解RequiresPermissions將權限注解加在controller層的所有類的方法上的，如果不加，系統默認所有用戶都有權限，請慎重考慮。格式: RequiresPermissions("模塊名#操作類型")實例

15、: RequiresPermissions("portl_user#read")說明：l 模塊名與操作類型必須用#分開：#前面是模塊名稱，不可重復，與menu.xml中的id一致；#后面的為操作類型，與operation.xml配置的操作類型保持一致。目前支持read、write、execute三種操作類型。5.2.3 操作配置operation.xmloperation.xml是操作類型配置文件，平臺默認支持讀、寫、執行三個操作類型，該文件是平臺內容，不允許各組修改，如需擴展請說明理由，我們再對系統進行升級。Xml配置如下：<operation> <it

16、em> read/讀</item><item> write/寫</item><item> execute/執行</ item></operation>說明：英文是權限注解中的操作類型，中文名是下面介紹的角色授權的列名，即操作類型。5.2.4 角色授權角色授權界面中，把所有menu.xml中的菜單節點的name值取出來作為行標題；把operation.xml中的item中文值即操作類型名作為列標題，用戶提交后，將角色和權限信息保存至RolePermissionRel表中，存儲權限編號為“模塊名#操作類型名”。界面如下圖

17、所示：讀寫執行權限管理用戶模塊角色模塊。提交例如上例中點保存后的RolePermissionRel存儲為如下信息：角色編號權限編號001portl_user#read001portl_user#execute001portl_role#write5.3 Rest 支持5.3.1 概念REST即表述性狀態轉移，是一組架構約束條件和原則，是一種針對網絡應用的設計和開發方式，可以降低開發的復雜性，提高系統的可伸縮性。滿足REST約束條件和原則的應用程序或設計就是RESTful。簡單說是對系統資源訪問的一種規范。5.3.2 REST開發開發過程中rest主要應用在子系統之間的通訊，統一規定使用REST

18、ful的URL請求訪問，即參數化的URL（將變量輸入作為URL的一部分），URL中只含有名詞，而不含有動詞，示例：http:/localhost:8080/psyche/user/123含義：表示請求id為123的用戶信息l 以對user資源的增刪改查操作為示例，講解如何做到符合rest規范開發。Ø user的獲取，以GET方式請求：ControllerRequestMapping(“/user”)Public class UserControllerPrivate UserService userService;/使用GET獲取資源RequestMapping(value=”/id

19、”,method=RequestMethod.GET)public String getUser(PathVariable(“id”) long id,Model model)Model.addUser(userService.getUserById(id);Return “user/view”;說明：UserController上的RequestMapping值與getUser方法上的RequestMapping的value值拼接是請求URL值。getUser方法上使用RequestMapping注解的value屬性接收id參數值，method屬性指定請求的方法類型使用PathVariabl

20、e注解傳遞方法參數，RequestMethod除了GET方法還有POST ，PUT，DELETE方法。Ø 使用PUT更新資源，如下:RequestMapping(value=”/id”,method=RequestMethod.PUT)ResponseStatus(HttpStatus.NO_CONTENT) /返回請求處理成功狀態碼，不包含任何返回信息public String putUser(PathVariable(“id”) long id,Model model,Valid User user)userService.saveuser(user);說明：方法上加Respon

21、seStatus(HttpStatus.NO_CONTENT)注解，用于返回請求處理成功狀態碼，但是不包含任何返回信息。Valid：實體設置+類+類的引用，直接將頁面傳過來的production對象中的信息封裝到里面去了Ø 使用DELETE刪除資源RequestMapping(value=”/id”,method=RequestMethod. DELETE)ResponseStatus(HttpStatus.NO_CONTENT) /返回請求處理成功狀態碼，不包含任務返回信息public String deleteUser(PathVariable(“id”) long id)use

22、rService.deleteuser(id);Ø 使用POST創建資源，新增user并返回JSON實體串RequestMapping(method=RequestMethod.POST)/處理POST請求ResponseStatus(HttpStatus.CREATE) /返回請求處理成功狀態碼，返回信息包含新創建資源的URLpublic RsponseBody User createUser(Valid User user, HttpServletResponse response) userService.saveUser(user);return user;/返回User資源

23、說明：使用RsponseBody注解，返回格式規定為JSON格式，即將user實體以JSON串形式返回。5.4 操作日志記錄5.4.1 實現原理操作日志將記錄用戶的所有操作，通過Spring Aop把controller文件夾下所有類的方法作為切點進行攔截，截取出LogWrite (description = "操作描述")里的description內容，記錄操作日志。記錄的字段包括：用戶ip、操作描述、操作的結果、訪問的方法名、訪問時間、操作異常類型、異常的詳情等信息。5.4.2 使用方法在每一個controller層類的方法上加注解LogWrite (descripti

24、on = "操作描述")。如果操作類型為空則默認記錄訪問方法的url。5.5 表單驗證表單校驗分為前臺校驗和后臺校驗，要求嚴格按照下方規范開發。Ø 錯誤提示顏色：紅色字體。Ø 提示信息位置：輸入類型錯誤信息位置在輸入框右上方；邏輯操作失敗則彈出操作錯誤提示彈出框。Ø 前臺校驗使用jquery.validate控件來保證表單提交數據的合理性，可以通過對字段配置required，email，number等來決定字段的必填，是否是郵件類型，是否是數字等約束。詳情參見前臺表單校驗文檔Ø 后臺采用Hibernate-validator來進行驗證

25、，后臺校驗通過在實體類屬性上配置注解NotNull，Email，Digits(integer=整數位數, fraction=小數位數)來定義約束。詳情參見后臺表單校驗文檔5.6 圖表echarts5.6.1 簡介圖表采用ECharts控件，它是基于Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。可提供商業產品常用圖表庫，底層基于ZRender，創建了坐標系，圖例，提示，工具箱等基礎組件，并在此上構建出折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、餅圖（環形圖）、K線圖、餅圖（環形圖）、雷達圖、地圖、和弦圖以及力導向布局圖，同時支持任意維

26、度的堆積和多圖表混合展現。示例圖如下：5.6.2 使用方法由于考慮到兼容問題，不推薦使用IE瀏覽器。以下只是Echarts初步調研，還需進一步研究，細節有待完善.Ø 引入echarts.js文件<body><div id="main" style="height:400px;"></div> .<script src="./js/echarts.js"></script></body>Ø 配置require.conifg<body>

27、<div id="main" style="height:400px;"></div>.<scriptsrc="./js/echarts.js"></script><script type="text/javascript">require.config(paths: echarts: './js/dist' );</script></body>Ø 動態加載使用echarts<body><div id="main" style="height:400px;"></div><scriptsrc="./js/echa