一种加工类产品设计资料存储及展示方法

叶敏　陶然

摘要：加工类产品的设计类作品一般包括设计图、工艺流程、效果图、解释说明、尺寸、视频、联系人、材料描述等大量信息资料，需要采用结构化数据和非结构化的数据进行表示。该文提出一种加工类产品设计资料存储及展示方法，并用一个服装设计作品案例验证该方法的有效性。该方法不仅适用于服装领域，也适用于模具、装饰品、家具等行业。

关键词：存储方法；展示方法；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.

【通联编辑：闻翔军】