葉敏　陶然

摘要：加工類產品的設計類作品一般包括設計圖、工藝流程、效果圖、解釋說明、尺寸、視頻、聯(lián)系人、材料描述等大量信息資料，需要采用結構化數(shù)據(jù)和非結構化的數(shù)據(jù)進行表示。該文提出一種加工類產品設計資料存儲及展示方法，并用一個服裝設計作品案例驗證該方法的有效性。該方法不僅適用于服裝領域，也適用于模具、裝飾品、家具等行業(yè)。

關鍵詞：存儲方法；展示方法；XML；XSLT

中圖分類號：TP311? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2023）01-0137-03

1 引言

在服裝行業(yè)，一件衣服的設計過程包括企劃、設計和打樣階段，每個環(huán)節(jié)涉及不同的聯(lián)系人，這些階段中會出現(xiàn)包括設計圖、工藝流程、效果圖、展示視頻等大量的信息資料，模具、家具等加工類產品行業(yè)也有類似的情況。采用專業(yè)軟件或復雜信息系統(tǒng)可以將這些資料存儲下來并且直觀展示出來，但難以保障所有需要這些資料的參與者都可以方便地訪問這些軟件或系統(tǒng)。本文以服裝設計領域為背景，提出一種加工類產品設計資料存儲及展示方法，并采用XML、XSLT和HTML實現(xiàn)了一個系統(tǒng)原型，以期相關人員可以維護一個屬于自己的、將數(shù)據(jù)維護在本地并且方便操作的設計資料庫。

2 相關工作

為了實現(xiàn)教材的重復使用并且能夠在不同的在線學習平臺中展示、流通，在1997年，美國白宮科技辦公室與國防部共同推動了ADL先導計劃，制定了SCORM規(guī)范，為學習對象建立標準。SCORM內容模型由素材、可共享內容對象以及內容組織構成，描述了從學習資源中構造一次學習體驗所需的SCORM內容組件[1]。但是SCORM缺乏對離線學習的支持，課程無法在沒有網絡連接的情況下運行[2]；SCORM內容最初是基于Flash的，隨著Flash被棄用，展現(xiàn)的課程內容在過渡到HTML5時會伴隨著數(shù)字內容（比如視頻）質量的降低。

SCORM標準的特點是使用XML技術定義課程的結構以及使用元數(shù)據(jù)來確定內容的細節(jié)[3]。本文也是采用XML對加工類產品進行描述，但與SCORM描述的學習對象是有較大差異的。XML作為一種元語言，可以對數(shù)據(jù)進行定義和擴展，給不同信息格式的統(tǒng)一帶來了深刻的影響，可以作為各種應用之間交換數(shù)據(jù)的標準。引入XML技術可以使不同結構類型的數(shù)據(jù)共享、集成與交互，實現(xiàn)資源共享[4]。XML Schema本身也是XML結構的文檔，它對XML中的節(jié)點和屬性制定規(guī)范，主要用來作為XML的描述文件。

XSLT相當于XML的樣式表，使用XSLT可以直接將以XML形式表示的面向對象模型轉換為Web界面[5]，并且也能夠導入自定義的樣式文件使得界面更加美觀。XSLT中通過XPath來解析XML，它是一種用于XML文檔中導航的語言[6]，在對XML解析的過程中不需要對XML中的節(jié)點層層遍歷，可以根據(jù)路徑表達式（包括絕對路徑和相對路徑）直接拿到節(jié)點或者節(jié)點集以及它們的屬性。

HTML稱為超本文標記語言，都是由一些標簽組成，使用起來簡單方便，被廣泛應用于網頁的創(chuàng)建與展示，現(xiàn)已升級到了HTML5[7]，新增了很多更加友好的特性，主流瀏覽器都支持這種語言，用戶只需要打開一個以.html為后綴名的文件，就可以通過瀏覽器看到可視化界面。

3 加工類產品設計資料存儲方法

本方法將設計作品資料根據(jù)存儲數(shù)據(jù)格式進行區(qū)分，結構化的資料包括文本（小于等于255字符）、數(shù)字，非結構化的數(shù)據(jù)包括文檔（大于255字符）、圖片、視頻。整個模型有一個總描述文件，若干內容對象描述文件組成，如圖1所示。

文本對象是用string類型表示的資料，一般不會隨便改變。數(shù)字對象是用integer或者decimal類型表示的資料，是能夠通過一些計算方法或公式推算出來的數(shù)值結果。總描述文件定義了加工類產品設計資料的規(guī)范，包括文本對象、數(shù)字對象和可共享內容對象鏈接，可共享內容對象描述文件包括名稱、描述和素材鏈接，素材文件包括文檔（txt、doc） 、圖片（jpg、png、gif） 和視頻（mp4、avi、wmv） 。

