【文章內(nèi)容簡介】 白 清楚 ， 從而 也讓程序員更好的管理數(shù)據(jù)和代碼 。 Bootstrap 簡介 Bootstrap 是一個前端的 CSS 框架，它是基于 jQuery 框架開發(fā)的，并在jQuery 框架基礎上進行更加人性化以及個性化的完善，并逐漸形成自己的風格，而且是兼容 jQuery 的大部分插件。 在推特誕生初期，工程師們幾乎嘗試了他們所熟悉的框架去完成前端開發(fā)任務。應用之間的不一致性導致它們難以擴展與維護。 Bootstrap 最初就是為了解決這個問題而誕生的，而且在推特 的第一次 HackWeek迅速得到認可。在 HackWeek結束后，我們已有一個穩(wěn)定的版本，可以給公司內(nèi)部使用 。 [17] 自從 Bootstrap 推出后，它迅速走紅 ， 現(xiàn)在 是 GitHub 上的熱門開源項目，頗受歡迎。本系統(tǒng)也用到了此插件，如菜單頁面的面包屑導航以及模態(tài)框等。 9 第 3 章 系統(tǒng)分析與設計 可行性分析 技術可行性 本系統(tǒng)實現(xiàn)采用 Java 作為編程語言，前臺 界面 使用的是 JSP 技術 以及基于Html,Css 的框架 Bootstrap，其腳本使用 Javascript 的優(yōu)秀框架 Jquery 插件 ，后臺使用 時下 比較熱門的 J2EE 三大框架 Spring + Struts2 +Hibernate，整體設計使用了 MVC 的設計模式 （ M：即 model，指的是模型， V：即 view，指的是視圖， C：即 controller，指的是控制器） ， 這種設計模式很 好的解決了代碼層次編寫不規(guī)范，在 Web 系統(tǒng)的應用中性能差、復雜度高的問題。數(shù)據(jù)庫使用 MySQL，并且在 MyEclipse 上進行開發(fā)，運行在 Tomcat 服務器上。操作系統(tǒng)可以是Windows XP 與 Windows 7。在設備方面，在 普通 PC 機上， WEB 服務器、數(shù)據(jù)庫服務器、計算機的內(nèi)存容量、外存容量和輸入輸出設備等都可在現(xiàn)有的基礎上得到需要。 操作可行性 本系統(tǒng)以方便普通管理員使用為目的， 這意味著管理員并不需要擁有 專業(yè)的計算機知識， 就能方便進行操作 ，方便用戶在享受強大功能的同時不會因為煩雜的操作而苦惱。具有很好的實用性。 系統(tǒng)需求分析 通過對如今企業(yè) 信息資源 管理模式的分析，研究以及系統(tǒng)的易操作性，要求本系統(tǒng)做到 如下的 功能： 簡單，友好的 的 用戶操作界面，使得 使用者容易操作。 具有良好的信息設置與展現(xiàn)，方便信息的 查看與搜索。 可以知道 客戶，合同，商品的 信息，并根據(jù)信息來進行管理。 維護 平臺 的所有數(shù)據(jù)信息，并且可以 添加 相關的信息。 管理平臺能根據(jù)不同角色，分配不同的權限功能。 10 系統(tǒng)總體結構 本系統(tǒng)分為 五 大功能模塊，分別是： 客戶管理，員工管理， 商品管理、 合同管理和售后 管理?？偪蚣芨拍钊鐖D 31所示： 圖 31 企業(yè)信息管理 系統(tǒng)總框架概念圖 數(shù)據(jù)庫設計 關系圖 圖 32 企業(yè)信息管理系統(tǒng)的 ER圖 客戶管理模塊 商品管理模塊 合同管理模塊 員工管理模塊 售后信息管理模塊 11 數(shù)據(jù) 庫表 本系統(tǒng)的數(shù)據(jù) 庫表 如 下所示。其中，表 31 是客戶表，記錄本公司的客戶信息，表 32是合同表，記錄本公司的合同信息，表 33是售后表，記錄本公司的售后信息，表 34 是商品表，記錄本公司的商品信息，表 35 是員工表，記錄本公司的員工信息。 表 31 客戶 表 id 員工編號 client_name 員工姓名 client_phone 客戶手機號碼 client_address 客戶地址 client_ 客戶郵箱 表 32 合同表 id 合同編號 staff_id 客戶編號 contact_name 合同名稱 contact_content 合同內(nèi)容 contact_start_time 合同開始時間 contact_validity 合同有效時間 staff_id 員工編號 表 33 售后表 id 售后信息編號 cs_time 反饋時間 client_id 客戶編號 12 client_opinion 反饋意見 staff_id 員工編號 表 34 商品表 id 產(chǎn)品編號 pro_name 產(chǎn)品名稱 pro_model 產(chǎn)品型號 pro_num 產(chǎn)品數(shù)量 pro_price 產(chǎn)品價格 表 35 員工表 id 員工編號 staff_username 用戶名 staff_pwd 用戶密碼 staff_name 員工姓名 staff_gender 員工性別 staff_age 員工年齡 staff_education 員工學歷 staff_dept 員工部門 staff_join_date 員工入職時間 staff_position 員工職位 staff_wage 員工薪水 staff_ 員工郵箱 staff_phone 員工電話 staff_birth 員工生 日 staff_nation 員工民族 staff_address 員工住址 staff_role 用戶角色 13 本章小結 本章 內(nèi)容 主要 是 對系統(tǒng)功能進行詳細的規(guī)劃與設計，通過 MyEclipse 的開發(fā)環(huán)境與 數(shù)據(jù)庫的使用，來完成對 企業(yè)信息資源 管理 的展現(xiàn)。由于本系統(tǒng)是基于 Structs2,Spring,Hibernate 框架與 MVC 設計模式，因此針對SSH 框架、 MVC 與代碼的規(guī)范編寫也是研究的重點之一。 14 第 4 章 系統(tǒng)的實現(xiàn) 登入功 能 登入功能展現(xiàn) 要 登入時， 管理員 需要輸入正確的用戶名、密碼，才能夠登入系統(tǒng)。登入頁面運行效果如圖 41所示 。 圖 41 系統(tǒng)登入界面 登入后主界面效果如圖 42 所示。 其中，左邊是用就 jQuery 樹插件展示菜單欄目，主要分三級菜單，根菜單為信息管理，其下有三個二級菜單，分別為客戶管理，銷售管理和員工管理，這三個二級菜單又分別有自己的子菜單。 15 圖 42 登入后主界面 效果圖 登入功能實現(xiàn) 用戶 只有 通過輸入合法的信息和分配該用戶的權限， 才能 進入系統(tǒng)的菜單頁面。 當用戶輸入了錯誤的信息， 如 用戶名和密碼不輸入就點擊登錄 ，則 在帳號輸入?yún)^(qū)或密碼輸入?yún)^(qū)的下一行用紅色字提醒不能為空 ，而不是用傳統(tǒng)的 alert 彈出窗口 提示用戶 。 圖 43登入功能流程圖 客戶信息管理功能 此模塊的功能主要是實現(xiàn)對客戶信息的管理 （增加，編輯，查看，刪除） 。查看所有客戶信息 如圖 44 所示 。 查看所有客戶信息是這樣實現(xiàn)的：當用戶點擊左邊菜單欄的客戶信息管理后，則前臺向后臺發(fā)送請求客戶信息的數(shù)據(jù)，后臺處理相關業(yè)務后，返回所有的客戶信息，然后用 jstl 表達式將數(shù)據(jù)遍歷到 JSP 頁面中。 16 圖 44 查看所有客戶信息效果 圖 當 用戶 要 編輯客戶信息 時，利用 JS 的插件 jQuery 插件將客戶點擊的這一行信息取出來，然后轉(zhuǎn)向編輯客戶信息的頁面，此頁面不是單獨的頁面，而是利用了 Bootstrap 插件的模態(tài)框，它的效果是在原來的界面增加一個彈出層，剛才讀出來的信息在讀入這個模態(tài)框的相應位置，效果 如圖 45所示。 圖 45 編輯客戶信息 效果圖 當 用戶 點擊 添加客戶信息 ， 頁面轉(zhuǎn)向添加客戶信息的界面，這個界面也是用Bootstrap 的模塊框做的，效果 如圖 46所示 。 17 圖 46 添加客戶信息的效果圖 合同信息管理功能 此模塊 的功能主要是實現(xiàn)對合同信息的管理 （增加，編輯，查看，刪除） 。查看所有合同信息如圖 47 所示 。 查看所有合同信息是這樣實現(xiàn)的：當用戶點擊左邊菜單欄的合同信息管理后，則前臺向后臺發(fā)送請求合同信息的數(shù)據(jù)，后臺處理相關業(yè)務后，返回所有的合同信息，然后用 jstl 表達式將數(shù)據(jù)遍歷到 JSP 頁面中。 圖 47 查看合同信息的效果圖 當 編輯合同信息 時，前臺 用 jQuery 插件將用戶點擊的這一行信息取出來，然后轉(zhuǎn)向編輯客戶信息的頁面，由于這個頁面用到了 jQuery UI 的時間插件，它和 Bootstrap的模塊框不兼容，所以 此頁面的實現(xiàn)方式是一個用隱藏的 div容器，用戶點擊編輯后，原來的查看信息的界面隱藏了，這個編輯界面顯示出來，然后把相關信息讀入，效果 如圖 48所示。 18 圖 48 編輯合同信息的效果圖 當用戶點擊 添加合同信息 時，查看信息的頁面隱藏了，添加合同信息的界面出現(xiàn)了（同樣的，由于此頁面用到時間插件和 Bootstrap 的模態(tài)框不兼容，所以實現(xiàn)方式同編輯合同信息頁面一樣），效果 如圖 48 所示 。 圖 49 添加合同信息的效果圖 售后信息 管理功能 此模塊的功能主要是實現(xiàn)對售后信息的管理 （增加，編輯，查看，刪除 ） 。查看所有售后信息如圖 410 所示。 查看所有售后信息是這樣實現(xiàn)的：當用戶點擊左邊菜單欄的售后信息管理后，則前臺向后臺發(fā)送請求售后信息的數(shù)據(jù)，后臺處理相關業(yè)務后，返回所有的售后信息，然后用 jstl 表達式將數(shù)據(jù)遍歷到 JSP頁面中。 19 圖 410 查看所有售后信息的 效果圖 當用戶點擊 添加售后信息 時， 則添加售后信息的模態(tài)框出現(xiàn)，用戶可以在相應位置填入信息，點擊確認后即可以提交相關信息，由于此頁面所用到的時間是后臺生成的，沒用到時間插件，所以這里可以用模態(tài)框，效果 如圖 411 所示 。 圖 411 添加售后信息的 效果圖 當用戶點擊 編輯售后信息 時，一用 jQuery 將用戶點擊的那一行的售后信息讀入到編輯售后信息的模塊框的相應位置，用戶可以修改相應信息，然后點擊確認按鈕提交信息，效果 如圖 412 所示 。 圖 412 編輯售后信息的效果圖 商品信息 管理功能 此模塊的功能主要是實現(xiàn)對商品信息的管理 （增加，編輯，查看，刪除） 。 20 查看所有商品信息如圖 413 所示。 查看所有商品信息是這樣實現(xiàn)的：當用戶點擊左邊菜單欄的商品信息管理后，則前臺向后臺發(fā)送請求商品信息的數(shù)據(jù)，后臺處理相關業(yè)務后，返回所有的商品信息，然后用 jstl 表達 式將數(shù)據(jù)遍歷到 JSP頁面中。 圖 413 查看所有商品信息的 效果圖 當用戶點擊 添加商品信息 時， 添加商品信息的模態(tài)框出現(xiàn)，用戶就在相關位置輸入信息，點擊確認按鈕即可添加，效果 如圖 414所示。 圖 414 添加商品信息的效果圖 當用戶點擊 編輯商品信息 時，用戶點擊的這一行的商品信息立即被取出來，讀入到編輯商品信息的模態(tài)框，用戶即可根據(jù)信息進行編輯，效果 如圖 415 所示。 21 圖 415 編輯商品信息的效果圖 員工信息管理功能 員工信息管理功能的實現(xiàn) 員工信息管理模塊的功能主要是 實現(xiàn)對員工信息的管理 （增加，編輯，查看，刪除） 。 查看所有員工信息如圖 416所示。 查看所有用戶信息是這樣實現(xiàn)的：當用戶點擊左邊菜單欄的用戶信息管理后，則前臺向后臺發(fā)送請求用戶信息的數(shù)據(jù)，后臺處理相關業(yè)務后，返回所有的用戶信息，然后用 jstl 表達式將數(shù)據(jù)遍歷到 JSP 頁面中。 圖 416 查看員工信息的效果圖 當用戶點擊 添加員工信息 時，查看信息的界面隱藏了，添加員工信息的界面出現(xiàn)，用戶可以輸入相應的信息，點擊提交即可，效果 如圖 417 所示。 22 圖 417 添加員工信息的效果圖 當用戶點擊 編輯員工信息 時 ，此行的員工信息就被讀入到了編輯員工信息的界面，然后查看信息的界面隱藏，編輯員工信息的界面顯示，用戶可以根據(jù)信息進行編輯，編輯后點擊確認按鈕即可，效果 如圖 418所示。 圖 418 編輯員工信息的效果圖 23 角色管理功能的實現(xiàn) 角色管理主要是分為管理員角色和員工角色。管理員角色登錄系統(tǒng)可以對客戶信息，合同信息，商品信息，售后信息，員工信息進行增刪查改。員工角色只能查看以上的信息，不能進行增加，刪除，修改。這個功能的實現(xiàn)首先是在員工表增加一個角色字段，值為 0 或 1。 0 代表管理員， 1 代表員工。前后臺會 根據(jù)此字段來賦予不同角色的功能。 本章小結 本章對系統(tǒng)的實現(xiàn)過程做了詳細介紹，通過每個模塊的實現(xiàn)描述以及頁面的展