一、摘 要

服裝 MTM 定制行業(yè)在不斷發(fā)展，市場(chǎng)份額有望大幅增長(zhǎng)，越來(lái)越多的人將會(huì)選擇高性價(jià)比的個(gè)性定制。服裝 MTM 定制行業(yè)通過(guò)紙質(zhì)記錄數(shù)據(jù)的傳統(tǒng)模式，將有阻于該行業(yè)的發(fā)展。結(jié)合 WebAPP 移動(dòng)應(yīng)用，服裝 MTM 定制行業(yè)信息化將有力推動(dòng)服裝 MTM 定制行業(yè)的發(fā)展。

本文通過(guò)對(duì)服裝 MTM 定制行業(yè)傳統(tǒng)的業(yè)務(wù)模式進(jìn)行深入了解，熟悉對(duì)整個(gè)業(yè)務(wù)流程。本文對(duì)系統(tǒng)進(jìn)行具體需求分析，確定該系統(tǒng)需要具備的功能模塊。本文使用面向?qū)ο蠹夹g(shù)分析該系統(tǒng)，確定該系統(tǒng)的涉眾及用例，對(duì)系統(tǒng)數(shù)據(jù)庫(kù)進(jìn)行設(shè)計(jì)。最后，經(jīng)過(guò)對(duì)關(guān)鍵技術(shù)的分析和選擇，本系統(tǒng)使用 HTML5 結(jié)合 AngularJS 實(shí)現(xiàn) WebApp 前端，使用 Node.js 以及 MongoDB 數(shù)據(jù)庫(kù)實(shí)現(xiàn)服務(wù)端后臺(tái)的搭建，完成基于 WebApp 服裝 MTM 訂單管理系統(tǒng)。

基于 WebApp 服裝 MTM 訂單管理系統(tǒng)，為服裝 MTM 定制企業(yè)信息化。該系統(tǒng)實(shí)現(xiàn)了某服裝 MTM 定制企業(yè)可通過(guò)該系統(tǒng)對(duì)訂單業(yè)務(wù)進(jìn)行管理。量體設(shè)計(jì)師可以使用該系統(tǒng)添加銷售訂單，管理顧客和合作店等。除此之外，企業(yè)財(cái)務(wù)人員、后勤人員可通過(guò)該系統(tǒng)進(jìn)行對(duì)訂單進(jìn)行處理支付、處理下單以及處理發(fā)貨等。系統(tǒng)管理員可通過(guò)該系統(tǒng)管理員工、管理產(chǎn)品以及查看銷售量的圖表統(tǒng)計(jì)，了解合作店銷售業(yè)績(jī)和量體設(shè)計(jì)師銷售業(yè)績(jī)等等。

關(guān)鍵詞： 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èi)水平的提高，人們開始追求個(gè)性化的服裝設(shè)計(jì)，希望能夠穿著滿足自己體型特征來(lái)定制的服裝?，F(xiàn)在很多服裝定制銷售商，都是 MTM (made to measure )根據(jù)顧客的人體數(shù)據(jù)以及現(xiàn)有的款式對(duì)于其對(duì)應(yīng)的樣板進(jìn)行變更修改，進(jìn)而得到與顧客人體數(shù)據(jù)高度吻合、適合個(gè)體顧客的樣板和成衣。(周旭東，2003)

在傳統(tǒng)的模式中，MTM 模式服裝銷售商的量體設(shè)計(jì)師需將量體數(shù)據(jù)已經(jīng)相關(guān)訂單信息記錄于紙張上，然后定期收集整理，最后送到廠商進(jìn)行生產(chǎn)。訂單信息完成也是通過(guò)人工記錄，缺乏信息化。這種傳統(tǒng)的方式，會(huì)出現(xiàn)很多的不便甚至?xí)?lái)一些不必要的麻煩以及損失。第一，人工手工填寫體量數(shù)據(jù)，很容易造成筆誤，而導(dǎo)致量身定制的服飾而不合身，最終顧客不滿意導(dǎo)致退貨或者維修對(duì)銷售商的損失。第二，整個(gè)訂單流程需人工攜帶傳遞，傳遞速度慢，效率低，且很容易出錯(cuò)。第三，通過(guò)紙張記錄，紙張很容易被損壞且需要大量的紙張而不環(huán)保。第四，紙張記錄的用戶體量數(shù)據(jù)，被送到廠商后，無(wú)法進(jìn)行再次利用等等。

隨著信息科技的發(fā)展越來(lái)越快，很多行業(yè)也陸續(xù)開始信息化，不乏商品的訂單系統(tǒng)，如淘寶，京東等。但更多的都是 PC 端且是面向顧客的下單系統(tǒng)，并不適用于 MTM 模式的訂單管理。

現(xiàn)移動(dòng)互聯(lián)網(wǎng)快速發(fā)展，根據(jù)國(guó)際電信聯(lián)盟的數(shù)據(jù)顯示截到 2013 年 9 月，全球移動(dòng)互聯(lián)網(wǎng)用戶數(shù)接近全球人口數(shù)，達(dá)到了 71 億。移動(dòng)互聯(lián)網(wǎng)已經(jīng)滲透到人類社會(huì)生活的各個(gè)角落，產(chǎn)生了巨大影響，也引發(fā)世界各國(guó)大力研究和發(fā)展移動(dòng)互聯(lián)網(wǎng)的相關(guān)技術(shù)(文軍，張思峰，李濤柱，2014)。

移動(dòng)互聯(lián)網(wǎng)日趨成熟，MTM 模式的訂單管理結(jié)合移動(dòng)互聯(lián)網(wǎng)企業(yè)信息化，將大力推動(dòng)使 MTM 服飾定制的商業(yè)發(fā)展，量體師只需通過(guò)手機(jī)設(shè)備便可記錄量體數(shù)據(jù)并進(jìn)行訂單管理，將大大改善現(xiàn)狀的缺陷與不足。

3.2 研究的目的和意義

3.2.1 研究目的

本研究的 MTM 服裝定制的訂單管理系統(tǒng)，是基于 WebApp 平臺(tái)，后臺(tái)為 Node.js + MongoDB 的 Web 應(yīng)用。通過(guò)這個(gè)系統(tǒng)，量體設(shè)計(jì)師對(duì)顧客、合作商信息管理，并進(jìn)行下單；財(cái)務(wù)人員對(duì)訂單進(jìn)行支付處理，后勤人員對(duì)訂單進(jìn)行下單入廠生產(chǎn)，以及對(duì)產(chǎn)品發(fā)貨信息的記錄。系統(tǒng)管理員可以對(duì)產(chǎn)品、顧客、合作商進(jìn)行管理，以及可以查閱銷量的圖標(biāo)統(tǒng)計(jì)。

3.2.2 研究意義

隨著生活水平的提高，百姓對(duì)衣食住行的越來(lái)越關(guān)注，要求也越來(lái)越高。在服飾方面，服裝 MTM 定制方式，為顧客量身打造屬于自己的服飾，更貼身，更舒適。

服裝 MTM 定制企業(yè)通過(guò)訂單管理信息化，方便管理，加快訂單流程的進(jìn)行，大大提升運(yùn)作的效率，同時(shí)降低因人工等因素造成的錯(cuò)誤率，增大企業(yè)效益。在 MTM 的定制模式中，可非常方便對(duì)顧客以及其量體數(shù)據(jù)進(jìn)行記錄以及管理，避免傳統(tǒng)在紙張速寫的筆誤、筆跡不清晰、容易造成遺失，不可復(fù)用等等問(wèn)題，用互聯(lián)網(wǎng)平臺(tái)代替紙張，也大大節(jié)省資源成本，且環(huán)保。

