1、江蘇理工學院畢業設計說明書（論文）1 本科畢業設計（論文）本科畢業設計（論文）基于微信平臺的校園微快遞系統學院名稱： 計算機工程學院 專 業： 軟件工程 班 級： 11軟件2Z 學 號： 姓 名： 指導教師姓名： 指導教師職稱： 講 師 二一五 年 六 月基于微信平臺的校園微快遞系統摘 要：近年來，隨著微信的普及，越來越多的人開始使用微信。校園商品、服務交易仍采用面對面線下交易方式，這種方式不但不靈活，而且不符合當前這個信息化的時代。為了讓同學們更加快速，便捷的得到想要的商品、服務及快遞。設計并實現了“基于微信平臺的校園微快遞系統”，學生們可以通過微信訂購自己需要的商品、服務及微快遞，使得大學

2、生活質量有了一定的提高，讓大學校園邁入了一個新的臺階。本設計說明書根據校園商品、服務及微快遞訂購的實際情況，詳細介紹了校園微快遞系統的設計和實現流程。系統運用軟件工程原理和開發方法，通過可行性研究、需求分析、概要設計、詳細設計等步驟進行分析和設計，并采用Spring框架、JQuery以及MySQL 5.0等技術設計與實現。同時，采用Eclipse作為開發工具進行開發。系統能夠滿足商品、服務交易的基本要求，包括用戶管理、商店管理、商品、服務及快遞O2O交易的快捷化和信息化管理等模塊。關鍵詞：微信開發，Spring，AJAX，MySQL，HTML52The campus micro express

3、 delivery system based on wechat platform Abstract: In recent years, with the popularity of wechat, more and more people began to use the wechat. Campus goods, services trade is still used at face line transactions, this approach is not only inflexible, but also does not meet the current era of info

4、rmation technology. To make students more quickly and easily obtain goods, services and courier want. Design and realization of the wechat platform based on campus micro express delivery system, students can order goods, service and micro express delivery they need through the wechat. The quality of

5、 university life has definitely improved, so that the campus entered a new level. The design specification based on the campus of goods, services and micro express delivery order, detailing the campus micro express delivery system design and implementation process.System uses software engineering pr

6、inciples,development methods, through feasibility studies, requirements analysis, preliminary design, detailed design, analysis and design steps and use Spring framework, technical design, implementation of JQuery, MySQL 5.0 and so on. At the same time, the use of Eclipse as a development tool for d

7、evelopment. The system can meet the commodity, the basic requirements of service transactions,including user management, store management,product, service, express delivery O2O transaction and information management modules.Key words: Wechat Development，Spring，AJAX，MySQL，HTML5 頁 共 52 頁引 言使用微信進行商品、服務

8、及微快遞交易，使得大學生活質量提高，商家與用戶也能夠查詢最新商品信息及服務等。使得整個服務流程更加系統、規范，在提高大學生活質量的同時，也讓大學校園邁入了一個新的臺階。因此，開發一套結合線下商品、服務交易的校園微快遞系統是絕對必要的。本系統可以改變傳統的校園商品、服務及微快遞的交易方式，減少大量的交易成本，并可以更加方便的管理訂單。本系統設計開發使用B/S結構，利用Eclipse以及MySQL數據庫完成設計開發，部分頁面利用AJAX技術完成數據交互，利用SHA1加密技術保證用戶數據的安全。至此，本設計說明書著重介紹了校園微快遞系統的分析與設計過程，共分為6章。第1章概述，主要介紹了校園微快遞系

9、統的開發背景、研究目標和內容；第2章可行性研究，主要介紹了系統技術和操作可行性；第3章需求分析，主要介紹了通過分析校園微快遞系統的功能用例圖、活動圖等面向對象模型；第4章概要設計，包括系統的類圖、順序圖以及MySQL數據庫設計等內容；第5章詳細設計，主要介紹開發前的準備以及各個功能的詳細設計過程；第6章系統測試運行，主要介紹通過對本系統的運行進行測試，查看是否存在系統漏洞。 概 述1.1 系統開發背景目前校園商品、服務交易仍采用面對面線下交易方式，這種方式不但不靈活，而且不符合當前這個信息化的時代。唯有結合線上的交易，采用O2O模式進行交易，才能變得更加便捷可靠安全，同時也提高了同學們的生活質

