摘? 要：本文主要從系統(tǒng)設(shè)計(jì)、功能實(shí)現(xiàn)、整體架構(gòu)的角度介紹了基于B/S模式下的模擬試衣間系統(tǒng)。本文還著重地介紹了Salted Password Hashing加密算法與傳統(tǒng)的哈希函數(shù)加密算法之間存在的區(qū)別與聯(lián)系，Salted Password Hashing加密算法在傳統(tǒng)的軟件系統(tǒng)中能夠發(fā)揮重要作用，以及RESTful架構(gòu)下軟件系統(tǒng)的使用設(shè)計(jì)、實(shí)現(xiàn)方案及REST設(shè)計(jì)規(guī)范為實(shí)際軟件編程帶來(lái)的便利。

關(guān)鍵詞：模擬試衣間系統(tǒng);RESTful;前后端分離;Salted Password Hashing

Abstract：The article mainly investigates into the design，functions and structure of the simulated fitting room system based on the B/S pattern，emphasizing the differences and associations between the Salted Password Hashing and traditional Hashing algorithm，Salted Password Hashing encryption algorithm can play an important role in traditional software systems，and the use design，implementation scheme and REST design specifications of software systems under RESTful architecture bring convenience to actual software programming.

Keywords：simulated fitting room system;RESTful;front-back end decoupling;Salted Password Hashing

0? 引? 言

在這個(gè)快速發(fā)展的互聯(lián)網(wǎng)時(shí)代，人們的購(gòu)物活動(dòng)與以前相比發(fā)生了天翻地覆的改變，而其中十分重要的一部分是衣服的購(gòu)買(mǎi)。在互聯(lián)網(wǎng)并沒(méi)有得到普及的時(shí)代，人們購(gòu)買(mǎi)衣服依靠于實(shí)體店，人們需要花大量的時(shí)間逛一家又一家的實(shí)體店，不斷地嘗試各式各樣的衣服以挑選自己最心儀的那一款。而如今，即使互聯(lián)網(wǎng)得到了普及，人們?cè)诰W(wǎng)上購(gòu)買(mǎi)衣服的時(shí)候也經(jīng)常出現(xiàn)購(gòu)買(mǎi)的產(chǎn)品不合身、不滿意的情況。因此需要一款系統(tǒng)允許用戶(hù)在網(wǎng)上完成試衣，既能豐富用戶(hù)購(gòu)買(mǎi)衣服的體驗(yàn)，又能有效地減少用戶(hù)衣服退換貨的概率。針對(duì)以上需求，我們?cè)O(shè)計(jì)了一個(gè)模擬試衣間系統(tǒng)，幫助用戶(hù)模擬真實(shí)的試衣環(huán)節(jié)，滿足用戶(hù)各類(lèi)別衣服的挑選、組合搭配等要求。除此之外，本系統(tǒng)還設(shè)有管理員權(quán)限，以進(jìn)行衣服商品的統(tǒng)一管理。用戶(hù)除了進(jìn)行基本賬號(hào)信息登記之外，還能夠選擇角色性別以及角色頭像，滿足不同人群的試衣需求。系統(tǒng)設(shè)有靈活的衣服種類(lèi)管理功能，能夠簡(jiǎn)單地完成衣服種類(lèi)的添加、刪除和修改操作，并且用戶(hù)及系統(tǒng)管理員能夠進(jìn)行相應(yīng)衣服類(lèi)別的指向性查詢(xún)。在試衣環(huán)節(jié)，用戶(hù)可以從不同種類(lèi)的衣服中進(jìn)行任意挑選，通過(guò)外套、內(nèi)襯、褲子等衣服的層級(jí)改變，用戶(hù)可以完成任意外搭以及內(nèi)搭需求，滿足了用戶(hù)多樣的衣服搭配想法。在完成了心儀衣服的搭配試衣之后，用戶(hù)還能進(jìn)行搭配保存以及與其他用戶(hù)之間的交流與分享?；谟脩?hù)信息的安全性考慮，系統(tǒng)為每一位用戶(hù)的密碼進(jìn)行了Salted Password Hashing算法加密，為用戶(hù)的個(gè)人隱私增添了一道有力的防火墻。

1? 前端

前端的開(kāi)發(fā)基于HTML+CSS+JQuery這對(duì)經(jīng)典組合，在實(shí)際的使用當(dāng)中不乏許多當(dāng)前流行的HTML5以及CSS3技術(shù)，除此之外，項(xiàng)目之中的JQuery使用了JQuery3版本，對(duì)比以往的setTimeout以及setInterval，利用JQuery3中提供的requestAnimationFrame這一新API能夠?qū)崿F(xiàn)anima-tion更流暢地展示，防止發(fā)生動(dòng)畫(huà)阻塞。

1.1? 注冊(cè)登錄界面

在注冊(cè)登錄界面，左側(cè)的“FittingRoom.”標(biāo)志添加了動(dòng)態(tài)切換效果，界面下方是注冊(cè)登錄界面的導(dǎo)航欄。注冊(cè)登錄界面如圖1所示。