總描述文件和可共享內容對象描述文件的存儲形式都為XML，在總描述文件中，根節(jié)點標簽是，文字對象節(jié)點標簽是，數(shù)字對象節(jié)點標簽是，可共享內容對象鏈接節(jié)點通過href屬性給出內容對象描述文件的路徑鏈接到具體內容上。各個內容對象描述文件根據(jù)對象內容自定義根節(jié)點標簽，并由若干個相同結構的子節(jié)點構成，通過id屬性進行區(qū)分，名稱節(jié)點標簽是，描述節(jié)點標簽是，素材節(jié)點標簽是，并通過href屬性鏈接到素材文件具體的路徑。

4 加工類產品設計資料展示方法

采用XML將設計資料結構化固然很好，但直接用瀏覽器打開這個XML文件會發(fā)現(xiàn)它僅僅是一個樹狀結構，只把這些數(shù)據(jù)以這種形式展示出來是沒有任何意義的，XSLT可以實現(xiàn)將數(shù)據(jù)和表達形式分離，改變數(shù)據(jù)的展示方式但是不會影響數(shù)據(jù)本身。

XSLT具體的工作流程如圖2所示。首先解析轉換器加載XML到內存，將XML文檔解釋成DOM對象，相當于建立了源文檔的一個節(jié)點樹。然后用XML解釋器解釋XSLT文檔，用模板匹配的方法去遍歷這棵節(jié)點樹。XPath是用來幫助XSLT在XML源文檔中定位信息的語言，它會根據(jù)路徑表達式很方便地匹配想要的節(jié)點，這個節(jié)點指的是元素和屬性，元素和元素的文本內容被認為是兩個節(jié)點。一旦匹配成功，XSLT就會把將樹中的節(jié)點按模板的設定轉換為指定的HTML顯示語言。

本文提出了一個基于XSLT模板的本地展示方法，為存儲方法中的文字對象、數(shù)字對象、可共享內容對象中的具體內容分別設置不同的模板規(guī)則，將這些模板文件通過元素導入到最終的主模板文件中，最后根據(jù)這些模板組成整體頁面。

使用元素定義一個模板規(guī)則，在這個元素下再封裝具體的樣式。語法如下所示。

match="模板的匹配路徑"

mode="模板模式">

<！--Content-->

屬性match用來通過XPath表達式尋找節(jié)點與之匹配，如果屬性值是"/"代表XML源文檔結構樹的根標簽。屬性mode可選，表示一個節(jié)點可能有多個模板，調用時指向這個屬性進行區(qū)分，通過這個屬性可以使相同的數(shù)據(jù)呈現(xiàn)不同的顯示效果，從而適合于不同的顯示設備，在最大限度上滿足重用性。

使用元素可用于選取指定的節(jié)點集中的每個XML元素，用來遍歷具有相同規(guī)范的節(jié)點。使用元素用于向元素添加屬性，比如可以用來給圖片標簽添加路徑屬性。元素用于提取XML節(jié)點或屬性的值，并把值添加到轉換的輸出流中。這些元素都通過select屬性指定XPath路徑表達式，找到需要匹配的節(jié)點。使用元素可把已經制定好的一個模板嵌套進當前的元素或者當前元素的子節(jié)點。

通過將XSLT模板直接鏈接進XML中，會導致有些不支持XSLT的瀏覽器無法識別這些樣式規(guī)范，因此還需要編寫一個HTML文件，讀取主XSLT樣式文件和主描述XML文件，最終只需要在瀏覽器中打開這個HTML文件，就可以顯示一份設計資料。

5 案例分析

案例旨在實現(xiàn)服裝設計協(xié)作系統(tǒng)中的設計資料導出功能，滿足相關人員可以脫離系統(tǒng)在本地訪問到私有的設計資料的需求。為了實現(xiàn)這個功能，根據(jù)上文提出的一種加工類產品設計資料存儲及展示的通用方法，通過XML集成與存儲數(shù)據(jù)，并用多個XSLT樣式模板解析，就可以在頁面上個性化展示出設計資料中的所有內容。

首先是要獲取結構化與非結構化的數(shù)據(jù)，此案例中的一份設計資料的數(shù)據(jù)來源是存儲在數(shù)據(jù)庫中的結構化數(shù)據(jù)和存儲在MinIO文件存儲系統(tǒng)中的非結構化數(shù)據(jù)，獲取后重新對需要展示的設計資料進行二次封裝，使它們符合XML的節(jié)點層級結構。