10、量，因此開發校園微快遞系統顯得尤為重要。1.2 系統研究目標和內容面對當前校園商品、服務交易的現狀，迫切需要一個信息化的校園微快遞系統來為大學生提供方便的服務。所以，開發該校園微快遞系統是滿足市場需求的。本系統建立完善的業務流程和管理流程，用戶可以通過本系統方便的進行交易，從而實現交易的便捷化。本系統采用B/S結構，基于其可管理性、易于部署、便于維護以及擴展性等眾多優點，并且充分發揮該結構的跨平臺能力，多層結構的升級和擴展的優勢。因此，能夠很好地完成系統所要求的全部功能基本的要求。包括：用戶管理、商店管理、商品管理、下單、簽收訂單等功能。第2章 可行性研究2.1 技術可行性2.1.1 開發技術

11、微信開發微信1提供給開發者強大的API，使得微信開發者能夠通過微信公眾平臺很好的開發出優秀訂閱號的公眾號及企業號，微信提供給開發者以下開發接口：接收和發送消息（包含文本消息、圖片消息、語音消息、視頻消息、小視頻消息、地理位置消息、鏈接消息、圖文消息）用戶管理自定義菜單管理數據統計接口微信JS-SDK微信小店接口微信卡劵接口微信智能接口等微信開發支持多種語言，包含Java、PHP、ASP.NET、Ruby、Python、Note.js等，本系統采用的Java語言進行開發。AJAXAJAX2（AsynchronousJavaScriptAndXML）是異步JavaScript和XML。AJAX是通

12、過XmlHttpRequest對象完成對服務器端的異步請求，頁面在不用重新加載的情況下，實現動態刷新，進而實現網頁的動態化。在設計很多的動態網頁時，常使用AJAX來完成。MVC 模式MVC3即Model-View-Controller的縮寫，MVC是目前常用的軟件設計模式。MVC是將應用程序關鍵功能和數據顯示分離開來，最后使用控制器確保前兩部分的同步。使得數據操作和用戶界面可以單獨開發，增強了程序的可維護性，減少開發周期。HTML5HTML 54增強了Web 網頁的表現能力。并添加本地數據庫等Web應用的功能。HTML5通常是指HTML、CSS和JavaScript的整合。Firefox（火狐

13、瀏覽器），IE9+版本，Chrome（谷歌瀏覽器），Safari，Opera等瀏覽器都能夠對HTML5有很好的支持。CSS級聯樣式表5（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。通過設立樣式表，可以統一地控制HTML中各標志的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。JavaScriptJavaScript6是一種很強大的網絡腳本語言，它具有相對的安全性。HTML網頁上添加動態功能一般都使用它來實現。JavaScript 被數百萬計的網頁用來改進設計、驗證數據、動態效果等功能。JavaS

14、cript同時也是一種常用于客戶端Web開發的腳本語言，各大瀏覽器對它都有較好的支持。JSON JSON7一是種比較輕量的數據交換格式，因為它常用于傳遞相對較少的數據。JSON與XML類似，對于 AJAX 應用程序來說，JSON 比 XML 更快更易使用，一般常用eval()處理 JSON 字符串。JSON 可以將 JavaScript 中一組數據轉換為字符串，進而在函數之間進行快遞的傳遞數據。JQueryJQuery8是一個優秀的輕量級JavaScript 庫。它不僅兼容CSS3，還在各種瀏覽器中運行穩定。通過使用JQuery，可以方便的實現動畫效果和AJAX數據交互等功能，JQuery在許

15、多應用中被廣泛的使用，網上有許多的案例和文檔資料，其學習門檻較低，很容易入門，系統開發者可以使用JQuery提供的大量開發接口來完成自己的系統設計。2.1.2 開發環境本系統是在Windows 7操作系統下，使用微信對話框和內置瀏覽器完成前臺顯示，后臺使用Firefox瀏覽器完成前臺顯示，系統運行在Tomcat 7.0服務器上，使用MySQL作為數據庫搭建環境。本系統使用MVC開發模式，控制，視圖和邏輯層相互關聯，但又相互獨立。2.2 操作可行性本系統嚴格按照校園商品、服務交易的正常流程開發。管理人員能夠快速上手，并通過統計直觀查看系統情況。在投入使用前，會由開發并能熟練操作本系統的工程人員對