量體設(shè)計(jì)師下單，財(cái)務(wù)人員進(jìn)行支付處理，后勤人員跟據(jù)訂單信息對(duì)訂單下單入廠生產(chǎn)，以及最終發(fā)貨，整個(gè)流程無(wú)需人工一步步進(jìn)行跟進(jìn)。相關(guān)工作人員可以跟據(jù)系統(tǒng)及時(shí)響應(yīng)的信息對(duì)訂單進(jìn)行處理，減少人力消耗并提供效率。

WebApp 是基于 Web 的系統(tǒng)和應(yīng)用，是指通過(guò)使用 Web 和 Web 瀏覽器技術(shù)，跨越網(wǎng)絡(luò)(互聯(lián)網(wǎng)或內(nèi)聯(lián)網(wǎng))完成一個(gè)或多個(gè)任務(wù)的應(yīng)用程序，通常需要使用 Web 瀏覽器。(陳勇，2012)基于 WebApp 下單系統(tǒng)，對(duì)不確定下單地點(diǎn)的量體師來(lái)說(shuō)，通過(guò)手機(jī)就可進(jìn)行，比較便捷，無(wú)需攜帶大量的紙張或者笨重的筆記本。只需要通過(guò)手機(jī)就可以進(jìn)行對(duì)添加管理顧客以及合作商，并且能非常方便記錄顧客的量體數(shù)據(jù)，系統(tǒng)會(huì)對(duì)錄入數(shù)據(jù)進(jìn)行有效驗(yàn)證，降低信息錄入的出錯(cuò)率，亦可隨時(shí)查閱歷史訂單狀態(tài)。

對(duì)于移動(dòng)系統(tǒng)的設(shè)計(jì)，該系統(tǒng)基于 HTML5 采用 WebApp 形式的開發(fā)，相對(duì)傳統(tǒng)的手機(jī) App 應(yīng)用，WebApp 能輕松跨平臺(tái)，無(wú)需像 native App 需要同時(shí)開發(fā) Android 版和 iOS 版，也大大降低成本；并且終端無(wú)需安裝以及更新，給使用者減少不必要的麻煩，也減輕使用者手機(jī)的負(fù)載。

3.3 研究現(xiàn)狀

3.3.1 服裝 MTM 定制研究現(xiàn)狀

歐洲紡織服裝組織(EuMrEx)于 2000 年提出了建立 e.tailor(電子裁縫)這一新型服裝定制系統(tǒng)的設(shè)想(Christopher, 1994)。于 2010 年，在歐美和北美地區(qū)，量體定制已占服裝生產(chǎn)市場(chǎng)份額的 20%，并且定制服裝的需求還在不斷擴(kuò)大，國(guó)外的某些公司做的已經(jīng)相當(dāng)成熟，如英國(guó)的 Baird Menswear 西服公司，銷售到國(guó)內(nèi)國(guó)際市場(chǎng)的西服有 80% 是通過(guò)量體定制系統(tǒng)完成的，且服裝系列涵蓋了不同款式、顏色、規(guī)格的上萬(wàn)種組合（王楠楠，陳建偉，2010 年）。

國(guó)內(nèi)外服裝企業(yè)都已經(jīng)逐漸開始運(yùn)用。以溫州報(bào)喜鳥集團(tuán)為例，通過(guò)應(yīng)用 MTM 的相關(guān)技術(shù)，為顧客提供“個(gè)性化西服定制服務(wù)，并有上千種在庫(kù)規(guī)格作為定制服務(wù)的基礎(chǔ)；在國(guó)外也都有不少服裝企業(yè)在應(yīng)用中。（金周銀，李仁旺，2010）

目前國(guó)內(nèi)定制服飾只占服裝市場(chǎng) 5%、6% 的比例，隨著定制服裝行業(yè)的發(fā)展，市場(chǎng)份額有望大幅增長(zhǎng)，越來(lái)越多的人將會(huì)選擇高性價(jià)比的個(gè)性定制。高性價(jià)比定制服裝的出現(xiàn)，使其不再是少數(shù)有錢人的專利，對(duì)于定制服裝的企業(yè)來(lái)說(shuō)，這個(gè)市場(chǎng)大有可為。（楊靜，2016）

3.3.2 WebApp 研究現(xiàn)狀

WebApp 是 Google 在設(shè)計(jì) Chrome 時(shí)提出的概念，是 Google 推廣云計(jì)算的其中一步，具有輕松跨平臺(tái)、開發(fā)效率高成本低、應(yīng)用更豐富、無(wú)需安裝和更新等優(yōu)勢(shì)（周森鵬，陸正球，張城，王溢達(dá)，2015）。隨著 HTML5 的興起，出現(xiàn)在我們視野的 WebApp 應(yīng)用也越來(lái)越多，越來(lái)越廣泛。

國(guó)外，微軟、Google、Facebook 等互聯(lián)網(wǎng)巨頭均在其官方網(wǎng)站嵌入郵件、小游戲等 WebApp 方便用戶直接訪問(wèn)。Gmail 更是 WebApp 的經(jīng)典，Gmail 集合了 Gtalk、Google Voice、Google Plus 等 App，方便用戶通過(guò)電腦以及智能移動(dòng)終端直接訪問(wèn)。用戶只要登錄 Gmail 即可獲取相應(yīng)產(chǎn)品的推送服務(wù)。國(guó)內(nèi)，像百度，淘寶，京東，美團(tuán)等互聯(lián)網(wǎng)公司已開發(fā) WebApp 應(yīng)用，只需要通過(guò)手機(jī)瀏覽器訪問(wèn)官網(wǎng)或者掃二維碼進(jìn)行訪問(wèn)便可使用。在 2012 年的百度開發(fā)者大會(huì)上透露，為了百度的 PC 開發(fā)平臺(tái)與移動(dòng)開發(fā)平臺(tái)進(jìn)行整合，便于開發(fā)者開發(fā)跨終端的 WebApp。

Web 相關(guān)的技術(shù)一直在侵蝕 Native App 的領(lǐng)地。尤其是在 JavaScript 的語(yǔ)言進(jìn)化以及開發(fā)能力越來(lái)越強(qiáng)的今天，基于 AJAX 的應(yīng)用越來(lái)越豐富，使得前端的開發(fā)能力越來(lái)越強(qiáng)，承載的功能也越來(lái)越多。因此，在 WebApp 的發(fā)展過(guò)程中，各種類比 Native App 的框架和庫(kù)會(huì)越來(lái)越多，這也使得 Web App 所能夠具有的開發(fā)能力越來(lái)越傾向于 Native App。百納信息技術(shù)有限公司 CTO、W3C 標(biāo)準(zhǔn)化組織成員劉鐵鋒曾說(shuō)，WebApp 的發(fā)展與普及，最重要的就是 UI 框架的發(fā)展。因?yàn)橛辛诉@一塊的發(fā)展，能夠低成本地快速構(gòu)建出性能好、交互能力強(qiáng)的 Web 應(yīng)用，以這些早起的開發(fā)者用強(qiáng)大的 Show Case 來(lái)帶動(dòng)和推動(dòng) WebApp 的進(jìn)一步發(fā)展（劉鐵峰，2012）。

正如劉鐵峰所言，在 2015 年至 2016 年不斷冒出新更強(qiáng)的優(yōu)秀 UI 框架，如 FrozenUI、Amaze UI、MUI 等等，今年年初騰訊微信也發(fā)布了微信的 WebAppUI 庫(kù) WeUI，并得到眾多開發(fā)者的青睞，也大力推動(dòng)了 WebApp 的發(fā)展。