1.2? 主頁(yè)面

主界面采用居家背景，以及白色、淡墨綠色為主色調(diào)，營(yíng)造舒適、安逸的環(huán)境氛圍。試衣間界面如圖2所示。

1.3? 功能詳細(xì)介紹

1.3.1? 注冊(cè)功能

在注冊(cè)登錄界面的下方菜單欄，點(diǎn)擊“切換”，頁(yè)面右側(cè)的登錄框?qū)?huì)下降，隨之注冊(cè)框?qū)?huì)上移，通過(guò)登錄框與注冊(cè)框之間的動(dòng)態(tài)切換將登錄與注冊(cè)放置在同一個(gè)界面中。在注冊(cè)框中用戶(hù)可以進(jìn)行用戶(hù)名、密碼、性別、頭像等個(gè)人信息填寫(xiě)。

1.3.2? 登錄功能

在注冊(cè)登錄界面，默認(rèn)展示登錄框。用戶(hù)在登錄框輸入自己的用戶(hù)名以及密碼，系統(tǒng)會(huì)自動(dòng)將密碼通過(guò)Salted Password Hashing算法進(jìn)行密碼驗(yàn)證。最終會(huì)有動(dòng)態(tài)彈框進(jìn)行登錄結(jié)果的提示。

1.3.3 用戶(hù)管理功能

用戶(hù)通過(guò)快捷鍵調(diào)出功能菜單，并從中選擇“用戶(hù)管理”，伴隨著展開(kāi)動(dòng)畫(huà)，功能模塊將會(huì)出現(xiàn)?！坝脩?hù)管理”只有管理員才能夠進(jìn)行訪問(wèn)，普通用戶(hù)訪問(wèn)將會(huì)彈出權(quán)限不足提示框。在用戶(hù)管理模塊，管理員能夠進(jìn)行用戶(hù)賬號(hào)信息的管理。

1.3.4? 服飾類(lèi)型管理功能

用戶(hù)通過(guò)快捷鍵調(diào)出功能菜單，并從中選擇“服飾類(lèi)型管理”，伴隨著展開(kāi)動(dòng)畫(huà)，功能模塊將會(huì)出現(xiàn)?！胺楊?lèi)型管理”只有管理員才能夠進(jìn)行訪問(wèn)，普通用戶(hù)訪問(wèn)將會(huì)彈出權(quán)限不足提示框。在服飾類(lèi)型管理模塊，管理員能夠?qū)σ延械姆楊?lèi)型進(jìn)行修改與刪除，還能進(jìn)行新服飾類(lèi)型的添加操作。

1.3.5? 服飾管理功能

用戶(hù)通過(guò)快捷鍵能夠調(diào)出功能菜單，并從中選擇“服飾管理”，伴隨著展開(kāi)動(dòng)畫(huà)，功能模塊將會(huì)出現(xiàn)。“服飾管理”只有管理員才能夠進(jìn)行訪問(wèn)，普通用戶(hù)訪問(wèn)將會(huì)彈出權(quán)限不足提示框。在服飾管理模塊，管理員對(duì)已有的服飾名稱(chēng)、服飾所屬類(lèi)型、價(jià)格、圖片進(jìn)行修改與刪除，還能進(jìn)行新服飾的添加。

1.3.6? 試衣間功能

用戶(hù)通過(guò)快捷鍵調(diào)出功能菜單，并選擇“試衣間”，伴隨著展開(kāi)動(dòng)畫(huà)，功能模塊將會(huì)出現(xiàn)?！霸囈麻g”功能允許所有用戶(hù)訪問(wèn)，用戶(hù)能夠進(jìn)行服飾類(lèi)型的選擇，然后系統(tǒng)將會(huì)自動(dòng)顯示該服飾類(lèi)型下的所有衣服，通過(guò)鼠標(biāo)點(diǎn)擊操作，用戶(hù)能將所選的衣服“穿上身”，對(duì)多種服飾類(lèi)型以及服飾的選擇完成試衣搭配。在此期間，用戶(hù)還能夠進(jìn)行衣服層級(jí)的調(diào)整，以進(jìn)行不同內(nèi)搭、外搭的選擇。通過(guò)對(duì)購(gòu)物車(chē)中衣服的價(jià)格計(jì)算，計(jì)算出當(dāng)前用戶(hù)穿在身上的衣服價(jià)格總和。

當(dāng)用戶(hù)選擇不同的服飾類(lèi)型，即觸發(fā)以上代碼。事先在option中插入的value屬性保存該服飾類(lèi)型的編號(hào)，當(dāng)用戶(hù)選擇服飾類(lèi)型時(shí)，獲取用戶(hù)選擇的服飾類(lèi)型編號(hào)以及當(dāng)前用戶(hù)的角色性別，然后將這兩個(gè)信息傳至后端，后端通過(guò)服飾類(lèi)型編號(hào)以及角色性別將相應(yīng)的服飾以JSONArray的形式發(fā)送至前端以進(jìn)行展示。