16、用戶群進行專業系統的培訓。在開發設計程序的過程中，使用直觀的界面和控件的文字，使得用戶充分理解系統功能，所以本系統的操作是完全可行的。第3章 需求分析3.1 功能概況描述校園微快遞系統的主要任務是：使用權限來劃分和管理各個人員的功能，主要完成的是系統的規劃與功能、性能分析與實現、的劃分以及各個實現的功能等。校園微快遞系統主要功能需求：一、用戶信息管理主要包括四個子功能：1用戶信息添加：管理員通過添加用戶功能，填寫新用戶的姓名、密碼等完成新用戶的添加。2用戶信息查詢：管理員通過輸入關鍵字對用戶信息進行查詢。3用戶信息修改：管理員通過修改功能對某個用戶的基本信息進行修改。4用戶信息刪除：管理員通過

17、刪除功能對已經注冊的用戶進行刪除。二商店管理主要包括五個子功能：1商店信息添加：管理員或商家通過添加功能，輸入商店基本信息，即可完成商店的添加。2商店信息查詢：管理員或商家通過查詢功能，輸入關鍵字對商店信息進行查詢。3. 商店信息修改：管理員或商家通過修改功能，輸入商店信息進行修改。4商店信息審核：管理員通過審核功能，查看商店信息后，進行審核。5商店信息刪除：管理員或商家通過刪除功能對已經添加的商店進行刪除。商品管理主要包括五個子功能：1商品信息添加：管理員或商家通過添加功能，輸入商品基本信息，完成商品的添加。2商品信息查詢：管理員或商家通過查詢功能，輸入關鍵字對商品信息進行查詢。3. 商品信

18、息修改：管理員或商家通過修改功能，輸入商品信息進行修改。4商品信息審核：管理員通過審核功能，查看商品信息后，進行審核。5商品信息刪除：管理員或商家通過刪除功能對已經添加的商品進行刪除。四、訂單管理主要包括四個子功能：1訂單創建：用戶根據自己的需求，選擇自己喜歡的商店、服務等，通過訂單創建功能進行下單。2訂單查詢：用戶根據自己的ID查詢自己已下訂單的狀態信息。3訂單取消：用戶根據自己的需要，可在下單后對自己不想訂購的商品、服務或微快遞進行取消。4. 訂單簽收：用戶根據自己是否收到商品，或，可以對訂單進行簽收操作。3.2 功能用例圖及活動圖1總用例圖 根據需求分析可以得出以下總的系統用例圖。圖 3

19、-1 系統總用例圖子用例圖用例名稱：用戶管理執行者：管理員用例圖：包含用例：用戶信息添加，用戶信息查詢，用戶信息修改，用戶信息刪除圖 3-2 用戶管理用例圖對應用戶管理活動圖如3-3所示。在用戶管理功能中，管理員可以選擇執行四種操作，分別是：用戶添加，用戶查詢，用戶修改，用戶刪除。用戶注冊或綁定之后，管理員可以對用戶進行查詢，修改，及刪除操作。同時，用戶本身也可以對自已的個人信息進行查看與修改操作。圖3-3用戶管理活動圖用例名稱：商店管理執行者：商家用例圖：包含用例：商店信息創建，商店信息查看，商店信息修改，商店信息刪除圖 3-4 商店管理用例圖對應商店管理活動圖如3-5所示。在商店創建功能中

20、，商家可以執行創建商店。在創建商店之后，商家可以對商店進行查看，修改，及刪除操作。在完成創建之后，商店需要通過管理員的審核方可顯示在微信端“校園微商城”頁面中。圖3-5商店管理活動圖用例名稱：商店審核執行者：管理員用例圖：包含用例：商店信息查詢，商店信息審核圖 3-6 商店審核用例圖對應商店審核活動圖如3-7所示。在商店審核功能中，商家在完成商店創建后，管理員便可以查詢到該商店的信息，判定商店符合要求后，管理員就可以對商店進行審核，商店一旦審核之后，就會顯示在“校園微商城”的頁面當中了。若該商店不符合要求，則不進行審核，當然管理員也可以對商店信息進行刪除操作。圖3-7商店審核活動圖用例名稱：商