3.4 研究?jī)?nèi)容

首先，本文對(duì)某服裝 MTM 定制有限公司進(jìn)行業(yè)務(wù)調(diào)研，熟悉整個(gè)業(yè)務(wù)流程，了解目前傳統(tǒng)業(yè)務(wù)形式，傳統(tǒng)業(yè)務(wù)形式所存在的問(wèn)題缺陷以及信息化的具體需求。同時(shí)，本文對(duì)目前比較成熟并類似的訂單系統(tǒng)進(jìn)行使用，熟悉學(xué)習(xí)其前端的設(shè)計(jì)，交互過(guò)程，以大致確定目標(biāo)系統(tǒng)所需要實(shí)現(xiàn)的效果。本文完成的具體內(nèi)容如下：

了解并分析某服裝 MTM 定制公司的業(yè)務(wù)流程，確定服裝定制訂單系統(tǒng)的功能模塊。

對(duì) MTM 訂單系統(tǒng)進(jìn)行具體的需求分析，確定服裝定制訂單系統(tǒng)涉眾以及用例等。

對(duì)目前市面上類似的訂單系統(tǒng)進(jìn)行體驗(yàn)及分析其交互設(shè)計(jì)，完成該系統(tǒng)的原型交互設(shè)計(jì)以及其 UI 設(shè)計(jì)。

根據(jù)業(yè)務(wù)需求，完成改訂單系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)。

搭建該系統(tǒng)的開發(fā)環(huán)境，系統(tǒng)框架，完成主要功能代碼設(shè)計(jì)。

完成服裝 MTM 定制訂單管理系統(tǒng)，對(duì)該系統(tǒng)進(jìn)行系統(tǒng)測(cè)試。

四、需求分析

4.1 功能需求

根據(jù)前期對(duì)某服裝 MTM 定制有限公司的調(diào)研分析了解，該服裝 MTM 定制訂單管理系統(tǒng)需要實(shí)現(xiàn)以下幾個(gè)功能點(diǎn)：

量體設(shè)計(jì)師通過(guò)工號(hào)密碼登陸，可以在該系統(tǒng)添加并管理顧客個(gè)人信息以及對(duì)應(yīng)量體數(shù)據(jù)，根據(jù)顧客的個(gè)人體型及需求進(jìn)行下單，并且可以實(shí)時(shí)查閱歷史定制狀態(tài)。

量體設(shè)計(jì)師可對(duì)不合身的產(chǎn)品進(jìn)行提交回廠維修申請(qǐng)。

財(cái)務(wù)人員可在 PC 后臺(tái)管理系統(tǒng)上進(jìn)行實(shí)時(shí)查閱新的訂單，顧客完成支付轉(zhuǎn)賬后，核對(duì)顧客信息并進(jìn)行支付處理。

后臺(tái)人員對(duì)已支付的訂單進(jìn)行入廠生產(chǎn)，記錄其訂單狀態(tài)；并且對(duì)已生產(chǎn)完成的訂單進(jìn)行發(fā)貨處理，記錄該訂單的發(fā)貨相關(guān)信息。

系統(tǒng)管理員可以在后臺(tái)管理平臺(tái)上查詢訂單的具體信息，對(duì)員工進(jìn)行管理，對(duì)產(chǎn)品進(jìn)行管理；查詢銷售報(bào)表信息。

4.2 涉眾及用例

本系統(tǒng)用例圖，如圖 1 所示，其中上面部分為后臺(tái)管理平臺(tái)，下面部分為 WebApp 服裝定制下單平臺(tái)。該服裝 MTM 定制訂單管理系統(tǒng)的參與者有量體設(shè)計(jì)師、財(cái)務(wù)人員、后勤人員以及系統(tǒng)管理員等。其中，量體設(shè)計(jì)師參與的用例有管理顧客信息，包括管理顧客個(gè)人基本信息以及顧客的量體數(shù)據(jù)、添加訂單、管理合作店、申請(qǐng)維修等用例；財(cái)務(wù)人員參與的用例有查詢訂單和處理支付；后勤人員參與的用例有查看訂單、下單以及發(fā)貨；系統(tǒng)管理參與的用例有查看訂單、管理員工、管理產(chǎn)品和查看銷售報(bào)表。表 1 簡(jiǎn)要地描述了本系統(tǒng)涉及的主要用例。







圖 1 系統(tǒng)用例圖

表 1 用例統(tǒng)計(jì)表

用例名稱	描述

4.3 主要用例的事件流描述

本文對(duì)該系統(tǒng)的 UC2 添加訂單、UC6 處理發(fā)貨這兩核心功能進(jìn)行詳述用例，展示該用例更多的細(xì)節(jié)，并且更為深入。

4.3.1 添加訂單

范圍：某服裝 MTM 定制訂單管理系統(tǒng)

級(jí)別：用戶目標(biāo)

主要參與者：量體設(shè)計(jì)師

涉眾及其關(guān)注點(diǎn)：

量體設(shè)計(jì)師：希望能夠準(zhǔn)確、快速地輸入，而且付款能靈活調(diào)整。因?yàn)榇祟?產(chǎn)品，量體設(shè)計(jì)師可以根據(jù)不同的情況，進(jìn)行不同的定價(jià)。

顧客：希望以最小代價(jià)完成購(gòu)買量身定制的舒適的服裝，量體設(shè)計(jì)師能正確 根據(jù)個(gè)人需求進(jìn)行選購(gòu)添加訂單。

公司：希望準(zhǔn)確地記錄交易，滿足顧客需求。希望能夠自動(dòng)、快速地更新賬 務(wù)和訂單量信息。

廠商：希望盡量提供正確、詳細(xì)的訂單信息。

前置條件：量體設(shè)計(jì)師必須通過(guò)確認(rèn)和認(rèn)證，必須已添加該顧客。

成功保證：存儲(chǔ)訂單信息。

主成功場(chǎng)景：

顧客和量體設(shè)計(jì)師溝通好，確認(rèn)要購(gòu)買某產(chǎn)品。

量體設(shè)計(jì)師在顧客列表中選擇該顧客，開始一次新的訂單添加。

量體設(shè)計(jì)師逐條選擇相應(yīng)的產(chǎn)品的系列、款式、顏色等信息，確認(rèn)產(chǎn)品添加到訂單上。

產(chǎn)品添加完成后，系統(tǒng)顯示建議累積額。

量體設(shè)計(jì)師輸入應(yīng)付金額。

量體設(shè)計(jì)師提交訂單添加，完成本次訂單添加。

擴(kuò)展：

*a. 系統(tǒng)在任意時(shí)刻失敗:

為了保證后臺(tái)數(shù)據(jù)的完整性，要保證訂單信息全部填寫完成才可以提交訂單信息。在未填寫完之前，或者提交失敗需重新進(jìn)行添加訂單處理。

量體設(shè)計(jì)師刷新系統(tǒng)頁(yè)面，必要時(shí)更換瀏覽器重新登錄系統(tǒng)，在有網(wǎng)絡(luò)的環(huán)境下重新進(jìn)行對(duì)該顧客進(jìn)行添加訂單。

*b. 顧客中途撤銷添加訂單:

量體設(shè)計(jì)師只需直接確認(rèn)返回主頁(yè)面，不對(duì)該訂單繼續(xù)添加保存。

特殊需求：

不同量體設(shè)計(jì)師手機(jī)尺寸分辨率不一，系統(tǒng)需響應(yīng)式適用不同分辨率手機(jī)。

系統(tǒng)在提交訂單之前需驗(yàn)證訂單數(shù)據(jù)的完整性，有效性，并給予適當(dāng)?shù)奶嵝选?br>
技術(shù)與數(shù)據(jù)變?cè)恚簾o(wú)