1.3.7? 保存搭配功能

在用戶(hù)完成服飾搭配之后，點(diǎn)擊“橙色”的保存按鍵，系統(tǒng)將會(huì)為用戶(hù)進(jìn)行當(dāng)前試穿衣服的保存。當(dāng)用戶(hù)再次進(jìn)行系統(tǒng)登錄時(shí)，系統(tǒng)會(huì)自動(dòng)為用戶(hù)顯示已保存的搭配，以便于用戶(hù)進(jìn)行搭配的修改。

以上代碼用以完成用戶(hù)搭配服飾的保存，當(dāng)用戶(hù)點(diǎn)擊保存按鈕時(shí)觸發(fā)保存操作，將當(dāng)前所有衣服的編號(hào)、層級(jí)保存至數(shù)組當(dāng)中，最終將數(shù)組發(fā)送至后端，經(jīng)過(guò)處理后得以保存。

2? Salted Password Hashing算法

大多數(shù)軟件系統(tǒng)都需要與賬號(hào)產(chǎn)生聯(lián)系，有效保證賬號(hào)密碼的安全性是一個(gè)艱巨的任務(wù)。Salted Password Hashing通常是被用來(lái)給用戶(hù)的個(gè)人賬號(hào)密碼提升安全性的一把鎖。哈希算法本身是一種單向（Uni-Directional）的函數(shù)，它能夠?qū)⑷我忾L(zhǎng)度的Plain text轉(zhuǎn)換成一段固定長(zhǎng)度的Cipher，這個(gè)特性十分適用于賬號(hào)密碼加密。因此在本項(xiàng)目中，采用了Salted Password Hashing進(jìn)行密碼的加密。Salted顧名思義“鹽化的”，即是指在整個(gè)哈希加密過(guò)程中給最終的Cipher中添加一段隨機(jī)的字符串，而這段隨機(jī)的字符串即被稱(chēng)為鹽值。由于這一段隨機(jī)字符串的存在，同一段密碼在經(jīng)過(guò)兩次Salted Password Hashing之后得到的Cipher將會(huì)是不同的兩段字符串，使得密碼被破解的可能性大大減小。

3? RESTful架構(gòu)

REST的全稱(chēng)是Representational State Transfer，是一套完善的API設(shè)計(jì)規(guī)范，而符合如此設(shè)計(jì)規(guī)范的架構(gòu)則被稱(chēng)為RESTful架構(gòu)。RESTful架構(gòu)有著許多優(yōu)勢(shì)，例如同一個(gè)URI能夠同時(shí)供給GET、POST、PUT、DELETE方法進(jìn)行不同操作。除了其輕量以及數(shù)據(jù)描述簡(jiǎn)單之外，其優(yōu)勢(shì)還在于實(shí)現(xiàn)了項(xiàng)目的前后端分離，何為前后端分離？舉個(gè)例子，當(dāng)沒(méi)有實(shí)現(xiàn)項(xiàng)目的前后端分離，前端與后端工作通常是串行的，即前端等著后端的數(shù)據(jù)接口完成后才能進(jìn)行前端的進(jìn)一步開(kāi)發(fā)以及測(cè)試工作，當(dāng)以小組完成項(xiàng)目時(shí)，這無(wú)疑拖慢了整個(gè)項(xiàng)目的進(jìn)度。然而因?yàn)轫?xiàng)目的前后端分離，不再需要相互等待，前端與后端的開(kāi)發(fā)工作實(shí)現(xiàn)并行，從而實(shí)現(xiàn)將整個(gè)項(xiàng)目的開(kāi)發(fā)周期縮短。

4? 結(jié)? 論

在這個(gè)全民互聯(lián)網(wǎng)時(shí)代，網(wǎng)上購(gòu)物的普及為模擬試衣間系統(tǒng)的開(kāi)發(fā)提供了很好的需求契機(jī)?；贐/S模式的模擬試衣間系統(tǒng)，利用RESTful架構(gòu)實(shí)現(xiàn)了項(xiàng)目開(kāi)發(fā)的前后端分離，有利于團(tuán)隊(duì)開(kāi)發(fā)。在下一步的系統(tǒng)完善中，將會(huì)陸續(xù)增加添加好友以及分享服飾搭配等功能，為用戶(hù)提供一個(gè)更具趣味性、功能更加豐富的軟件系統(tǒng)。

參考文獻(xiàn)：

[1] 祝彥斌，王春玲.一種Hash特征隱藏的加鹽信息摘要模型 [J].計(jì)算機(jī)技術(shù)與發(fā)展，2013，23（3）：134-138.

[2] 陳佳康.密碼學(xué)算法的優(yōu)化與應(yīng)用 [D].北京：北京郵電大學(xué)，2013.

[3] 肖德芳，劉卓.基于Javaweb的科研項(xiàng)目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].電腦知識(shí)與技術(shù)，2017，13（27）：69-70.

作者簡(jiǎn)介：夏禹（1995.09-），男，漢族，江西南昌人，本科，主要研究方向：軟件工程理論與方法。