21、品管理執行者：商家用例圖：包含用例：商品信息創建，商品信息修改，商品信息刪除圖 3-8 商品創建用例圖對應商品創建活動圖如3-9所示。在商品創建功能中，商家可以執行商品創建。在創建商品之后，商家可以對商品進行修改與刪除操作。在完成創建之后，商品需要通過管理員的審核方可顯示在“校園微商城”頁面中。圖3-9商品管理活動圖用例名稱：商品審核執行者：管理員用例圖：包含用例：商品信息查詢，商品信息審核，商品信息刪除圖 3-10 商品審核用例圖對應商品審核活動圖如3-11所示。在商品審核功能中，商家在完成商品創建后，管理員便可以查詢到該商品，判定符合要求后，管理員就可以對商品進行審核，商品一旦審核之后，就

22、會顯示在“校園微商城”的頁面當中了。若該商品不符合要求，則不進行審核，當然管理員也可以對商品信息進行刪除操作。圖3-11商品管理活動圖用例名稱：訂單管理執行者：普通用戶用例圖：包含用例：訂單信息創建，訂單信息查詢，訂單信息取消，訂單信息簽收圖 3-12 訂單管理用例圖對應訂單創建活動圖如3-13所示。在訂單管理功能中，用戶可以選擇執行四種操作，分別是：創建訂單，查詢訂單，取消訂單，簽收訂單。在創建訂單之后，用戶可以對訂單進行查詢，取消，及簽收操作。圖3-13訂單管理活動圖第4章 概要設計4.1系統類圖與順序圖1系統登陸圖4-1 系統登陸類圖由4-1靜態類圖可以發現，登陸過程中有兩個類進行交互，

23、分別是LoginController類和AccountService類， 進一步可以得到順序圖，明確類與類之間的交互。如圖4-2所示。圖4-2 登陸順序圖2用戶信息管理圖4-3 用戶信息管理功能類圖由4-3靜態類圖可以發現，用戶管理過程中有兩個類進行交互，分別是UserController，User類， 進一步可以得到順序圖，明確類與類之間的交互。如圖4-4所示。圖4-4 用戶信息管理順序圖3.商店管理功能圖4-5 商店管理類圖由4-5靜態類圖可以發現，商店管理過程中有三個類進行交互，分別是BussinessController類,User類,Bussiness類，進一步可以得到順序圖，明確類

24、與類之間的交互。如圖4-6所示。圖4-6 商店管理順序圖4商品管理功能圖4-7 商品管理類圖由4-7靜態類圖可以發現，商品管理過程中有兩個類進行交互，分別是ProductController類，User類和Product類， 進一步可以得到順序圖，明確類與類之間的交互。如圖4-8所示。圖4-8 商品管理順序圖5訂單管理功能圖4-9 訂單管理類圖由4-9靜態類圖可以發現，訂單管理過程中有兩個類進行交互，分別是XorderController類,Xorder類，進一步可以得到順序圖，明確類與類之間的交互。如圖4-10所示。圖4-10 訂單管理順序圖4.2數據結構與數據庫設計4.2.1 基本實體表9

25、序號表名說明1user用戶表，用于存放用戶信息2bussiness商家表，用于存放商家特有信息 3producct商品表，用于存放具體商品信息4xorder訂單表，用于存放訂單信息4.2.2 數據庫表設計10 表4-1用戶表主要字段字段名說 明類 型是否為空主鍵id用戶IDbigint否是openid微信IDvarchar否否 login_name用戶帳號varchar否否password用戶密碼varchar否否phone_num聯系方式varchar否否表4-2 商店表主要字段字段名說 明類 型是否為空主鍵id商店IDbigint否是user_id用戶IDbigint否否name商店名稱v