發(fā)生頻率：可能會(huì)不斷地發(fā)生。

4.3.2 處理發(fā)貨

范圍：服裝 MTM 定制訂單管理系統(tǒng)

級(jí)別：用戶目標(biāo)

主要參與者：后勤人員

涉眾及其關(guān)注點(diǎn)：

后勤：希望能夠準(zhǔn)確、快速地查詢到要發(fā)貨的訂單，能準(zhǔn)確、快速地入訂單 的發(fā)貨信息。

顧客：希望能準(zhǔn)確并盡快地收到商品。

公司：希望準(zhǔn)確地記錄發(fā)貨信息。希望能夠自動(dòng)、快速地更新訂單狀態(tài)。

前置條件：量體設(shè)計(jì)師必須通過(guò)確認(rèn)和認(rèn)證；商品已生產(chǎn)完成運(yùn)達(dá)企業(yè)，并貼好相應(yīng)的訂單信息，商品準(zhǔn)備發(fā)貨；顧客已付款。

成功保證：完整記錄商品的發(fā)貨相關(guān)信息，更新訂單狀態(tài)。

主成功場(chǎng)景：

商品已生產(chǎn)完成送達(dá)企業(yè)，做好發(fā)貨的準(zhǔn)備。

后勤人員根據(jù)商品包裝上貼的訂單號(hào)，查找該訂單記錄。

查閱改訂單的具體信息，核對(duì)訂單信息。

根據(jù)發(fā)貨方式，填寫發(fā)貨信息。

提交發(fā)貨信息，更新訂單狀態(tài)。

擴(kuò)展：

*a. 系統(tǒng)在任意時(shí)刻失敗:

為了保證后臺(tái)數(shù)據(jù)的完整性，要保證訂單信息全部填寫完成才可以提交發(fā)貨信息。在未填寫完之前，或者提交失敗需重新提交發(fā)貨信息。

后臺(tái)人員刷新系統(tǒng)頁(yè)面，必要時(shí)更換瀏覽器重新登錄系統(tǒng)，在有網(wǎng)絡(luò)的環(huán)境下重新進(jìn)行進(jìn)行該訂單發(fā)貨處理。

*b. 在系統(tǒng)查找不到該訂單信息或訂單狀態(tài)非“正在生產(chǎn)”:5

根據(jù)商品包裝的封面信息，電話聯(lián)系對(duì)應(yīng)的量體設(shè)計(jì)師，核對(duì)該訂單，檢查訂單出錯(cuò)情況。若存在，直接通過(guò)設(shè)計(jì)師進(jìn)行發(fā)貨。重新記錄該訂單信息。

技術(shù)與數(shù)據(jù)變?cè)恚?br>
發(fā)貨單號(hào)系統(tǒng)根據(jù)上一條發(fā)貨單號(hào)自動(dòng)遞增生成發(fā)貨單號(hào)。

發(fā)生頻率：可能會(huì)不斷地發(fā)生。

4.4 非功能需求分析

軟件的非功能性需求是指軟件產(chǎn)品為滿足用戶業(yè)務(wù)需求而必須具有且除功能需求以外的特性(Roger Pressman, 2007)。根據(jù) Software Characteristic 的 ISO 9126 列表,這些特性包括可靠性、可用性、有效性、可維護(hù)性、可移植性等方面。這些方面的特性是軟件產(chǎn)品運(yùn)行穩(wěn)定、可靠、易于使用與維護(hù)的基礎(chǔ)。針對(duì)本系統(tǒng)具體的非功能需求分析如下：

易用性：系統(tǒng)應(yīng)建立友好的用戶界面，舒適符合人類日常行為的交互方式，操作簡(jiǎn)單、直觀、靈活、易于學(xué)習(xí)掌握。量體設(shè)計(jì)師能很便捷添加顧客數(shù)據(jù)并且對(duì)其進(jìn)行下單。系統(tǒng)管理員等能很方便查閱訂單等。

有效性：該系統(tǒng)需要填寫大量的表單，在記錄顧客量體數(shù)據(jù)時(shí)，需要填寫大量的數(shù)據(jù)，并且這些數(shù)據(jù)比較重要，錯(cuò)誤數(shù)據(jù)會(huì)造成較大的影響。因此該系統(tǒng)必須對(duì)填寫的數(shù)據(jù)進(jìn)行完整性以及有效性的驗(yàn)證。

跨平臺(tái)響應(yīng)式：移動(dòng)端訂單系統(tǒng)需在 Android 和 iOS 同時(shí)能運(yùn)行，并且能響應(yīng)不同分辨率的手機(jī)。

可維護(hù)性：系統(tǒng)應(yīng)考慮日后的擴(kuò)充，模塊之間低耦合，便于維護(hù)。

五、系統(tǒng)總體設(shè)計(jì)

5.1 功能模塊劃分

本系統(tǒng)主要分為登陸模塊、顧客模塊、合作店模塊、訂單模塊、員工模塊、產(chǎn)品模塊、圖表統(tǒng)計(jì)模塊、支付模塊、下單模塊、發(fā)貨模塊、維修模塊等 11 個(gè)模塊。表 2 描述了每個(gè)功能模塊的主要實(shí)現(xiàn)的功能。

表 2 功能模塊表

模塊名稱	功能描述

圖 2 系統(tǒng)功能結(jié)構(gòu)圖

本系統(tǒng)主要分為兩個(gè)部分，其中包括后臺(tái)管理平臺(tái)，已經(jīng) WebApp 移動(dòng)端下單系統(tǒng)。后臺(tái)管理平臺(tái)提供給財(cái)務(wù)人員、后勤人員以及系統(tǒng)管理員進(jìn)行使用。WebApp 移動(dòng)端是提供給量體設(shè)計(jì)師進(jìn)行使用。本系統(tǒng)具體功能結(jié)構(gòu)圖，如圖 2 所示。

5.2 系統(tǒng)架構(gòu)設(shè)計(jì)

系統(tǒng)軟件架構(gòu)圖如圖 3 所示，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的前端頁(yè)面 UI 設(shè)計(jì)主要采用 HTML5、CSS3 原生實(shí)現(xiàn)，CSS3 中的 Media Query 可以實(shí)現(xiàn)響應(yīng)式，解決移動(dòng)設(shè)備屏幕自適應(yīng)的問(wèn)題。通過(guò) JavaScript 實(shí)現(xiàn)前端業(yè)務(wù)邏輯以及交互設(shè)計(jì)，其中本應(yīng)用使用了 jQuery，AngularJS 這些 js 框架來(lái)更方便實(shí)現(xiàn)前端的業(yè)務(wù)邏輯。為了實(shí)現(xiàn)前后端分離，提高開發(fā)效率，頁(yè)面的數(shù)據(jù)都通過(guò) AJAX 請(qǐng)求完成，請(qǐng)求的參數(shù)和響應(yīng)數(shù)據(jù)都以 JSON 格式傳遞。

系統(tǒng)的后臺(tái)采用一個(gè)新的 Web server 解決方案——Node.js 平臺(tái)，其支持后端運(yùn)行 JavaScript，采用事件驅(qū)動(dòng)模型、異步編程風(fēng)格。后端 Web 框架采用的是第三方模塊 Express(BYVoid, 2012)，這樣便可將注意力集中在業(yè)務(wù)邏輯上的編碼工作，而不需要關(guān)心請(qǐng)求的解析。Express 框架符合 MVC (Model-View-Controller)設(shè)計(jì)模式，并且，對(duì) RESTFul 風(fēng)格的 Web 應(yīng)用和路由管理有非常好的支持。