根據(jù)加工類產品資料模型描述，一個服裝的設計資料中的文本對象包括設計資料名稱對象、聯(lián)系人對象，聯(lián)系人對象中包含姓名、職位、聯(lián)系電話、聯(lián)系郵箱、住址等，數(shù)字對象包括面料輔料的尺寸大小、服裝的基碼等，可共享內容對象包括各種設計圖、工藝文檔、效果視頻。利用Dom4j生成設計資料的主描述文件、文本對象、數(shù)字對象和內容對象描述文件，一共包含四個XML文件，具體步驟是創(chuàng)建Document對象，首先向這個文檔對象添加根節(jié)點對象，然后通過循環(huán)將子節(jié)點和子節(jié)點的屬性層層嵌套添加，最后用XMLWriter對象將構建好的XML文件輸出流導出。以設計圖共享內容對象為例，展示一個XML文件的具體內容。

<？xml version="1.0" encoding="utf-8"？>

色彩圖片

圖案圖片

壓花

...

<！--其他圖片對象-->

設計圖共享內容對象XML文件中的根節(jié)點為pictures，并由多個結構相同的picture子節(jié)點構成，每個子節(jié)點中存放圖片的名稱、描述和素材鏈接節(jié)點，素材鏈接指定素材在文件夾中的相對路徑。

本案例共制定了8個XSLT模板樣式文件，其中圖片可共享內容對象模板樣式文件有兩種模式，分別適應了14寸屏幕和16寸屏幕的筆記本電腦，使得頁面正好能夠平鋪這些圖片，讓界面保持美觀。下面展示關于文字對象中的聯(lián)系人模板樣式文件。

<？xml version="1.0" encoding="UTF-8"？>

css地址

元素定義一個樣式表，為了界面的美觀，還在模板中用link標簽鏈接到自定義的CSS層疊樣式表中。由這個樣式文件可以看出聯(lián)系人列表以表格的樣式呈現(xiàn)，通過元素循環(huán)遍歷XML中的contact節(jié)點，獲得多個聯(lián)系人的所有信息，并通過元素將每個節(jié)點值放在對應的單元格內，最后通過導入其他更多的詳情信息的樣式模板。

實現(xiàn)一個打包方法，用于將所有需要導出的文件打包成ZIP壓縮文件的格式，具體步驟是依次讀取所有文件，將它們一起放在InputStream對象數(shù)組中，然后直接使用ZipUtil類中的zip方法將多個文件一起打包成壓縮包后返回給前端。

瀏覽器會自動下載這個壓縮包，在本地解壓之后，可以看到這個ZIP中包含的文件有8個XSL模板樣式文件、1個HTML文件、4個XML描述文件和素材文件夾。找到HTML文件，并通過瀏覽器的方式打開，就可以在界面上看到一份設計資料，包括聯(lián)系人列表、所有的圖片、模特街拍視頻和細節(jié)講解視頻、四個工藝流程的詳細文檔，如圖3所示。點擊聯(lián)系人和圖片的詳情按鈕，可以顯示對該部分的詳細描述，點擊視頻的詳情按鈕可以播放對應的視頻，點擊文檔的詳情按鈕可以查看工藝流程說明文檔。

6 結論

本文提出了一種加工類產品設計資料存儲及展示方法，并以服裝設計作品為例，實現(xiàn)了一個集成和展示原型，可以方便地將加工產品設計資料存儲下來，并通過瀏覽器直接展示，達到在設計師本地電腦僅通過打開一個HTML文件就能展示一份設計資料。這種方法不僅可以應用于服裝領域，還能應用于模具、家具、裝飾品領域等類似的加工類產品領域，對于知識管理和知識圖譜的構建和展示也有一定的幫助。

參考文獻

[1] 張蕾.基于SCORM標準的翻轉課堂可共享課程資源設計研究[J].教育現(xiàn)代化，2019，6（79）：212-215.

[2] 林龍成.新一代學習行為描述規(guī)范xAPI應用研究[J].信息技術與信息化，2021（5）：230-232.

[3] Sokol V，Bilova M，Kharin A.An approach for creating learning content from knowledge management system[M]//Lecture Notes in Networks and Systems.Cham：Springer International Publishing，2021：692-703.

[4] 喬加新，梁后軍.基于XML的智慧礦區(qū)的研究與設計[J].遼寧工業(yè)大學學報（自然科學版），2020，40（1）：53-56.

[5] 許波.XML引擎與關系數(shù)據(jù)庫集成測試技術[J].中國新技術新產品，2020（5）：59-60.

[6] Hao W，Matsuzaki K，Sato S.A dual-index based representation for processing XPath queries on very large XML documents[M]//Lecture Notes of the Institute for Computer Sciences，Social Informatics and Telecommunications Engineering.Cham：Springer International Publishing，2021：18-30.

[7] Tabarés R.HTML5 and the evolution of HTML;tracing the origins of digital platforms[J].Technology in Society，2021，65：101529.

【通聯(lián)編輯：聞翔軍】