26、archar否否property商店類別varchar否否protocol商店協議varchar否否stat審核狀態varchar否否表4-3 商品表主要字段字段名說 明類 型是否為空主鍵id商品IDbigint否是bussiness_id商店IDbigint否否name商品名稱varchar否否price商品價格varchar否否description商品描述varchar否否image商品圖片varchar否否stat審核狀態varchar否否表4-4 訂單表主要字段字段名說 明類 型是否為空主鍵id訂單IDbigint否是user_id用戶IDbigint否否product_id商品ID

27、bigint否否down_time下單時間varchar否否 rev_time簽收時間varchar否否第5章 詳細設計5.1開發準備本系統采用了Spring11框架開發了校園微快遞系統。本系統采用的是B/S模式，即瀏覽器/服務器模式。在對MySQL數據庫連接方面，會在perties配置文件中進行配置相關的連接信息，當系統發生改動的時候，只需要簡單的修改perties配置文件的連接信息即可，增強了系統的可移植性。系統中會通過實體類來操作和數據庫相關的數據，在代碼的耦合性方面有了很好的提高。另外，由于本系統采用了MVC模式12，利用Controller將Model與View分離，能夠很好地提高系

28、統的開發效率,增強程序的可維護性和拓展性。將perties文件部分配置，用于連接數據庫文件： #mysql database settingjdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql:/localhost:3306/xet?useUnicode=true&characterEncoding=utf-8jdbc.username=rootjdbc.password=1234565.2 用戶管理5.2.1 商家注冊1.界面設計商家可以在瀏覽器輸入，點擊注冊按鈕，填寫相應信息后，即可完成注冊。 圖 5-1 商家注冊界面2.后臺處理與實現首

29、先，通過控制器RegisterController 的registerForm()方法返回用戶注冊頁面，用戶正確填寫個人信息后，點擊“提交”按鈕，系統調用register()方法，使用隨機生成的salt并經過1024次 sha-1 hash算法對用戶密碼進行加密后，將用戶信息存入數據庫中。 后臺部分處理代碼： /* 注冊用戶并寫入數據庫 */RequestMapping(method = RequestMethod.POST)public String register(Valid User user, RedirectAttributes redirectAttributes) / 調用注冊