本系統(tǒng)采用 MongoDB 數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)系統(tǒng)中的用戶數(shù)據(jù)?；?WebApp 服裝 MTM 訂單管理系統(tǒng)的前端通過(guò) HTTP 請(qǐng)求，從后端獲取頁(yè)面，頁(yè)面呈現(xiàn)之后，通過(guò) AJAX 請(qǐng)求頁(yè)面中的相關(guān)數(shù)據(jù)，后端 Node.js 從數(shù)據(jù)庫(kù)查詢出數(shù)據(jù)，然后再根據(jù)模板嵌入到網(wǎng)頁(yè)中（GET 請(qǐng)求）。用戶提交的數(shù)據(jù)同樣是通過(guò) AJAX 請(qǐng)求（POST 請(qǐng)求）的方式發(fā)送到服務(wù)器端，后臺(tái)通過(guò) Node.js 的業(yè)務(wù)邏輯處理函數(shù)對(duì) HTTP 請(qǐng)求做相應(yīng)的處理，并將處理結(jié)果存儲(chǔ)在 MongoDB 數(shù)據(jù)庫(kù)中。

若直接使用 MongoDB 模塊雖然強(qiáng)大而靈活，但有些繁瑣，本應(yīng)用使用了 Node.js 和 MongoDB 的連接器 Mongoose。Mongoose 是 MongoDB 的一個(gè)對(duì)象模型工具，是基于 Node-MongoDB-Native 開發(fā)的 MongoDB Node.js 驅(qū)動(dòng)，可以在異步的環(huán)境下執(zhí)行。同時(shí)它也是針對(duì) MongoDB 操作的一個(gè)對(duì)象模型庫(kù)，封裝了 MongoDB 對(duì)文檔的的一些增刪改查等常用方法，讓 Node.js 操作 MongoDB 數(shù)據(jù)庫(kù)變得更加靈活簡(jiǎn)單。







圖 3 系統(tǒng)軟件架構(gòu)圖

5.3 系統(tǒng)包結(jié)構(gòu)

本系統(tǒng)采用 MVC 開發(fā)設(shè)計(jì)模式，MVC 英文即 Model-View-Controller（模型－視圖－控制器），即把一個(gè)應(yīng)用的輸入、處理、輸出流程按照 Model、View、Controller 的方式進(jìn)行分離，這樣一個(gè)應(yīng)用被分成三部分——模型、視圖和控制器。所謂 MVC 設(shè)計(jì)模式，是指一種劃分系統(tǒng)功能的方法，是為那些需要為同樣的數(shù)據(jù)提供多個(gè)視圖的應(yīng)用程序而設(shè)計(jì)的，它實(shí)現(xiàn)了數(shù)據(jù)層與表示層的分離，特別適用于開發(fā)與用戶圖形界面有關(guān)的應(yīng)用程序（李霞，2004）。







圖 4 系統(tǒng)包結(jié)構(gòu)圖

系統(tǒng)包結(jié)構(gòu)圖如圖 4 所示，其中每個(gè)包的作用如下：

view 包：直接面向用戶的頁(yè)面展示，展示頁(yè)面，顯示數(shù)據(jù)。其中包括 CMS（后臺(tái)管理系統(tǒng)）模塊和 WebApp 模塊。

routes 包：路由控制，路由處理是平臺(tái)能夠正確運(yùn)行的重要部分，它直接影響到的顯示方式。它包含了服務(wù)器建構(gòu)、解析，并將解析后的邏輯參數(shù)分發(fā)到邏輯模塊。

controllers 包：該包存放邏輯處理模塊的類，負(fù)責(zé)對(duì)用戶操作的具體處理，主要將用戶的基本操作轉(zhuǎn)變?yōu)橄鄳?yīng)的數(shù)據(jù)，并將結(jié)果送至 view 層。該層需要實(shí)現(xiàn)用戶與管理操作的邏輯處理。

• util 包：存放了本系統(tǒng)用到的工具類，封裝一些通用的處理過(guò)程等。
• dao 包：dao 層完成數(shù)據(jù)庫(kù)的增刪查改等實(shí)現(xiàn)細(xì)節(jié)，將底層數(shù)據(jù)訪問(wèn)的操作和業(yè)務(wù)邏輯分離開，對(duì)業(yè)務(wù)邏輯分離開，對(duì)業(yè)務(wù)層提供面向?qū)ο蟮臄?shù)據(jù)訪問(wèn)接口。
• models 包：該層實(shí)現(xiàn)連接數(shù)據(jù)庫(kù)，對(duì)數(shù)據(jù)庫(kù)表進(jìn)行操作，如新建表，引用表等。

5.4 關(guān)鍵技術(shù)簡(jiǎn)介及應(yīng)用

5.4.1 Node.js

Node.js 是建立在 Chrome V8 引擎之上的平臺(tái)，它用于構(gòu)建高速、可擴(kuò)展的 Web 應(yīng)用程序(Stefan Tilkoy，Steve Vinoski, 2010)。Node.js 采用事件驅(qū)動(dòng)(even-driven)、異步非阻塞(non-blocking)編程模型，同時(shí)提供了諸多系統(tǒng)級(jí)別的 API，如文件操作等(Reuven M.Lerner，2011)。這也使得它在高并發(fā)、數(shù)據(jù)密集型實(shí)時(shí) Web 應(yīng)用中表現(xiàn)的更加輕量、高效和完美。而且，Node.js 本身就支持構(gòu)建 HTTP 服務(wù)器，而不需要借助第三方的 Web 服務(wù)器，所以用 Node.js 開發(fā)的 Web 應(yīng)用程序部署非常方便、高效（王金龍，宋斌，丁銳，2015）。

目前國(guó)內(nèi)外許多公司都有使用 Node.js 的項(xiàng)目案例。如 LinkedIn 使用 Node.js 作為服務(wù)接口解決了移動(dòng)應(yīng)用的問(wèn)題，淘寶使用 Node.js 為“淘寶指數(shù)”提供服務(wù)，雅虎使用 Node.js 作為雅虎曼哈頓的基礎(chǔ)。許多公司也為 Node.js 的發(fā)展做出了一定的貢獻(xiàn)，如 Microsoft 在 Windows Azure 上 Node.js 為提供了云托管應(yīng)用。

5.4.2 MongoDB

MongoDB 是一個(gè)支持分布式文檔存儲(chǔ)的數(shù)據(jù)庫(kù)，其主要目的是為 Web 應(yīng)用程序提供高性能、高可擴(kuò)展性的數(shù)據(jù)存儲(chǔ)服務(wù)。它是 10gen 團(tuán)隊(duì)于 2009 年推出的，使用 C++ 語(yǔ)言編寫的一個(gè)項(xiàng)目(Kristina, Chodorow, Michael Dirolf, 2010)。在非關(guān)系型數(shù)據(jù)庫(kù)中，MongoDB 的功能是非常豐富的，也是一個(gè)面向集合、文檔型、模式自由的數(shù)據(jù)庫(kù)。面向集合(Collection-Oriented)也是關(guān)系型數(shù)據(jù)庫(kù)中的概念，意即數(shù)據(jù)是分組存儲(chǔ)在數(shù)據(jù)庫(kù)中的，類似關(guān)系型數(shù)據(jù)庫(kù)中表；而這些數(shù)據(jù)分組又是一種文檔型(Document)的格式，文檔是由一組鍵值對(duì)構(gòu)成，其中鍵用于唯一的標(biāo)識(shí)一個(gè)文檔，值可以是各種復(fù)雜的數(shù)據(jù)類型，我們稱這種數(shù)據(jù)存儲(chǔ)格式為 BSON (Binary Serialized Document Format) (Zachary Parker，Scott Poe，Susan V，2013)；

