一種加工類產品設計資料存儲及展示方法

葉敏　陶然

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

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

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

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

1 引言

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

2 相關工作

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

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

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

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

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

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

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

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

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

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

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

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

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

match="模板的匹配路徑"

mode="模板模式">

<！--Content-->

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

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

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

5 案例分析

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

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

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

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

色彩圖片

圖案圖片

壓花

...

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

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

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

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

css地址

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

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

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

6 結論

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

參考文獻

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

[2] 林龍成.新一代學習行為描述規范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的智慧礦區的研究與設計[J].遼寧工業大學學報（自然科學版），2020，40（1）：53-56.

[5] 許波.XML引擎與關系數據庫集成測試技術[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.

【通聯編輯：聞翔軍】