一、摘 要
服裝 MTM 定制行業(yè)在不斷發(fā)展，市場份額有望大幅增長，越來越多的人將會選擇高性價比的個性定制。服裝 MTM 定制行業(yè)通過紙質記錄數據的傳統(tǒng)模式，將有阻于該行業(yè)的發(fā)展。結合 WebAPP 移動應用，服裝 MTM 定制行業(yè)信息化將有力推動服裝 MTM 定制行業(yè)的發(fā)展。
本文通過對服裝 MTM 定制行業(yè)傳統(tǒng)的業(yè)務模式進行深入了解，熟悉對整個業(yè)務流程。本文對系統(tǒng)進行具體需求分析，確定該系統(tǒng)需要具備的功能模塊。本文使用面向對象技術分析該系統(tǒng)，確定該系統(tǒng)的涉眾及用例，對系統(tǒng)數據庫進行設計。最后，經過對關鍵技術的分析和選擇，本系統(tǒng)使用 HTML5 結合 AngularJS 實現(xiàn) WebApp 前端，使用 Node.js 以及 MongoDB 數據庫實現(xiàn)服務端后臺的搭建，完成基于 WebApp 服裝 MTM 訂單管理系統(tǒng)。
基于 WebApp 服裝 MTM 訂單管理系統(tǒng)，為服裝 MTM 定制企業(yè)信息化。該系統(tǒng)實現(xiàn)了某服裝 MTM 定制企業(yè)可通過該系統(tǒng)對訂單業(yè)務進行管理。量體設計師可以使用該系統(tǒng)添加銷售訂單，管理顧客和合作店等。除此之外，企業(yè)財務人員、后勤人員可通過該系統(tǒng)進行對訂單進行處理支付、處理下單以及處理發(fā)貨等。系統(tǒng)管理員可通過該系統(tǒng)管理員工、管理產品以及查看銷售量的圖表統(tǒng)計，了解合作店銷售業(yè)績和量體設計師銷售業(yè)績等等。
關鍵詞： MTM 訂單管理系統(tǒng) WebApp
二、Design of Order Management System for Apparel MTM Based on WebApp
Zhou Guilong(College of Mathematics and Informatics, South China Agricultural University, Guangzhou 510642, China)Abstract:With the continuous development of clothing MTM custom industry and the growing trend of the market share, more and more people will choose the high cost performance of personalized customization. Clothing MTM custom industry through the traditional mode of recording data will have resistance to the development of the industry. Combined with WebAPP mobile applications, clothing MTM custom industry information technology will be a powerful impetus to the development of clothing MTM custom industry.This paper get familiar with the entire business process trough deep understanding of the traditional business model of clothing MTM custom industry. This paper carries on the concrete demand analysis to the system to confirmed the function module that the system needs, and uses object-oriented technology to analyze the system, to determine the system's stakeholders and use cases, and to design the the database system. Finally, through the analysis and selection of key technology, with the front-end completed by HTML5 and AngularJS and the back-end built with node.js and mongodb database, the order management system for apparel MTM based on WebApp is completed. The order management system for apparel MTM based on WebApp customizes enterprise informationization of apparel MTM. The system achieved the function that a certain clothing MTM customized enterprises can manage the order business through the system. Body designers can use the system to add sales orders, manage customers and shop and so on. In addition, enterprise financial personnel, logistics personnel can be processed through the system to deal with the order of payment, process orders and handle of goods and so on. System administrators can manage employees through the system, manage the product as well as view sales chart statistics, understand the sales performance of the cooperative store and volume designer sales performance and so on.Key words: MTM Order management system WebApp三、前言
3.1 研究的背景
隨著人們生活水平和消費水平的提高，人們開始追求個性化的服裝設計，希望能夠穿著滿足自己體型特征來定制的服裝?，F(xiàn)在很多服裝定制銷售商，都是 MTM (made to measure )根據顧客的人體數據以及現(xiàn)有的款式對于其對應的樣板進行變更修改，進而得到與顧客人體數據高度吻合、適合個體顧客的樣板和成衣。(周旭東，2003)
在傳統(tǒng)的模式中，MTM 模式服裝銷售商的量體設計師需將量體數據已經相關訂單信息記錄于紙張上，然后定期收集整理，最后送到廠商進行生產。訂單信息完成也是通過人工記錄，缺乏信息化。這種傳統(tǒng)的方式，會出現(xiàn)很多的不便甚至會帶來一些不必要的麻煩以及損失。第一，人工手工填寫體量數據，很容易造成筆誤，而導致量身定制的服飾而不合身，最終顧客不滿意導致退貨或者維修對銷售商的損失。第二，整個訂單流程需人工攜帶傳遞，傳遞速度慢，效率低，且很容易出錯。第三，通過紙張記錄，紙張很容易被損壞且需要大量的紙張而不環(huán)保。第四，紙張記錄的用戶體量數據，被送到廠商后，無法進行再次利用等等。
隨著信息科技的發(fā)展越來越快，很多行業(yè)也陸續(xù)開始信息化，不乏商品的訂單系統(tǒng)，如淘寶，京東等。但更多的都是 PC 端且是面向顧客的下單系統(tǒng)，并不適用于 MTM 模式的訂單管理。
現(xiàn)移動互聯(lián)網快速發(fā)展，根據國際電信聯(lián)盟的數據顯示截到 2013 年 9 月，全球移動互聯(lián)網用戶數接近全球人口數，達到了 71 億。移動互聯(lián)網已經滲透到人類社會生活的各個角落，產生了巨大影響，也引發(fā)世界各國大力研究和發(fā)展移動互聯(lián)網的相關技術(文軍，張思峰，李濤柱，2014)。
移動互聯(lián)網日趨成熟，MTM 模式的訂單管理結合移動互聯(lián)網企業(yè)信息化，將大力推動使 MTM 服飾定制的商業(yè)發(fā)展，量體師只需通過手機設備便可記錄量體數據并進行訂單管理，將大大改善現(xiàn)狀的缺陷與不足。
3.2 研究的目的和意義
3.2.1 研究目的
本研究的 MTM 服裝定制的訂單管理系統(tǒng)，是基于 WebApp 平臺，后臺為 Node.js + MongoDB 的 Web 應用。通過這個系統(tǒng)，量體設計師對顧客、合作商信息管理，并進行下單；財務人員對訂單進行支付處理，后勤人員對訂單進行下單入廠生產，以及對產品發(fā)貨信息的記錄。系統(tǒng)管理員可以對產品、顧客、合作商進行管理，以及可以查閱銷量的圖標統(tǒng)計。
3.2.2 研究意義
隨著生活水平的提高，百姓對衣食住行的越來越關注，要求也越來越高。在服飾方面，服裝 MTM 定制方式，為顧客量身打造屬于自己的服飾，更貼身，更舒適。
服裝 MTM 定制企業(yè)通過訂單管理信息化，方便管理，加快訂單流程的進行，大大提升運作的效率，同時降低因人工等因素造成的錯誤率，增大企業(yè)效益。在 MTM 的定制模式中，可非常方便對顧客以及其量體數據進行記錄以及管理，避免傳統(tǒng)在紙張速寫的筆誤、筆跡不清晰、容易造成遺失，不可復用等等問題，用互聯(lián)網平臺代替紙張，也大大節(jié)省資源成本，且環(huán)保。
量體設計師下單，財務人員進行支付處理，后勤人員跟據訂單信息對訂單下單入廠生產，以及最終發(fā)貨，整個流程無需人工一步步進行跟進。相關工作人員可以跟據系統(tǒng)及時響應的信息對訂單進行處理，減少人力消耗并提供效率。
WebApp 是基于 Web 的系統(tǒng)和應用，是指通過使用 Web 和 Web 瀏覽器技術，跨越網絡(互聯(lián)網或內聯(lián)網)完成一個或多個任務的應用程序，通常需要使用 Web 瀏覽器。(陳勇，2012)基于 WebApp 下單系統(tǒng)，對不確定下單地點的量體師來說，通過手機就可進行，比較便捷，無需攜帶大量的紙張或者笨重的筆記本。只需要通過手機就可以進行對添加管理顧客以及合作商，并且能非常方便記錄顧客的量體數據，系統(tǒng)會對錄入數據進行有效驗證，降低信息錄入的出錯率，亦可隨時查閱歷史訂單狀態(tài)。
對于移動系統(tǒng)的設計，該系統(tǒng)基于 HTML5 采用 WebApp 形式的開發(fā)，相對傳統(tǒng)的手機 App 應用，WebApp 能輕松跨平臺，無需像 native App 需要同時開發(fā) Android 版和 iOS 版，也大大降低成本；并且終端無需安裝以及更新，給使用者減少不必要的麻煩，也減輕使用者手機的負載。
3.3 研究現(xiàn)狀
3.3.1 服裝 MTM 定制研究現(xiàn)狀
歐洲紡織服裝組織(EuMrEx)于 2000 年提出了建立 e.tailor(電子裁縫)這一新型服裝定制系統(tǒng)的設想(Christopher, 1994)。于 2010 年，在歐美和北美地區(qū)，量體定制已占服裝生產市場份額的 20%，并且定制服裝的需求還在不斷擴大，國外的某些公司做的已經相當成熟，如英國的 Baird Menswear 西服公司，銷售到國內國際市場的西服有 80% 是通過量體定制系統(tǒng)完成的，且服裝系列涵蓋了不同款式、顏色、規(guī)格的上萬種組合（王楠楠，陳建偉，2010 年）。
國內外服裝企業(yè)都已經逐漸開始運用。以溫州報喜鳥集團為例，通過應用 MTM 的相關技術，為顧客提供“個性化西服定制服務，并有上千種在庫規(guī)格作為定制服務的基礎；在國外也都有不少服裝企業(yè)在應用中。（金周銀，李仁旺，2010）
目前國內定制服飾只占服裝市場 5%、6% 的比例，隨著定制服裝行業(yè)的發(fā)展，市場份額有望大幅增長，越來越多的人將會選擇高性價比的個性定制。高性價比定制服裝的出現(xiàn)，使其不再是少數有錢人的專利，對于定制服裝的企業(yè)來說，這個市場大有可為。（楊靜，2016）
3.3.2 WebApp 研究現(xiàn)狀
WebApp 是 Google 在設計 Chrome 時提出的概念，是 Google 推廣云計算的其中一步，具有輕松跨平臺、開發(fā)效率高成本低、應用更豐富、無需安裝和更新等優(yōu)勢（周森鵬，陸正球，張城，王溢達，2015）。隨著 HTML5 的興起，出現(xiàn)在我們視野的 WebApp 應用也越來越多，越來越廣泛。
國外，微軟、Google、Facebook 等互聯(lián)網巨頭均在其官方網站嵌入郵件、小游戲等 WebApp 方便用戶直接訪問。Gmail 更是 WebApp 的經典，Gmail 集合了 Gtalk、Google Voice、Google Plus 等 App，方便用戶通過電腦以及智能移動終端直接訪問。用戶只要登錄 Gmail 即可獲取相應產品的推送服務。國內，像百度，淘寶，京東，美團等互聯(lián)網公司已開發(fā) WebApp 應用，只需要通過手機瀏覽器訪問官網或者掃二維碼進行訪問便可使用。在 2012 年的百度開發(fā)者大會上透露，為了百度的 PC 開發(fā)平臺與移動開發(fā)平臺進行整合，便于開發(fā)者開發(fā)跨終端的 WebApp。
Web 相關的技術一直在侵蝕 Native App 的領地。尤其是在 JavaScript 的語言進化以及開發(fā)能力越來越強的今天，基于 AJAX 的應用越來越豐富，使得前端的開發(fā)能力越來越強，承載的功能也越來越多。因此，在 WebApp 的發(fā)展過程中，各種類比 Native App 的框架和庫會越來越多，這也使得 Web App 所能夠具有的開發(fā)能力越來越傾向于 Native App。百納信息技術有限公司 CTO、W3C 標準化組織成員劉鐵鋒曾說，WebApp 的發(fā)展與普及，最重要的就是 UI 框架的發(fā)展。因為有了這一塊的發(fā)展，能夠低成本地快速構建出性能好、交互能力強的 Web 應用，以這些早起的開發(fā)者用強大的 Show Case 來帶動和推動 WebApp 的進一步發(fā)展（劉鐵峰，2012）。
正如劉鐵峰所言，在 2015 年至 2016 年不斷冒出新更強的優(yōu)秀 UI 框架，如 FrozenUI、Amaze UI、MUI 等等，今年年初騰訊微信也發(fā)布了微信的 WebAppUI 庫 WeUI，并得到眾多開發(fā)者的青睞，也大力推動了 WebApp 的發(fā)展。
3.4 研究內容
首先，本文對某服裝 MTM 定制有限公司進行業(yè)務調研，熟悉整個業(yè)務流程，了解目前傳統(tǒng)業(yè)務形式，傳統(tǒng)業(yè)務形式所存在的問題缺陷以及信息化的具體需求。同時，本文對目前比較成熟并類似的訂單系統(tǒng)進行使用，熟悉學習其前端的設計，交互過程，以大致確定目標系統(tǒng)所需要實現(xiàn)的效果。本文完成的具體內容如下：
了解并分析某服裝 MTM 定制公司的業(yè)務流程，確定服裝定制訂單系統(tǒng)的功能模塊。
對 MTM 訂單系統(tǒng)進行具體的需求分析，確定服裝定制訂單系統(tǒng)涉眾以及用例等。
對目前市面上類似的訂單系統(tǒng)進行體驗及分析其交互設計，完成該系統(tǒng)的原型交互設計以及其 UI 設計。
根據業(yè)務需求，完成改訂單系統(tǒng)數據庫設計。
搭建該系統(tǒng)的開發(fā)環(huán)境，系統(tǒng)框架，完成主要功能代碼設計。
完成服裝 MTM 定制訂單管理系統(tǒng)，對該系統(tǒng)進行系統(tǒng)測試。
四、需求分析
4.1 功能需求
根據前期對某服裝 MTM 定制有限公司的調研分析了解，該服裝 MTM 定制訂單管理系統(tǒng)需要實現(xiàn)以下幾個功能點：
量體設計師通過工號密碼登陸，可以在該系統(tǒng)添加并管理顧客個人信息以及對應量體數據，根據顧客的個人體型及需求進行下單，并且可以實時查閱歷史定制狀態(tài)。
量體設計師可對不合身的產品進行提交回廠維修申請。
財務人員可在 PC 后臺管理系統(tǒng)上進行實時查閱新的訂單，顧客完成支付轉賬后，核對顧客信息并進行支付處理。
后臺人員對已支付的訂單進行入廠生產，記錄其訂單狀態(tài)；并且對已生產完成的訂單進行發(fā)貨處理，記錄該訂單的發(fā)貨相關信息。
系統(tǒng)管理員可以在后臺管理平臺上查詢訂單的具體信息，對員工進行管理，對產品進行管理；查詢銷售報表信息。
4.2 涉眾及用例
本系統(tǒng)用例圖，如圖 1 所示，其中上面部分為后臺管理平臺，下面部分為 WebApp 服裝定制下單平臺。該服裝 MTM 定制訂單管理系統(tǒng)的參與者有量體設計師、財務人員、后勤人員以及系統(tǒng)管理員等。其中，量體設計師參與的用例有管理顧客信息，包括管理顧客個人基本信息以及顧客的量體數據、添加訂單、管理合作店、申請維修等用例；財務人員參與的用例有查詢訂單和處理支付；后勤人員參與的用例有查看訂單、下單以及發(fā)貨；系統(tǒng)管理參與的用例有查看訂單、管理員工、管理產品和查看銷售報表。表 1 簡要地描述了本系統(tǒng)涉及的主要用例。
圖 1 系統(tǒng)用例圖
表 1 用例統(tǒng)計表
4.3 主要用例的事件流描述
本文對該系統(tǒng)的 UC2 添加訂單、UC6 處理發(fā)貨這兩核心功能進行詳述用例，展示該用例更多的細節(jié)，并且更為深入。
4.3.1 添加訂單
范圍：某服裝 MTM 定制訂單管理系統(tǒng)
級別：用戶目標
主要參與者：量體設計師
涉眾及其關注點：
量體設計師：希望能夠準確、快速地輸入，而且付款能靈活調整。因為此類 產品，量體設計師可以根據不同的情況，進行不同的定價。
顧客：希望以最小代價完成購買量身定制的舒適的服裝，量體設計師能正確 根據個人需求進行選購添加訂單。
公司：希望準確地記錄交易，滿足顧客需求。希望能夠自動、快速地更新賬 務和訂單量信息。
廠商：希望盡量提供正確、詳細的訂單信息。
前置條件：量體設計師必須通過確認和認證，必須已添加該顧客。
成功保證：存儲訂單信息。
主成功場景：
顧客和量體設計師溝通好，確認要購買某產品。
量體設計師在顧客列表中選擇該顧客，開始一次新的訂單添加。
量體設計師逐條選擇相應的產品的系列、款式、顏色等信息，確認產品添加到訂單上。
產品添加完成后，系統(tǒng)顯示建議累積額。
量體設計師輸入應付金額。
量體設計師提交訂單添加，完成本次訂單添加。
擴展：
*a. 系統(tǒng)在任意時刻失敗:
為了保證后臺數據的完整性，要保證訂單信息全部填寫完成才可以提交訂單信息。在未填寫完之前，或者提交失敗需重新進行添加訂單處理。
量體設計師刷新系統(tǒng)頁面，必要時更換瀏覽器重新登錄系統(tǒng)，在有網絡的環(huán)境下重新進行對該顧客進行添加訂單。
*b. 顧客中途撤銷添加訂單:
量體設計師只需直接確認返回主頁面，不對該訂單繼續(xù)添加保存。
特殊需求：
不同量體設計師手機尺寸分辨率不一，系統(tǒng)需響應式適用不同分辨率手機。
系統(tǒng)在提交訂單之前需驗證訂單數據的完整性，有效性，并給予適當的提醒。
技術與數據變元表：無
發(fā)生頻率：可能會不斷地發(fā)生。
4.3.2 處理發(fā)貨
范圍：服裝 MTM 定制訂單管理系統(tǒng)
級別：用戶目標
主要參與者：后勤人員
涉眾及其關注點：
后勤：希望能夠準確、快速地查詢到要發(fā)貨的訂單，能準確、快速地入訂單 的發(fā)貨信息。
顧客：希望能準確并盡快地收到商品。
公司：希望準確地記錄發(fā)貨信息。希望能夠自動、快速地更新訂單狀態(tài)。
前置條件：量體設計師必須通過確認和認證；商品已生產完成運達企業(yè)，并貼好相應的訂單信息，商品準備發(fā)貨；顧客已付款。
成功保證：完整記錄商品的發(fā)貨相關信息，更新訂單狀態(tài)。
主成功場景：
商品已生產完成送達企業(yè)，做好發(fā)貨的準備。
后勤人員根據商品包裝上貼的訂單號，查找該訂單記錄。
查閱改訂單的具體信息，核對訂單信息。
根據發(fā)貨方式，填寫發(fā)貨信息。
提交發(fā)貨信息，更新訂單狀態(tài)。
擴展：
*a. 系統(tǒng)在任意時刻失敗:
為了保證后臺數據的完整性，要保證訂單信息全部填寫完成才可以提交發(fā)貨信息。在未填寫完之前，或者提交失敗需重新提交發(fā)貨信息。
后臺人員刷新系統(tǒng)頁面，必要時更換瀏覽器重新登錄系統(tǒng)，在有網絡的環(huán)境下重新進行進行該訂單發(fā)貨處理。
*b. 在系統(tǒng)查找不到該訂單信息或訂單狀態(tài)非“正在生產”:5
根據商品包裝的封面信息，電話聯(lián)系對應的量體設計師，核對該訂單，檢查訂單出錯情況。若存在，直接通過設計師進行發(fā)貨。重新記錄該訂單信息。
技術與數據變元表：
發(fā)貨單號系統(tǒng)根據上一條發(fā)貨單號自動遞增生成發(fā)貨單號。
發(fā)生頻率：可能會不斷地發(fā)生。
4.4 非功能需求分析
軟件的非功能性需求是指軟件產品為滿足用戶業(yè)務需求而必須具有且除功能需求以外的特性(Roger Pressman, 2007)。根據 Software Characteristic 的 ISO 9126 列表,這些特性包括可靠性、可用性、有效性、可維護性、可移植性等方面。這些方面的特性是軟件產品運行穩(wěn)定、可靠、易于使用與維護的基礎。針對本系統(tǒng)具體的非功能需求分析如下：
易用性：系統(tǒng)應建立友好的用戶界面，舒適符合人類日常行為的交互方式，操作簡單、直觀、靈活、易于學習掌握。量體設計師能很便捷添加顧客數據并且對其進行下單。系統(tǒng)管理員等能很方便查閱訂單等。
有效性：該系統(tǒng)需要填寫大量的表單，在記錄顧客量體數據時，需要填寫大量的數據，并且這些數據比較重要，錯誤數據會造成較大的影響。因此該系統(tǒng)必須對填寫的數據進行完整性以及有效性的驗證。
跨平臺響應式：移動端訂單系統(tǒng)需在 Android 和 iOS 同時能運行，并且能響應不同分辨率的手機。
可維護性：系統(tǒng)應考慮日后的擴充，模塊之間低耦合，便于維護。
五、系統(tǒng)總體設計
5.1 功能模塊劃分
本系統(tǒng)主要分為登陸模塊、顧客模塊、合作店模塊、訂單模塊、員工模塊、產品模塊、圖表統(tǒng)計模塊、支付模塊、下單模塊、發(fā)貨模塊、維修模塊等 11 個模塊。表 2 描述了每個功能模塊的主要實現(xiàn)的功能。
表 2 功能模塊表
圖 2 系統(tǒng)功能結構圖
本系統(tǒng)主要分為兩個部分，其中包括后臺管理平臺，已經 WebApp 移動端下單系統(tǒng)。后臺管理平臺提供給財務人員、后勤人員以及系統(tǒng)管理員進行使用。WebApp 移動端是提供給量體設計師進行使用。本系統(tǒng)具體功能結構圖，如圖 2 所示。
5.2 系統(tǒng)架構設計
系統(tǒng)軟件架構圖如圖 3 所示，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的前端頁面 UI 設計主要采用 HTML5、CSS3 原生實現(xiàn)，CSS3 中的 Media Query 可以實現(xiàn)響應式，解決移動設備屏幕自適應的問題。通過 JavaScript 實現(xiàn)前端業(yè)務邏輯以及交互設計，其中本應用使用了 jQuery，AngularJS 這些 js 框架來更方便實現(xiàn)前端的業(yè)務邏輯。為了實現(xiàn)前后端分離，提高開發(fā)效率，頁面的數據都通過 AJAX 請求完成，請求的參數和響應數據都以 JSON 格式傳遞。
系統(tǒng)的后臺采用一個新的 Web server 解決方案——Node.js 平臺，其支持后端運行 JavaScript，采用事件驅動模型、異步編程風格。后端 Web 框架采用的是第三方模塊 Express(BYVoid, 2012)，這樣便可將注意力集中在業(yè)務邏輯上的編碼工作，而不需要關心請求的解析。Express 框架符合 MVC (Model-View-Controller)設計模式，并且，對 RESTFul 風格的 Web 應用和路由管理有非常好的支持。
本系統(tǒng)采用 MongoDB 數據庫來存儲系統(tǒng)中的用戶數據?；?WebApp 服裝 MTM 訂單管理系統(tǒng)的前端通過 HTTP 請求，從后端獲取頁面，頁面呈現(xiàn)之后，通過 AJAX 請求頁面中的相關數據，后端 Node.js 從數據庫查詢出數據，然后再根據模板嵌入到網頁中（GET 請求）。用戶提交的數據同樣是通過 AJAX 請求（POST 請求）的方式發(fā)送到服務器端，后臺通過 Node.js 的業(yè)務邏輯處理函數對 HTTP 請求做相應的處理，并將處理結果存儲在 MongoDB 數據庫中。
若直接使用 MongoDB 模塊雖然強大而靈活，但有些繁瑣，本應用使用了 Node.js 和 MongoDB 的連接器 Mongoose。Mongoose 是 MongoDB 的一個對象模型工具，是基于 Node-MongoDB-Native 開發(fā)的 MongoDB Node.js 驅動，可以在異步的環(huán)境下執(zhí)行。同時它也是針對 MongoDB 操作的一個對象模型庫，封裝了 MongoDB 對文檔的的一些增刪改查等常用方法，讓 Node.js 操作 MongoDB 數據庫變得更加靈活簡單。
圖 3 系統(tǒng)軟件架構圖
5.3 系統(tǒng)包結構
本系統(tǒng)采用 MVC 開發(fā)設計模式，MVC 英文即 Model-View-Controller（模型－視圖－控制器），即把一個應用的輸入、處理、輸出流程按照 Model、View、Controller 的方式進行分離，這樣一個應用被分成三部分——模型、視圖和控制器。所謂 MVC 設計模式，是指一種劃分系統(tǒng)功能的方法，是為那些需要為同樣的數據提供多個視圖的應用程序而設計的，它實現(xiàn)了數據層與表示層的分離，特別適用于開發(fā)與用戶圖形界面有關的應用程序（李霞，2004）。
圖 4 系統(tǒng)包結構圖
系統(tǒng)包結構圖如圖 4 所示，其中每個包的作用如下：
view 包：直接面向用戶的頁面展示，展示頁面，顯示數據。其中包括 CMS（后臺管理系統(tǒng)）模塊和 WebApp 模塊。
routes 包：路由控制，路由處理是平臺能夠正確運行的重要部分，它直接影響到的顯示方式。它包含了服務器建構、解析，并將解析后的邏輯參數分發(fā)到邏輯模塊。
controllers 包：該包存放邏輯處理模塊的類，負責對用戶操作的具體處理，主要將用戶的基本操作轉變?yōu)橄鄳臄祿?，并將結果送至 view 層。該層需要實現(xiàn)用戶與管理操作的邏輯處理。
- util 包：存放了本系統(tǒng)用到的工具類，封裝一些通用的處理過程等。
- dao 包：dao 層完成數據庫的增刪查改等實現(xiàn)細節(jié)，將底層數據訪問的操作和業(yè)務邏輯分離開，對業(yè)務邏輯分離開，對業(yè)務層提供面向對象的數據訪問接口。
- models 包：該層實現(xiàn)連接數據庫，對數據庫表進行操作，如新建表，引用表等。
5.4 關鍵技術簡介及應用
5.4.1 Node.js
Node.js 是建立在 Chrome V8 引擎之上的平臺，它用于構建高速、可擴展的 Web 應用程序(Stefan Tilkoy，Steve Vinoski, 2010)。Node.js 采用事件驅動(even-driven)、異步非阻塞(non-blocking)編程模型，同時提供了諸多系統(tǒng)級別的 API，如文件操作等(Reuven M.Lerner，2011)。這也使得它在高并發(fā)、數據密集型實時 Web 應用中表現(xiàn)的更加輕量、高效和完美。而且，Node.js 本身就支持構建 HTTP 服務器，而不需要借助第三方的 Web 服務器，所以用 Node.js 開發(fā)的 Web 應用程序部署非常方便、高效（王金龍，宋斌，丁銳，2015）。
目前國內外許多公司都有使用 Node.js 的項目案例。如 LinkedIn 使用 Node.js 作為服務接口解決了移動應用的問題，淘寶使用 Node.js 為“淘寶指數”提供服務，雅虎使用 Node.js 作為雅虎曼哈頓的基礎。許多公司也為 Node.js 的發(fā)展做出了一定的貢獻，如 Microsoft 在 Windows Azure 上 Node.js 為提供了云托管應用。
5.4.2 MongoDB
MongoDB 是一個支持分布式文檔存儲的數據庫，其主要目的是為 Web 應用程序提供高性能、高可擴展性的數據存儲服務。它是 10gen 團隊于 2009 年推出的，使用 C++ 語言編寫的一個項目(Kristina, Chodorow, Michael Dirolf, 2010)。在非關系型數據庫中，MongoDB 的功能是非常豐富的，也是一個面向集合、文檔型、模式自由的數據庫。面向集合(Collection-Oriented)也是關系型數據庫中的概念，意即數據是分組存儲在數據庫中的，類似關系型數據庫中表；而這些數據分組又是一種文檔型(Document)的格式，文檔是由一組鍵值對構成，其中鍵用于唯一的標識一個文檔，值可以是各種復雜的數據類型，我們稱這種數據存儲格式為 BSON (Binary Serialized Document Format) (Zachary Parker，Scott Poe，Susan V，2013)；
MongoDB 具有豐富的數據模型、容易擴展且不犧牲速度以及便于管理等特點。它是面向文檔、模式自由的數據庫管理系統(tǒng)，在海量數據存儲方面有比較高的讀寫效率。（王光磊，2011）在本文，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)需要存儲大量的用戶量體數據，由于業(yè)務的需求量體數據也存在擴展的需求，因此 MongoDB 是非常適合作為本文的基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的數據庫。
5.4.3 AngularJS
AngularJS 是一款來自 Google 的前端 JavaScript 框架，也是 SPA（single-page-application，單頁應用）框架（董英茹，2015）。AngularJS 框架的體積非常小，但是設計理念和功能卻非常強大，極大地簡化前端開發(fā)的負擔，它快速成為了 JavaScript 的主流框架，幫助開發(fā)者從事 Web 開發(fā)。AngularJS 具備以下幾大特點：
數據的雙向綁定：view 層的數據和 model 層的數據是雙向綁定的，其中之一發(fā)生更改，另一方會隨之變化。相對過去的編碼方式，會節(jié)省大量的代碼量，這也是 Angular 最常用和最實用的特性。
MVVM：結合最基本的 MVC 設計模式構建客戶端 Web 應用。但不是傳統(tǒng)意義上的 MVC，而是 MVVM（Model - View - ViewModel），MVVM 采用雙向綁定(data-binding)：View 的變動，自動反映在 ViewModel，且每個模塊的代碼擁有自己的作用域。
依賴注入：根據需要注入特定的依賴對象，使代碼和程序松散耦合，可維護，可測試。
指令：指令可以用來創(chuàng)建自定義的標簽，它們可以用來裝飾元素或者操作 DOM 屬性，也可以作為標簽、屬性、注釋和類名使用。
基于 WebApp 服裝 MTM 訂單管理系統(tǒng)需要大量的數據交互，AngularJS 雙向數據綁定的特點非常便于系統(tǒng)的操作，以及數據查詢的功能。相對 jQuery 庫，本系統(tǒng)使用 AngularJS 框架實現(xiàn)前端邏輯，更便捷，并將會節(jié)省 50% 左右的代碼量，代碼邏輯也更顯清晰。
六、系統(tǒng)詳細設計
6.1 登陸模塊
圖 5 登陸模塊的順序圖
登陸模塊涉及 login 類、account 類、user 類等。員工輸入員工號以及密碼，通過 login 類，account 類，user 類層層訪問，獲取員工號對應的員工信息，login 類根據獲取到的員工信息匹配對應的密碼是否正確，不正確則需要重新輸入，正確則通過登錄。類之間的交互的發(fā)生時序如圖 5 登錄模塊順序圖所示。
6.2 添加訂單模塊
圖 6 添加訂單模塊順序圖
添加訂單模塊的實現(xiàn)細節(jié)：系統(tǒng)先調用 product 類的 getProducts()方法獲取產品列表，用戶選擇產品和相光信息，然后將單條產品信息作為訂單項信息，以改訂單項信息作為參數調用 orderItem 類的 setOrderItem()方法，添加到訂單項，直到添加完成，最后填寫完應付金額，創(chuàng)建新的訂單。其中涉及的類有：addOrder 類、product 類、orderItem 類以及 order 類，類之間的交互的發(fā)生時序如圖 6 登錄模塊順序圖所示。
6.3 顧客模塊
圖 7 顧客模塊順序圖
在 WebAPP 端，量體設計師可以添加顧客，查看歸屬自己的顧客。添加顧客，除了填寫顧客基本信息，還需選擇顧客所在的合作店。系統(tǒng)先要調用 partner 類的 getPartners()方法獲取合作店列表。量體設計師填寫完新顧客的數據之后，調用 customer 類的 setCustomer()方法，將新顧客的數據作為參數，setCustomer()方法將其保存到數據庫中。
量體設計師在顧客類別選擇某顧客，indexPage()類通過選擇該顧客的 customerId 向 customer 類獲取顧客信息，然后 customer 類返回對于的顧客信息，indexPage 類將獲取到的 customer 類傳到前端頁面展示。
6.4 發(fā)貨模塊
圖 8 發(fā)貨模塊順序圖
發(fā)貨模塊，后勤人員通過訂單號從訂單列表中查找指定訂單，然后修改訂單狀態(tài)，并添加發(fā)貨信息，如發(fā)貨方式，快遞信息等。其中涉及 orderPage 類、order 類、delivery 類等。orderPage 類以 orderId 為參數調用 findOrder()方法，findOrder()方法調用 order 類的 getOrder()方法獲取訂單信息，后勤人員根據返回顯示的 order 信息核對貨物信息，若無誤，填寫發(fā)貨單信息。orderPage 類以前端傳遞的發(fā)貨信息作為參數調用 newDelivery()方法，newDelivery()方法調用 delivery 類的 setDelivery()方法將該條發(fā)貨單信息存到數據庫中，最后調用 order 類的 changeState()方法，將訂單的狀態(tài)修改為“已發(fā)貨”狀態(tài)。
6.5 數據庫設計
圖 9 數據庫總體 E-R 圖
對數據的有效組織和管理，是實現(xiàn)基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的中心環(huán)節(jié)。有效的數據組織取決于數據庫的設計。而有效的數據管理則依賴于數據庫管理系統(tǒng)(DBMS)的選擇。
基于本文對系統(tǒng)的功能需求分析已經系統(tǒng)功能模塊的劃分，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)設計的表有：員工表、顧客表、量體數據、合作店表、產品表、訂單表、訂單項表、支付表、下單表、發(fā)貨表、維修表等 11 個數據庫表。系統(tǒng)數據庫總體 E-R 圖如圖 9 所示，數據庫表詳情見附錄數據庫表。
數據庫表之間具體關系如圖 10 所示。
圖 10 數據庫表關系圖
七、系統(tǒng)實現(xiàn)
7.1 WebApp 移動端實現(xiàn)
7.1.1 登陸界面
WebApp 頁面支持響應適配不同分辨率的手機，iPad 等移動設備。WebApp 移動端量體設計師通過輸入工號以及密碼后，點擊登陸按鈕即可進入系統(tǒng)。若出現(xiàn)驗證失敗，如工號不存在，或者密碼錯誤等情況會出現(xiàn) 3 秒的錯誤提醒框；若正確則直接進入系統(tǒng)。登陸界面如圖 11 所示。
圖 11 WebApp 登陸界面
7.1.2 添加用戶界面
WebAPP 端主要的業(yè)務流程就是添加顧客，填寫量體數據，添加訂單。其中先進行添加顧客，因此系統(tǒng)首頁便是添加顧客的界面，如圖 12。為了確保數據準確性，當填寫數據中生育選項為未生育的時候，產后輸入框不可填。新添加的顧客要選擇對于的合作店，合作店列表從后臺數據庫獲取。
點擊右上角保存的時候，如果數據不完整或部分數據無效則會出現(xiàn)錯誤提醒框，并不進行保存。若數據有效，則將數據庫保存到數據庫。保存成功后，界面出現(xiàn)對話框，引導是否進行下一步操作，填寫該顧客的量體數據。點擊“取消”，則停留在該頁面，若點擊確認這跳轉到填寫量體數據的界面。
圖 12 添加用戶界面
7.1.3 錄入用戶量體數據界面
當為老顧客填寫或者修改量體數據，量體設計師可點擊首頁的左上角，界面將滑出導航；點擊“我的顧客”，從顧客列表中選擇指定顧客，然后進入量體數據界面。由于量體數據較多，量體數據界面的設計把數據進行分類，并采用了分塊填寫。由此，界面更方便量體設計師的填寫。
當有修改數據而未保存的時候，量體設計師點擊了左上角的返回鍵的時候，會出現(xiàn)對話框，數據尚未保存。這樣避免了填寫的數據因未保存而丟失。若保存，頁面則引導到選購頁面，如圖 13 所示。
圖 13 錄入用戶量體數據頁面
7.1.4 添加訂單界面
量體設計師添加訂單需要選擇顧客所需的產品，并根據顧客的需求選擇是否添加聚攏帶，服裝的受壓程度。產品有分系列，然后每個系列都有各自的款式，還有不同的顏色，不同的面料。選購界面通過層層選擇，先選擇系列，然后款式中只能選擇該系列的款式，如圖 14。數據填寫完整之后，進行添加訂單，頁面顯示統(tǒng)計的建議金額，量體設計師可以根據具體情況填寫優(yōu)惠金額。最后完成訂單的添加。添加成功后返回首頁，準備開始新一輪的訂單。
圖 14 添加訂單頁面
7.2 后臺管理系統(tǒng)實現(xiàn)
7.2.1 支付處理界面
財務人員登錄后，界面會出現(xiàn)所有的訂單列表，為了方便查看“等待支付”狀態(tài)的訂單以及“已支付訂單”，點擊右上角按鈕可進行刷選。在訂單類別中，財務人員點擊去支付，顯示訂單詳情，并有“確認支付”按鈕，如圖 14。若該訂單非“等待支付”狀態(tài)，則按鈕點擊無效。
財務人員點擊“確認支付”后，該訂單狀態(tài)被改為“已支付”。頁面數據也被刷新。
圖 15 支付處理頁面
7.2.2 產品管理界面
系統(tǒng)管理員可對產品進行管理，查看產品，添加產品，修改產品，刪除不再生產的產品。當系統(tǒng)管理員點擊某條產品的修改按鈕，界面則出現(xiàn)修改窗口，如圖 16 所示，添加產品窗口類似。
圖 17 產品管理頁面
7.2.3 圖表統(tǒng)計界面
圖 18 圖表統(tǒng)計界面
為了方便企業(yè)更方便了解銷售情況，系統(tǒng)管理員可選擇指定時間范圍，查看其月度銷售情況，通過直方圖的形式展示，可以更直觀體現(xiàn)每個月的銷售情況，以及每個月之間的業(yè)績對比。同時，系統(tǒng)管理員也可以查閱合作店的銷售的情況或設計師的銷售業(yè)情況，查看業(yè)績排名，方便企業(yè)進行績效獎勵，如圖 18 所示。
八、總結與展望
8.1 總結
服裝 MTM 定制行業(yè)在不斷發(fā)展，市場份額有望大幅增長，越來越多的人將會選擇高性價比的個性定制。服裝 MTM 定制行業(yè)通過紙質記錄數據的傳統(tǒng)模式，將有阻于該行業(yè)的發(fā)展。服裝 MTM 企業(yè)信息化將大力推動該行業(yè)的發(fā)展。
本文通過對服裝 MTM 的行業(yè)模式進行深入了解，熟悉對整個業(yè)務流程，為服裝 MTM 定制行業(yè)設計一套基于 WebApp 服裝定制管理系統(tǒng)。WebAPP 能輕松跨平臺、開發(fā)效率高成本低、應用更豐富、無需安裝和更新，只需通過手機瀏覽器打開即可。通過 WebApp 移動端使用本系統(tǒng)，量體設計師將擺脫紙張記錄數據帶來的諸多不便。
基于 WebApp 服裝 MTM 訂單管理系統(tǒng)，為服裝 MTM 定制企業(yè)信息化。量體設計師可通過本系統(tǒng)添加并管理顧客個人信息以及對應量體數據，根據顧客的個人體型及需求進行下單，并且可以實時查閱歷史定制狀態(tài)。量體設計師還可以對不合身的產品進行提交回廠維修申請；財務人員可在 PC 后臺管理系統(tǒng)核對顧客信息并進行支付處理；后勤人員可在該系統(tǒng)進行對訂單處理下單以及發(fā)貨；系統(tǒng)管理員可以在后臺管理平臺上查詢訂單的具體信息，對員工進行管理，對產品進行管理，查詢銷售報表信息等。
8.2 展望
基于 WebAPP 服裝 MTM 定制訂單管理系統(tǒng)使服裝 MTM 定制行業(yè)從傳統(tǒng)的工業(yè)模式邁向企業(yè)信息化。希望本系統(tǒng)能上線使用，解決服裝 MTM 定制企業(yè)傳統(tǒng)業(yè)務模式帶來的問題，并且不斷進行完善。
本系統(tǒng)現(xiàn)階段仍存在不足需要改進的地方。本系統(tǒng)未針對系統(tǒng)安全性進行測試，部分數據會展示在前端的代碼，可能出現(xiàn)通過前端代碼惡意篡改系統(tǒng)數據；量體設計師需要填寫大量的量體數據。量體數據的輸入只做了數字的判斷，以及輸入長度的判斷，未能做精確的有效驗證，如某個部位的測量結果應符合其他部位數據的結果情況的一定范圍內；本系統(tǒng)目前尚未考慮數據冗余等情況。
九、參 考 文 獻
- 陳勇.WebApp 現(xiàn)狀分析與展望[J].通信與信息技術，2012，(4)：77-78.
- 董英茹.簡談 Angular JS 在下一代 Web 開發(fā)中的應用[J].軟件工程師，2015，18(5)：30-31
- 金周銀，李仁旺.服裝企業(yè)度身定制的客戶訂單管理系統(tǒng)的設計與實現(xiàn)[J].工業(yè)控制計算 機，2010，23(3)：79-83.
- 李霞.MVC 設計模式的原理及實現(xiàn)[D].吉林：吉林大學，2004.
- 劉鐵峰.WebAp 框架發(fā)展趨勢及現(xiàn)狀分析[J].程序員，2012，(4)：30-34.
- 任中文，張華，閆明松.MVC 模式研究的綜述[J].計算機應用，2004，24(10)：1-4.
- 王楠楠，陳建偉.國內外服裝 MTM 的比較及國內應用現(xiàn)狀分析[J].山東紡織經濟，2010， (11)：79-108.
- 王光磊.MongoDB 數據庫的應用研究和方案優(yōu)化[J].中國科技信息，2011，(20)：93-96．
- 王金龍，宋斌，丁銳. Node.js：一種新的 Web 應用構建技術[J].現(xiàn)代電子技術，2015，38(6)： 70-73.
- 文軍，張思峰，李濤柱.移動互聯(lián)網技術發(fā)展現(xiàn)狀及趨勢綜述[J].通信技術，2014，47(19)： 977-984.
- 楊靜.定制服裝實現(xiàn)性價比逆襲[R].杭州：杭州日報，2016.
- 周森鵬，陸正球，張城，王溢達.基于 HTML5 的企業(yè) WebApp 設計與實現(xiàn)[J].現(xiàn)代計算機， 2015，(4):49-52.
- 周旭東.MTM 與制服定制最優(yōu)裁剪方案的研究[J].揚州職業(yè)大學學報，2003，7(4)：28-30.
- BYVoid.Node.js 開發(fā)指南[M].人民郵電出版社，2012.
Christopher. Logistic and Supply Chain Management:Stategies for Reducing Costs and Improving Services[J].Operational Research Society, 1994, 45(11): 13-41.Kristina, Chodorow, Michael Dirolf. MongoDB:The Definitive Guide[M].O’Reilly Media,2010:20-24.
Reuven M.Lerner.At the forge:Node.js[J].Linux Journal,2011,(5):45-50.Stefan Tilkoy,Steve Vinoski.Node.js: Using Javascript to Buil High-Preformance Network Programs[J].IEEE Numberernet Computing,2010,14(6):80-83. Zachary Parker, Scott Poe, Susan V.Vrbsky.Comparing NoSQL MongoDB to an SQL DB[C].ACMSE,2013:49-60.十、附 錄
10.1 附錄 1 數據庫表
附表 1 員工表
附表 2 顧客表
附表 3 合作店表
附表 4 產品表
附表 5 量體數據表
（量體數據表涉及字段過多，此處只列出部分字段）
附表 6 訂單表
附表 7 訂單項表
附表 8 支付表
附表 9 下單表
附表 10 發(fā)貨表
（續(xù)上表）
附表 11 維修表
十一、致 謝
在校的這四年時間里很感謝老師們對我的淳淳教誨，是你們教會了我們勤奮學習，誠實做人，踏實做事，以寬容之心面對生活。指引著我們沿著正確方向前進。在點滴匯聚中使我逐漸形成正確、成熟的人生觀、價值觀。特別要感謝我的指導老師，鄧成劍老師給予我很大的幫助。
感謝我的家人，我永遠的支持者，正是在你們殷切目光的注視下，我才一步步的完成了求學生涯。沒有你們，就不會有今天的我！我一直很感謝你們，讓我擁有一個如此溫馨的家庭，讓我所有的一切都可以在你們這里得到理解與支持，得到諒解和分擔。你們的支持和鼓勵是我前進的動力。
衷心感謝我的導師鄧成劍老師。本文的研究工作是在鄧成劍老師的悉心指導下完成的，從論文的選題、研究計劃的制定、技術路線的選擇到系統(tǒng)的開發(fā)研制，各個方面都離不開鄧成劍老師熱情耐心的幫助和教導。鄧成劍老師認真的工作態(tài)度，誠信寬厚的為人處世態(tài)度，都給我留下了難以磨滅的印象，也為我今后的工作樹立了優(yōu)秀的榜樣。
最后，我衷心的感謝各位評委老師百忙之中抽空審閱我的畢業(yè)論文，謝謝各位評委老師的批評和指導。
浙公網安備 33010802012068號