MongoDB 具有豐富的數(shù)據(jù)模型、容易擴(kuò)展且不犧牲速度以及便于管理等特點(diǎn)。它是面向文檔、模式自由的數(shù)據(jù)庫(kù)管理系統(tǒng)，在海量數(shù)據(jù)存儲(chǔ)方面有比較高的讀寫效率。（王光磊，2011）在本文，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)需要存儲(chǔ)大量的用戶量體數(shù)據(jù)，由于業(yè)務(wù)的需求量體數(shù)據(jù)也存在擴(kuò)展的需求，因此 MongoDB 是非常適合作為本文的基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的數(shù)據(jù)庫(kù)。

5.4.3 AngularJS

AngularJS 是一款來(lái)自 Google 的前端 JavaScript 框架，也是 SPA（single-page-application，單頁(yè)應(yīng)用）框架（董英茹，2015）。AngularJS 框架的體積非常小，但是設(shè)計(jì)理念和功能卻非常強(qiáng)大，極大地簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)，它快速成為了 JavaScript 的主流框架，幫助開發(fā)者從事 Web 開發(fā)。AngularJS 具備以下幾大特點(diǎn)：

數(shù)據(jù)的雙向綁定：view 層的數(shù)據(jù)和 model 層的數(shù)據(jù)是雙向綁定的，其中之一發(fā)生更改，另一方會(huì)隨之變化。相對(duì)過(guò)去的編碼方式，會(huì)節(jié)省大量的代碼量，這也是 Angular 最常用和最實(shí)用的特性。

MVVM：結(jié)合最基本的 MVC 設(shè)計(jì)模式構(gòu)建客戶端 Web 應(yīng)用。但不是傳統(tǒng)意義上的 MVC，而是 MVVM（Model - View - ViewModel），MVVM 采用雙向綁定(data-binding)：View 的變動(dòng)，自動(dòng)反映在 ViewModel，且每個(gè)模塊的代碼擁有自己的作用域。

依賴注入：根據(jù)需要注入特定的依賴對(duì)象，使代碼和程序松散耦合，可維護(hù)，可測(cè)試。

指令：指令可以用來(lái)創(chuàng)建自定義的標(biāo)簽，它們可以用來(lái)裝飾元素或者操作 DOM 屬性，也可以作為標(biāo)簽、屬性、注釋和類名使用。

基于 WebApp 服裝 MTM 訂單管理系統(tǒng)需要大量的數(shù)據(jù)交互，AngularJS 雙向數(shù)據(jù)綁定的特點(diǎn)非常便于系統(tǒng)的操作，以及數(shù)據(jù)查詢的功能。相對(duì) jQuery 庫(kù)，本系統(tǒng)使用 AngularJS 框架實(shí)現(xiàn)前端邏輯，更便捷，并將會(huì)節(jié)省 50% 左右的代碼量，代碼邏輯也更顯清晰。

六、系統(tǒng)詳細(xì)設(shè)計(jì)

6.1 登陸模塊

圖 5 登陸模塊的順序圖

登陸模塊涉及 login 類、account 類、user 類等。員工輸入員工號(hào)以及密碼，通過(guò) login 類，account 類，user 類層層訪問(wèn)，獲取員工號(hào)對(duì)應(yīng)的員工信息，login 類根據(jù)獲取到的員工信息匹配對(duì)應(yīng)的密碼是否正確，不正確則需要重新輸入，正確則通過(guò)登錄。類之間的交互的發(fā)生時(shí)序如圖 5 登錄模塊順序圖所示。

6.2 添加訂單模塊

圖 6 添加訂單模塊順序圖

添加訂單模塊的實(shí)現(xiàn)細(xì)節(jié)：系統(tǒng)先調(diào)用 product 類的 getProducts()方法獲取產(chǎn)品列表，用戶選擇產(chǎn)品和相光信息，然后將單條產(chǎn)品信息作為訂單項(xiàng)信息，以改訂單項(xiàng)信息作為參數(shù)調(diào)用 orderItem 類的 setOrderItem()方法，添加到訂單項(xiàng)，直到添加完成，最后填寫完應(yīng)付金額，創(chuàng)建新的訂單。其中涉及的類有：addOrder 類、product 類、orderItem 類以及 order 類，類之間的交互的發(fā)生時(shí)序如圖 6 登錄模塊順序圖所示。

6.3 顧客模塊

圖 7 顧客模塊順序圖

在 WebAPP 端，量體設(shè)計(jì)師可以添加顧客，查看歸屬自己的顧客。添加顧客，除了填寫顧客基本信息，還需選擇顧客所在的合作店。系統(tǒng)先要調(diào)用 partner 類的 getPartners()方法獲取合作店列表。量體設(shè)計(jì)師填寫完新顧客的數(shù)據(jù)之后，調(diào)用 customer 類的 setCustomer()方法，將新顧客的數(shù)據(jù)作為參數(shù)，setCustomer()方法將其保存到數(shù)據(jù)庫(kù)中。

量體設(shè)計(jì)師在顧客類別選擇某顧客，indexPage()類通過(guò)選擇該顧客的 customerId 向 customer 類獲取顧客信息，然后 customer 類返回對(duì)于的顧客信息，indexPage 類將獲取到的 customer 類傳到前端頁(yè)面展示。

6.4 發(fā)貨模塊

圖 8 發(fā)貨模塊順序圖

發(fā)貨模塊，后勤人員通過(guò)訂單號(hào)從訂單列表中查找指定訂單，然后修改訂單狀態(tài)，并添加發(fā)貨信息，如發(fā)貨方式，快遞信息等。其中涉及 orderPage 類、order 類、delivery 類等。orderPage 類以 orderId 為參數(shù)調(diào)用 findOrder()方法，findOrder()方法調(diào)用 order 類的 getOrder()方法獲取訂單信息，后勤人員根據(jù)返回顯示的 order 信息核對(duì)貨物信息，若無(wú)誤，填寫發(fā)貨單信息。orderPage 類以前端傳遞的發(fā)貨信息作為參數(shù)調(diào)用 newDelivery()方法，newDelivery()方法調(diào)用 delivery 類的 setDelivery()方法將該條發(fā)貨單信息存到數(shù)據(jù)庫(kù)中，最后調(diào)用 order 類的 changeState()方法，將訂單的狀態(tài)修改為“已發(fā)貨”狀態(tài)。

6.5 數(shù)據(jù)庫(kù)設(shè)計(jì)

圖 9 數(shù)據(jù)庫(kù)總體 E-R 圖

對(duì)數(shù)據(jù)的有效組織和管理，是實(shí)現(xiàn)基于 WebApp 服裝 MTM 訂單管理系統(tǒng)的中心環(huán)節(jié)。有效的數(shù)據(jù)組織取決于數(shù)據(jù)庫(kù)的設(shè)計(jì)。而有效的數(shù)據(jù)管理則依賴于數(shù)據(jù)庫(kù)管理系統(tǒng)(DBMS)的選擇。

基于本文對(duì)系統(tǒng)的功能需求分析已經(jīng)系統(tǒng)功能模塊的劃分，基于 WebApp 服裝 MTM 訂單管理系統(tǒng)設(shè)計(jì)的表有：?jiǎn)T工表、顧客表、量體數(shù)據(jù)、合作店表、產(chǎn)品表、訂單表、訂單項(xiàng)表、支付表、下單表、發(fā)貨表、維修表等 11 個(gè)數(shù)據(jù)庫(kù)表。系統(tǒng)數(shù)據(jù)庫(kù)總體 E-R 圖如圖 9 所示，數(shù)據(jù)庫(kù)表詳情見附錄數(shù)據(jù)庫(kù)表。