30、用戶方法，寫入數據庫 accountService.registerUser(user); / 添加用戶名至前臺頁面redirectAttributes.addFlashAttribute(username, user.getLoginName(); / 返回至登錄頁面return redirect:/login;/* 設定安全的密碼，生成隨機的salt并經過1024次 sha-1 hash */private void entryptPassword(User user) / 產生一個8位的隨機鹽byte salt = Digests.generateSalt(SALT_SIZE); / 對

31、隨機鹽簡單進行編碼方式的加密后存入實體類中user.setSalt(Encodes.encodeHex(salt); / 調用安全哈希算法，使用隨機鹽組合加密密碼byte hashPassword = Digests.sha1(user.getPlainPassword().getBytes(), salt, HASH_INTERATIONS);user.setPassword(Encodes.encodeHex(hashPassword);代碼 5-1 后臺商家注冊5.2.2 普通用戶注冊1.界面設計普通用戶可使用手機微信關注“校園微快遞”公眾號（微信號：xywkd520）后，根據提示信息，

32、輸入個人信息完成注冊。當然，普通用戶也可以通過商家注冊方式完成注冊。圖 5-2 用戶注冊界面2.后臺處理與實現用戶注冊通過控制器WechatController 的register()方法對用戶完成注冊，微信對話框端注冊主要是通過對用戶的text請求進行解析并處理，最終返回XML的消息。 后臺校驗處理代碼： /* * 普通用戶注冊. */public void register() if(con.startsWith(綁定+)User user = new User(); / 設定學校名稱user.setSchoolName(江蘇理工學院);con = con.substring(con.in

33、dexOf(+)+1);tryif(accountService.findUserByOpenid(FromName)!= null)content = 您好，您已成功綁定，請解綁原先信息再綁定，謝謝使用！n 解綁格式：解綁;return getBackXMLTypeText(toName, FromName, content);catch(Exception e)e.printStackTrace();int flag=con.indexOf(+);user.setName(bs);flag=con.indexOf(+);user.setLoginName(user.getStuNum();

34、accountService.registerUser(user);ontent = 恭喜您綁定成功！;代碼 5-2 用戶注冊5.2.3 管理員，商家登錄1.界面設計管理員，或商家可以在瀏覽器輸入，填寫用戶名及密碼，點擊登錄按鈕，即可登錄到系統管理界面。 圖 5-3管理員，或商家登錄界面2.后臺處理與實現管理員，商家的登錄，系統會通過shiro13的FormAuthenticationFilter對用戶填寫的用戶名及密碼進行判斷，如果成功則進入系統管理頁面。 后臺部分處理代碼： /login = authc/wechat = anon /mbhome/* = anon /mblogin/* =

35、 anon/mbuser/* = anon/mbproduct/* = anon/mbxorder/* = anon/register/* = anon代碼 5-3 后臺管理員，商家登錄5.2.4 普通用戶登錄1.界面設計普通用戶可使用用戶名（默認用戶名為：學號）與密碼進行登錄，登錄成功后即可進行相關的操作。 圖 5-4普通用戶登錄界面2.后臺處理與實現首先，后臺通過控制器MbLoginController 的login()方法返回登錄頁面，用戶點擊“登錄”按鈕后，后臺通過控制器中的myLogin()方法來處理用戶登錄，對用戶的用戶名及密碼進行判斷后，正確則返回個人管理頁面。 后臺處理代碼：

36、/* 用戶登錄，并記錄登錄標記至sessionStorage */public void myLogin(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOExceptionPrintWriter out = response.getWriter();User user = new User(); / 獲取用戶的用戶名String loginName = request.getParameter(loginName); / 獲取用戶的密碼String password = re

37、quest.getParameter(password);user = accountService.findUserByLoginName(loginName); / 判斷用戶是否存在及用戶名和密碼是否匹配if(user != null & accountService.loginPassword(user, loginName, password)Map person = new HashMap(); person.put(userId, Encodes.encodeHex(user.getId().toString().getBytes();JSONObject jsonObject =

38、 JSONObject.fromObject(person); out.print(jsonObject);elseSystem.out.println(用戶不存在);out.print();代碼 5-4 后臺普通用戶登錄5.2.5 用戶管理1.界面設計管理員可在登錄后點擊右上角下拉框中的用戶管理進入用戶管理界面，在界面中，用戶可以查看用戶的基本信息，并可對用戶進行，修改，刪除等操作。 圖 5-5 用戶管理界面3.后臺處理與實現首先，通過控制器UserAdminController 的list()方法返回用戶管理列表頁面，同時，頁面還提供了修改用戶和刪除用戶的功能。后臺校驗處理代碼： /* 管

39、理員查詢所有商家及普通用戶信息*/public String list(Model model) List users = accountService.getAllUser();model.addAttribute(users, users);return account/adminUserList.jsp;代碼 5-5后臺用戶管理5.2.6 商家個人信息1.界面設計商家可在登錄后點擊右上角下拉框中的“個人信息”查看和修改自己的個人信息。 圖 5-6 個人信息界面2.后臺處理與實現通過控制器ProfileController 的updateForm()方法來返回個人信息修改頁面，用戶修改完信

40、息后，點擊“提交”按鈕，系統調用update()方法來處理修改請求，并更新數據庫個人信息。 后臺校驗處理代碼： /* 對用戶信息進行更新 */RequestMapping(method = RequestMethod.POST)public String update(Valid ModelAttribute(user) User user,HttpServletRequest request) System.out.println(進入更新);String RealPath = request.getSession().getServletContext().getRealPath();St

41、ring userPath = RealPath+ /static/images/user/+user.getId();System.out.println(地址+userPath);MultipartFile headImageFile = Fileupload.fileupload(request, userPath, headImageFile,headImageFile.jpg);MultipartFile identityImagesFile = Fileupload.fileupload(request, userPath, identityImagesFile, identity

42、ImagesFile.jpg);user.setHeadImage(/static/images/user/+user.getId()+/+ headImageFile.jpg);user.setIdentityImages(/static/images/user/+user.getId()+ /+identityImagesFile.jpg);accountService.updateUser(user);updateCurrentUserName(user.getName();System.out.println(更新完畢);return redirect:/;代碼 5-6后臺個人信息5.

43、2.7 普通用戶個人信息1.界面設計普通用戶可在“校園微快遞”公眾號中點擊“微菜單”上的“個人信息”查看自己的個人資料，或者可以點擊“微商城”進入“校園微快遞”公眾號網頁端，點擊“我”查看個人信息。界面如圖5-7及5-8所示。 圖 5-7 個人信息界面（微信對話框版） 圖 5-8 個人信息界面（微信網頁版）2.前臺頁面前臺頁面主要使用HTML5+CSS+JS 及JQuery Moblie 完成，采用listview顯示用戶個人信息，前臺數據使用AJAX請求后臺數據獲得。 1.前臺部分代碼： 學校： 學號： 姓名： 宿舍號： 手機號： 積分： 前臺AJAX請求$(function() $.aja

44、x( type:POST, url:/mbuser/myinfo, data:userId=+userId, complete:function(data) jsonobj = data.responseText; / 將json格式字符串處理成json對象數組 dataObj=eval(+jsonobj+); / 對指定id為schoolName的span添加數據 document.getElementById(schoolName).innerHTML=dataObj.schoolName; document.getElementById(stuNum).innerHTML=dataObj

45、.stuNum; document.getElementById(name).innerHTML=dataO; document.getElementById(credit).innerHTML=dataObj.credit; ); );代碼 5-7 前臺個人信息3.后臺處理與實現微信對話框端通過用戶的按鈕請求處理，調用WechatController的userInfo()方法返回用戶個人信息。微信網頁端通過MbUserController的myinfo()方法返回用戶個人信息。 后臺處理代碼：微信對話框端User user = accountService.findUserByOpenid(

46、FromName);content = 個人信息n 學校 : + user.getSchoolName() +n 姓名 : +user.getName()+n 學號 : +user.getStuNum() +n 收貨地址: + user.getAddress() +n 手機號 : + user.getPhoneNum() +n 積分: +user.getCredit();returnStr = getBackXMLTypeText(toName, FromName, content);微信網頁端 /* 用戶個人信息查詢 */public void myinfo(HttpServletReque

47、st request,HttpServletResponse response) throws ServletException, IOExceptionPrintWriter out = response.getWriter();User user = new User();String userId = request.getParameter(userId);userId = new String(userId);if(user != null)Map person = new HashMap(); person.put(schoolName, user.getSchoolName();

48、 person.put(loginName,user.getLoginName();person.put(name, user.getName(); person.put(phoneNum,user.getPhoneNum();person.put(openid,user.getOpenid();person.put(credit,String.valueOf(user.getCredit(); / 將Map類型的數據轉換成jsonObject類型的數據JSONObject jsonObject = JSONObject.fromObject(person); out.print(jsonOb

49、ject);elseout.print();代碼 5-8后臺個人信息5.3 商店信息管理5.3.1商店管理1界面設計管理員可點擊商店管理查看所有商店（如圖5-9），而商家點擊我的商店則僅可以查找自己的所有商店（如圖5-10）,在商店列表中可點擊“創建商店”或“我要開店”創建新的商店（如圖5-11）。新的商店必須在審核成功后方能在“校園微快遞”公眾號的微商城中顯示。圖5-9 商店管理頁面（管理員）圖5-10 商店管理頁面圖5-11 商店創建頁面2.后臺處理與實現通過控制器BussinessController的list()方法返回對應的商店列表。通過create()方法實現創建商店功能，通過up

50、date方法實現更新商店功能，通過delete()方法實現刪除商店功能。通過verify()方法實現審核商店功能。 1.后臺處理部分代碼： /* 完成商店創建功能，并返回至檢索頁面 */RequestMapping(value = create, method = RequestMethod.POST)public String create(Valid Bussiness newBussiness, Model model,HttpServletRequest request, RedirectAttributes redirectAttributes) / 獲取服務器的絕對URL,用于拼接

51、上傳的文件路徑String RealPath = request.getSession().getServletContext().getRealPath();User user = new User(getCurrentUserId();newBussiness.setUser(user);bussinessService.saveBussiness(newBussiness);String bussProtocolPath = RealPath+ /static/images/+ newBussiness.getProperty()+/+newBussiness.getId() +/Pro

52、tocol; / 調用fileupload 進行上傳操作MultipartFile mFile = Fileupload.fileupload(request, bussProtocolPath, fileUpload1,protocol.jpg);String bussImagePath = RealPath+ /static/images/+ newBussiness.getProperty()+/+newBussiness.getId() +/Bussiness;MultipartFile imageFile = Fileupload.fileupload(request, bussIm

53、agePath, fileUpload2,bussiness.jpg);newBussiness.setProtocol(/static/images/+ newBussiness.getProperty()+/+newBussiness.getId() +/Protocol/+ protocol.doc);newBussiness.setImage(/static/images/+ newBussiness.getProperty()+/+newBussiness.getId() +/Bussiness/+ bussiness.jpg );/ 狀態0，表示未經過管理員審核 newBussin

54、ess.setStat(0);bussinessService.saveBussiness(newBussiness);redirectAttributes.addFlashAttribute(message, 創建商店成功);return redirect:/bussiness/;/* 實現文件上傳功能的部分代碼 */public class Fileupload public static MultipartFile fileupload(HttpServletRequest request,String path, String file, String filename) File f

55、iles = new File(path);/ 通過path創建遠端服務器文件 files.mkdirs(); / 把從頁面獲取的request轉換為文件數據 MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; / 從文件數據中獲取fileUpload的文件信息 mFile = multiRequest.getFile(file); String filename = mFile.getOriginalFilename(); / 創建文件輸入流 inputStream = mFile

56、.getInputStream(); byte b = new byte10485760; int length = inputStream.read(b); path += / + filename; / 文件流寫入到服務器端 outputStream = new FileOutputStream(path); outputStream.write(b, 0, length); return mFile;代碼 5-9后臺商店管理5.3.2商店列表1界面設計（微信網頁版）普通用戶可點擊“校園微快遞”微商城按鈕，進入“校園微商城”，在微商城中，用戶可瀏覽已經審核的商店。如圖5-12及5-13所示

57、。 圖5-12 微商城頁面 圖5-13 微服務頁面2.后臺處理與實現通過控制器BMbHomeController的listwsc()方法處理并返回對應的商店列表14。 后臺處理部分代碼：/* 查詢所有已經通過審核的商店 */public void listwsc(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOExceptionPrintWriter out = response.getWriter();/ 獲取當前用戶List bussinesss = bussinessS

58、ervice.getBussinessByPropertyAndStat(微商城, 1);JSONArray jsonarray = new JSONArray();for(Bussiness bussiness:bussinesss)Map bizs = new HashMap();bizs.put(id, bussiness.getId().toString(); bizs.put(name, bussiness.getName(); bizs.put(image, bussiness.getImage(); / 將Map類型的數據轉換成jsonObject類型的數據 JSONObject

59、 jsonObject = JSONObject.fromObject(bizs); / 將jsonObject添加到jsonarray jsonarray.add(jsonObject);out.print(jsonarray);out.flush();out.close();代碼 5-10后臺商店列表5.4 商品信息管理5.4.1商品管理1界面設計管理員或商家或點擊商店列表最右邊的“商品管理”可查看本商店下所有創建的商品列表，同時可以在所選擇的商店下進行商品的創建，修改，刪除等操作。商家創建或修改商品后必須經過審核后方能顯示在“校園微快遞”的微商城中。商品管理頁面如圖5-14所示，商品創建

60、頁面如圖5-15所示。圖5-14 商品管理頁面圖5-15 商品創建頁面2.后臺處理與實現通過控制器ProductController的list()方法返回對應的商品列表。通過create()方法實現創建商品功能，通過update方法實現更新商品功能，通過delete()方法實現刪除商品功能。通過verify()方法實現審核商品功能。使用user.getRoles()判斷權限并處理請求。 后臺處理部分代碼：/* list()方法查詢商品后返回至頁面 */public String list(PathVariable(bussinessId) Long bussinessId) String so