數(shù)據(jù)庫(kù)表之間具體關(guān)系如圖 10 所示。







圖 10 數(shù)據(jù)庫(kù)表關(guān)系圖

七、系統(tǒng)實(shí)現(xiàn)

7.1 WebApp 移動(dòng)端實(shí)現(xiàn)

7.1.1 登陸界面

WebApp 頁(yè)面支持響應(yīng)適配不同分辨率的手機(jī)，iPad 等移動(dòng)設(shè)備。WebApp 移動(dòng)端量體設(shè)計(jì)師通過(guò)輸入工號(hào)以及密碼后，點(diǎn)擊登陸按鈕即可進(jìn)入系統(tǒng)。若出現(xiàn)驗(yàn)證失敗，如工號(hào)不存在，或者密碼錯(cuò)誤等情況會(huì)出現(xiàn) 3 秒的錯(cuò)誤提醒框；若正確則直接進(jìn)入系統(tǒng)。登陸界面如圖 11 所示。













圖 11 WebApp 登陸界面

7.1.2 添加用戶界面

WebAPP 端主要的業(yè)務(wù)流程就是添加顧客，填寫量體數(shù)據(jù)，添加訂單。其中先進(jìn)行添加顧客，因此系統(tǒng)首頁(yè)便是添加顧客的界面，如圖 12。為了確保數(shù)據(jù)準(zhǔn)確性，當(dāng)填寫數(shù)據(jù)中生育選項(xiàng)為未生育的時(shí)候，產(chǎn)后輸入框不可填。新添加的顧客要選擇對(duì)于的合作店，合作店列表從后臺(tái)數(shù)據(jù)庫(kù)獲取。

點(diǎn)擊右上角保存的時(shí)候，如果數(shù)據(jù)不完整或部分?jǐn)?shù)據(jù)無(wú)效則會(huì)出現(xiàn)錯(cuò)誤提醒框，并不進(jìn)行保存。若數(shù)據(jù)有效，則將數(shù)據(jù)庫(kù)保存到數(shù)據(jù)庫(kù)。保存成功后，界面出現(xiàn)對(duì)話框，引導(dǎo)是否進(jìn)行下一步操作，填寫該顧客的量體數(shù)據(jù)。點(diǎn)擊“取消”，則停留在該頁(yè)面，若點(diǎn)擊確認(rèn)這跳轉(zhuǎn)到填寫量體數(shù)據(jù)的界面。



















圖 12 添加用戶界面

7.1.3 錄入用戶量體數(shù)據(jù)界面

當(dāng)為老顧客填寫或者修改量體數(shù)據(jù)，量體設(shè)計(jì)師可點(diǎn)擊首頁(yè)的左上角，界面將滑出導(dǎo)航；點(diǎn)擊“我的顧客”，從顧客列表中選擇指定顧客，然后進(jìn)入量體數(shù)據(jù)界面。由于量體數(shù)據(jù)較多，量體數(shù)據(jù)界面的設(shè)計(jì)把數(shù)據(jù)進(jìn)行分類，并采用了分塊填寫。由此，界面更方便量體設(shè)計(jì)師的填寫。

當(dāng)有修改數(shù)據(jù)而未保存的時(shí)候，量體設(shè)計(jì)師點(diǎn)擊了左上角的返回鍵的時(shí)候，會(huì)出現(xiàn)對(duì)話框，數(shù)據(jù)尚未保存。這樣避免了填寫的數(shù)據(jù)因未保存而丟失。若保存，頁(yè)面則引導(dǎo)到選購(gòu)頁(yè)面，如圖 13 所示。



















圖 13 錄入用戶量體數(shù)據(jù)頁(yè)面

7.1.4 添加訂單界面

量體設(shè)計(jì)師添加訂單需要選擇顧客所需的產(chǎn)品，并根據(jù)顧客的需求選擇是否添加聚攏帶，服裝的受壓程度。產(chǎn)品有分系列，然后每個(gè)系列都有各自的款式，還有不同的顏色，不同的面料。選購(gòu)界面通過(guò)層層選擇，先選擇系列，然后款式中只能選擇該系列的款式，如圖 14。數(shù)據(jù)填寫完整之后，進(jìn)行添加訂單，頁(yè)面顯示統(tǒng)計(jì)的建議金額，量體設(shè)計(jì)師可以根據(jù)具體情況填寫優(yōu)惠金額。最后完成訂單的添加。添加成功后返回首頁(yè)，準(zhǔn)備開始新一輪的訂單。



















圖 14 添加訂單頁(yè)面

7.2 后臺(tái)管理系統(tǒng)實(shí)現(xiàn)

7.2.1 支付處理界面

財(cái)務(wù)人員登錄后，界面會(huì)出現(xiàn)所有的訂單列表，為了方便查看“等待支付”狀態(tài)的訂單以及“已支付訂單”，點(diǎn)擊右上角按鈕可進(jìn)行刷選。在訂單類別中，財(cái)務(wù)人員點(diǎn)擊去支付，顯示訂單詳情，并有“確認(rèn)支付”按鈕，如圖 14。若該訂單非“等待支付”狀態(tài)，則按鈕點(diǎn)擊無(wú)效。

財(cái)務(wù)人員點(diǎn)擊“確認(rèn)支付”后，該訂單狀態(tài)被改為“已支付”。頁(yè)面數(shù)據(jù)也被刷新。







圖 15 支付處理頁(yè)面

7.2.2 產(chǎn)品管理界面

系統(tǒng)管理員可對(duì)產(chǎn)品進(jìn)行管理，查看產(chǎn)品，添加產(chǎn)品，修改產(chǎn)品，刪除不再生產(chǎn)的產(chǎn)品。當(dāng)系統(tǒng)管理員點(diǎn)擊某條產(chǎn)品的修改按鈕，界面則出現(xiàn)修改窗口，如圖 16 所示，添加產(chǎn)品窗口類似。













圖 17 產(chǎn)品管理頁(yè)面

7.2.3 圖表統(tǒng)計(jì)界面

圖 18 圖表統(tǒng)計(jì)界面

為了方便企業(yè)更方便了解銷售情況，系統(tǒng)管理員可選擇指定時(shí)間范圍，查看其月度銷售情況，通過(guò)直方圖的形式展示，可以更直觀體現(xiàn)每個(gè)月的銷售情況，以及每個(gè)月之間的業(yè)績(jī)對(duì)比。同時(shí)，系統(tǒng)管理員也可以查閱合作店的銷售的情況或設(shè)計(jì)師的銷售業(yè)情況，查看業(yè)績(jī)排名，方便企業(yè)進(jìn)行績(jī)效獎(jiǎng)勵(lì)，如圖 18 所示。

八、總結(jié)與展望

8.1 總結(jié)

服裝 MTM 定制行業(yè)在不斷發(fā)展，市場(chǎng)份額有望大幅增長(zhǎng)，越來(lái)越多的人將會(huì)選擇高性價(jià)比的個(gè)性定制。服裝 MTM 定制行業(yè)通過(guò)紙質(zhì)記錄數(shù)據(jù)的傳統(tǒng)模式，將有阻于該行業(yè)的發(fā)展。服裝 MTM 企業(yè)信息化將大力推動(dòng)該行業(yè)的發(fā)展。

本文通過(guò)對(duì)服裝 MTM 的行業(yè)模式進(jìn)行深入了解，熟悉對(duì)整個(gè)業(yè)務(wù)流程，為服裝 MTM 定制行業(yè)設(shè)計(jì)一套基于 WebApp 服裝定制管理系統(tǒng)。WebAPP 能輕松跨平臺(tái)、開發(fā)效率高成本低、應(yīng)用更豐富、無(wú)需安裝和更新，只需通過(guò)手機(jī)瀏覽器打開即可。通過(guò) WebApp 移動(dòng)端使用本系統(tǒng)，量體設(shè)計(jì)師將擺脫紙張記錄數(shù)據(jù)帶來(lái)的諸多不便。

基于 WebApp 服裝 MTM 訂單管理系統(tǒng)，為服裝 MTM 定制企業(yè)信息化。量體設(shè)計(jì)師可通過(guò)本系統(tǒng)添加并管理顧客個(gè)人信息以及對(duì)應(yīng)量體數(shù)據(jù)，根據(jù)顧客的個(gè)人體型及需求進(jìn)行下單，并且可以實(shí)時(shí)查閱歷史定制狀態(tài)。量體設(shè)計(jì)師還可以對(duì)不合身的產(chǎn)品進(jìn)行提交回廠維修申請(qǐng)；財(cái)務(wù)人員可在 PC 后臺(tái)管理系統(tǒng)核對(duì)顧客信息并進(jìn)行支付處理；后勤人員可在該系統(tǒng)進(jìn)行對(duì)訂單處理下單以及發(fā)貨；系統(tǒng)管理員可以在后臺(tái)管理平臺(tái)上查詢訂單的具體信息，對(duì)員工進(jìn)行管理，對(duì)產(chǎn)品進(jìn)行管理，查詢銷售報(bào)表信息等。

8.2 展望

基于 WebAPP 服裝 MTM 定制訂單管理系統(tǒng)使服裝 MTM 定制行業(yè)從傳統(tǒng)的工業(yè)模式邁向企業(yè)信息化。希望本系統(tǒng)能上線使用，解決服裝 MTM 定制企業(yè)傳統(tǒng)業(yè)務(wù)模式帶來(lái)的問(wèn)題，并且不斷進(jìn)行完善。

本系統(tǒng)現(xiàn)階段仍存在不足需要改進(jìn)的地方。本系統(tǒng)未針對(duì)系統(tǒng)安全性進(jìn)行測(cè)試，部分?jǐn)?shù)據(jù)會(huì)展示在前端的代碼，可能出現(xiàn)通過(guò)前端代碼惡意篡改系統(tǒng)數(shù)據(jù)；量體設(shè)計(jì)師需要填寫大量的量體數(shù)據(jù)。量體數(shù)據(jù)的輸入只做了數(shù)字的判斷，以及輸入長(zhǎng)度的判斷，未能做精確的有效驗(yàn)證，如某個(gè)部位的測(cè)量結(jié)果應(yīng)符合其他部位數(shù)據(jù)的結(jié)果情況的一定范圍內(nèi)；本系統(tǒng)目前尚未考慮數(shù)據(jù)冗余等情況。

九、參 考 文 獻(xiàn)

• 陳勇.WebApp 現(xiàn)狀分析與展望[J].通信與信息技術(shù)，2012，(4)：77-78.
• 董英茹.簡(jiǎn)談 Angular JS 在下一代 Web 開發(fā)中的應(yīng)用[J].軟件工程師，2015，18(5)：30-31
• 金周銀，李仁旺.服裝企業(yè)度身定制的客戶訂單管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].工業(yè)控制計(jì)算 機(jī)，2010，23(3)：79-83.
• 李霞.MVC 設(shè)計(jì)模式的原理及實(shí)現(xiàn)[D].吉林：吉林大學(xué)，2004.
• 劉鐵峰.WebAp 框架發(fā)展趨勢(shì)及現(xiàn)狀分析[J].程序員，2012，(4)：30-34.
• 任中文，張華，閆明松.MVC 模式研究的綜述[J].計(jì)算機(jī)應(yīng)用，2004，24(10)：1-4.
• 王楠楠，陳建偉.國(guó)內(nèi)外服裝 MTM 的比較及國(guó)內(nèi)應(yīng)用現(xiàn)狀分析[J].山東紡織經(jīng)濟(jì)，2010， (11)：79-108.
• 王光磊.MongoDB 數(shù)據(jù)庫(kù)的應(yīng)用研究和方案優(yōu)化[J].中國(guó)科技信息，2011，(20)：93-96．
• 王金龍，宋斌，丁銳. Node.js：一種新的 Web 應(yīng)用構(gòu)建技術(shù)[J].現(xiàn)代電子技術(shù)，2015，38(6)： 70-73.
• 文軍，張思峰，李濤柱.移動(dòng)互聯(lián)網(wǎng)技術(shù)發(fā)展現(xiàn)狀及趨勢(shì)綜述[J].通信技術(shù)，2014，47(19)： 977-984.
• 楊靜.定制服裝實(shí)現(xiàn)性價(jià)比逆襲[R].杭州：杭州日?qǐng)?bào)，2016.
• 周森鵬，陸正球，張城，王溢達(dá).基于 HTML5 的企業(yè) WebApp 設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)， 2015，(4):49-52.
• 周旭東.MTM 與制服定制最優(yōu)裁剪方案的研究[J].揚(yáng)州職業(yè)大學(xué)學(xué)報(bào)，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 數(shù)據(jù)庫(kù)表

附表 1 員工表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 2 顧客表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 3 合作店表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 4 產(chǎn)品表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 5 量體數(shù)據(jù)表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

（量體數(shù)據(jù)表涉及字段過(guò)多，此處只列出部分字段）

附表 6 訂單表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 7 訂單項(xiàng)表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 8 支付表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 9 下單表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 10 發(fā)貨表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

（續(xù)上表）

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

附表 11 維修表

字段名	數(shù)據(jù)類型	說(shuō)明	描述	備注

十一、致 謝

在校的這四年時(shí)間里很感謝老師們對(duì)我的淳淳教誨，是你們教會(huì)了我們勤奮學(xué)習(xí)，誠(chéng)實(shí)做人，踏實(shí)做事，以寬容之心面對(duì)生活。指引著我們沿著正確方向前進(jìn)。在點(diǎn)滴匯聚中使我逐漸形成正確、成熟的人生觀、價(jià)值觀。特別要感謝我的指導(dǎo)老師，鄧成劍老師給予我很大的幫助。

感謝我的家人，我永遠(yuǎn)的支持者，正是在你們殷切目光的注視下，我才一步步的完成了求學(xué)生涯。沒(méi)有你們，就不會(huì)有今天的我！我一直很感謝你們，讓我擁有一個(gè)如此溫馨的家庭，讓我所有的一切都可以在你們這里得到理解與支持，得到諒解和分擔(dān)。你們的支持和鼓勵(lì)是我前進(jìn)的動(dòng)力。

衷心感謝我的導(dǎo)師鄧成劍老師。本文的研究工作是在鄧成劍老師的悉心指導(dǎo)下完成的，從論文的選題、研究計(jì)劃的制定、技術(shù)路線的選擇到系統(tǒng)的開發(fā)研制，各個(gè)方面都離不開鄧成劍老師熱情耐心的幫助和教導(dǎo)。鄧成劍老師認(rèn)真的工作態(tài)度，誠(chéng)信寬厚的為人處世態(tài)度，都給我留下了難以磨滅的印象，也為我今后的工作樹立了優(yōu)秀的榜樣。

最后，我衷心的感謝各位評(píng)委老師百忙之中抽空審閱我的畢業(yè)論文，謝謝各位評(píng)委老師的批評(píng)和指導(dǎo)。