[15]。3.2.3操作可行性分析與實(shí)體商店不同，客戶只需注冊個(gè)人信息并登錄即可進(jìn)行一系列的操作，操作十分簡單并易于理解，而且只需接收被送貨上門的商品。本次設(shè)計(jì)的主要任務(wù)是在“非遺手工發(fā)飾”網(wǎng)上商店內(nèi)實(shí)現(xiàn)商品瀏覽搜索、用戶下單、留言商家處理、進(jìn)貨、管理訂單、營業(yè)額等功能，這些操作便于用戶掌握，用戶只要會(huì)基本的電腦操作即可使用本商城購物。3.3系統(tǒng)功能結(jié)構(gòu)3.3.1用戶端功能結(jié)構(gòu)用戶端的功能結(jié)構(gòu)主要包括的是用戶在實(shí)際使用中的各類功能。用戶端的功能結(jié)構(gòu)部分可以分為七個(gè)部分，分別是商品信息模塊、購買及結(jié)算模塊、用戶評論模塊、用戶訂單模塊、個(gè)人信息模塊、搜索模塊、其他。用戶端功能結(jié)構(gòu)如下圖3-3所示：圖3-3系統(tǒng)前臺功能結(jié)構(gòu)圖3.3.2管理端功能結(jié)構(gòu)后臺管理系統(tǒng)主要用于管理員對前臺展示的信息進(jìn)行管理，包括商品信息管理模塊、訂單管理模塊、評論管理模塊、用戶信息管理模塊、搜索模塊、統(tǒng)計(jì)管理、類型管理模塊功能。管理端功能結(jié)構(gòu)圖3-4如下圖所示：圖3-4管理端功能結(jié)構(gòu)圖4頁面內(nèi)容分析及頁面布局設(shè)計(jì)4.1要素設(shè)計(jì)本網(wǎng)站色調(diào)主要采用綠色為主，白色為背景色。運(yùn)用較少的色彩搭配使頁面干凈整潔大氣，和諧統(tǒng)一，主要以突出商品細(xì)節(jié)為目的，有利于讓用戶一眼看出網(wǎng)站想展示的對象，使用戶聚焦在飾品上，利于商品的銷售和非遺傳承。網(wǎng)站主要采用的色彩如下：表4-1系統(tǒng)采用色彩#F6F6F6#EFEFEF#769589#FFFFFF網(wǎng)站采用字體字號如下：表4-2網(wǎng)站采用字體字號字體字號字重應(yīng)用場景舉例ArialArialArial32px12px11px400400400首頁中的“絨花系推薦”頂部導(dǎo)航欄字體搜索按鈕文字Arial14px500首頁的商品名稱Arial17px400個(gè)人中心頁面的“個(gè)人信息”TimesNewRoman15px700用戶注冊頁面的“USER/REGISTER”4.2用戶端頁面內(nèi)容分析及布局設(shè)計(jì)4.2.1用戶注冊頁面分析及布局設(shè)計(jì)底部是背景圖。最右側(cè)包含USER/REGISTER文字標(biāo)簽，用戶名輸入框、密碼輸入框、確認(rèn)密碼輸入框、姓名輸入框、頭像、注冊按鈕、已有賬戶登錄按鈕。用戶注冊頁面原型圖設(shè)計(jì)如圖4-1所示：圖4-1用戶注冊頁面原型圖4.2.2首頁頁面內(nèi)容及其布局設(shè)計(jì)頁面頂部是導(dǎo)航欄，其中包括店鋪名稱、首頁、絨花系、纏花系手工DIV材料包、用戶頭像、用戶ID、個(gè)人中心、購物車、退出按鈕；下面是由三張圖片組成的輪播圖，可以左右滑動(dòng)切換；輪播圖下面是搜索框和搜索按鈕；其次是商品推薦，從上到下依次是絨花系推薦、纏花系推薦、手工DIV材料包推薦，其包括商品分類欄、商品信息（包括商品圖片、商品名稱和商品所屬分類）；然后是新品預(yù)告展示，包括商品圖片、商品分類、商品收藏量、更多按鈕；接著是關(guān)于我們（兩張店鋪圖片和非遺店鋪介紹文案）和非遺簡介（三張圖片、非遺簡介文案、更多按鈕）；最后是底部頁腳（文字介紹）。首頁頁面布局原型圖設(shè)計(jì)如圖4-2所示：圖4-2首頁頁面原型圖4.2.3系統(tǒng)簡介頁面分析及頁面設(shè)計(jì)系統(tǒng)簡介頁面從上往下依次是導(dǎo)航欄、輪播圖、路徑導(dǎo)航框、返回按鈕、系統(tǒng)簡介模塊、底部頁腳。其中系統(tǒng)簡介模塊包括圖片（左側(cè)三張圖片，右側(cè)一張主圖），標(biāo)題、副標(biāo)題、內(nèi)容。系統(tǒng)簡介頁面布局原型圖設(shè)計(jì)如圖4-3所示：圖4-3系統(tǒng)簡介詳情頁面原型圖4.2.4分類頁面內(nèi)容分析及布局設(shè)計(jì)分類頁面以絨花系為例，從上往下依次是導(dǎo)航欄、輪播圖、路徑導(dǎo)航框、分類列表、價(jià)格升降按鈕、商品展示欄、熱門信息、底部頁腳。其中分類列表包括八種商品細(xì)分按鈕、搜索框（按照商品名稱、商品價(jià)格進(jìn)行搜索、搜索按鈕）、按照商品風(fēng)格分類、按照商品主體材質(zhì)分類。價(jià)格升降按鈕可以將商品按照價(jià)格從大到小排序或者從小到大排序。商品展示欄包括商品圖片、商品名稱、商品價(jià)格、收藏量。絨花系熱門信息包括絨花商品圖片、絨花商品名稱和商品分類。系列頁面布局原型圖設(shè)計(jì)如圖4-4所示：圖4-4系列頁面原型圖4.2.5商品詳情頁面內(nèi)容分析及頁面設(shè)計(jì)商品詳情頁面從上到下依次是導(dǎo)航欄、商品信息模塊、寶貝詳情模塊、寶貝評價(jià)、底部頁腳。其中商品信息模塊包括商品成品圖（左側(cè)三張圖片，右側(cè)一張主圖）、商品名稱、收藏按鈕、查看優(yōu)惠券按鈕、價(jià)格、單限數(shù)、庫存數(shù)、寶貝分類、風(fēng)格、主體材質(zhì)、規(guī)格、上架日期、數(shù)量增減按鈕、加入購物車按鈕、立即購買按鈕。寶貝詳情模塊，包括關(guān)于此商品的文字介紹和設(shè)計(jì)理念、商品圖片。商品詳情頁面布局原型圖設(shè)計(jì)如圖4-5所示：圖4-5商品詳情頁面4.2.6購物車頁面內(nèi)容分析及布局設(shè)計(jì)購物車頁面從上到下依次是導(dǎo)航欄、輪播圖、購物車文字標(biāo)簽、購物車商品展示區(qū)、底部頁腳。其中購物車商品展示區(qū)包括勾選框、商品信息（商品圖片、商品名稱）、單價(jià)、數(shù)量加減按鈕、金額、刪除按鈕、總價(jià)金額、點(diǎn)擊購買按鈕。購物車頁面布局原型圖設(shè)計(jì)如圖4-6所示：圖4-6購物車頁面4.2.7收貨地址頁面內(nèi)容分析及頁面設(shè)計(jì)收貨地址頁面從上到下依次是導(dǎo)航欄、輪播圖、收貨地址編輯頁面、底部頁腳。其中編輯收貨地址頁面，從上到下依次是聯(lián)系人、手機(jī)號、地址、默認(rèn)地址（是按鈕、否按鈕）、添加按鈕、取消按鈕。為了方便用戶添加收貨地址。收貨地址頁面布局原型圖設(shè)計(jì)如圖4-7所示：圖4-7收貨地址頁面4.2.8我的訂單頁面內(nèi)容分析及頁面設(shè)計(jì)我的訂單頁面從上到下依次是導(dǎo)航欄、輪播圖、返回按鈕（返回至個(gè)人中心）、我的訂單文字標(biāo)簽、用戶的訂單列表、底部頁腳。其中訂單列表中從上到下依次是導(dǎo)航區(qū)（包括未支付、已支付、已發(fā)貨、已完成、已退款、已取消）、商品信息（包括訂單編號、商品照片、商品名稱、價(jià)格、數(shù)量、總價(jià)、地址、電話、收貨人、下單時(shí)間、備注、退貨審核、審核回復(fù)、操作退款按鈕）。我的訂單頁面布局原型圖設(shè)計(jì)如圖4-8所示：圖4-8我的訂單頁面4.2.9個(gè)人中心頁面內(nèi)容及頁面設(shè)計(jì)個(gè)人中心頁面從上到下依次是導(dǎo)航欄、輪播圖、個(gè)人中心詳情頁面、底部頁腳。其中個(gè)人中心詳情頁面最上面是個(gè)人中心文字標(biāo)簽；左側(cè)是個(gè)人信息模塊，包括頭像照片、用戶名、姓名、性別、年齡、郵箱、余額；中間是更新信息模塊，包括用戶名、姓名、頭像（包括頭像照片、增添照片、點(diǎn)擊上傳頭像文字標(biāo)簽）、性別（下拉選擇框）、年齡、郵箱、余額、點(diǎn)我充值按鈕、更新信息按鈕、退出登錄按鈕；右側(cè)是導(dǎo)航按鈕框，包括個(gè)人中心按鈕、修改密碼按鈕、我的訂單按鈕、我的地址按鈕、我的收藏按鈕、我的優(yōu)惠券按鈕。個(gè)人中心頁面布局原型圖設(shè)計(jì)如圖4-9所示：圖4-9個(gè)人中心頁面原型圖4.2.10我的收藏頁面內(nèi)容及頁面設(shè)計(jì)我的收藏頁面從上到下依次是導(dǎo)航欄、輪播圖、我的收藏頁面、底部頁腳。其中我的收藏頁面包括返回按鈕、我的收藏文字標(biāo)簽、搜索框（按照名稱進(jìn)行查詢）、商品圖片和商品名稱。我的收藏頁面布局原型圖設(shè)計(jì)如圖4-10所示：圖4-10我的收藏頁面原型圖4.3管理員端頁面內(nèi)容分析及布局設(shè)計(jì)4.3.1用戶管理頁面分析及布局設(shè)計(jì)頂部是店鋪名稱文字標(biāo)簽，名為憨憨手作店文字標(biāo)簽；左側(cè)是分類導(dǎo)航欄，從上到下依次是管理者頭像、管理者ID、用戶管理、寶貝分類管理、絨花系管理、纏花系管理、手工DIV材料包管理、新品預(yù)告管理、優(yōu)惠券管理、系統(tǒng)管理、訂單管理、我的資料十個(gè)模塊，用戶管理下拉出現(xiàn)用戶；右側(cè)是信息模塊，包括導(dǎo)航區(qū)、搜索欄（包括用戶名搜索、姓名搜索、性別搜索、增加按鈕、刪除按鈕）、用戶信息模塊（包括序號、用戶名、姓名、頭像、性別、年齡、郵箱、操作中編輯按鈕和刪除按鈕）；底部為頁碼，包括頁碼總數(shù)、上一頁按鈕、下一頁按鈕。用戶管理頁界面原型圖設(shè)計(jì)如圖4-11所示：圖4-11用戶管理頁面4.3.2商品管理頁面分析及布局設(shè)計(jì)頂部是店鋪名稱文字標(biāo)簽；左側(cè)是分類導(dǎo)航欄，絨花系管理下拉出現(xiàn)絨花系。右側(cè)是信息模塊，包括導(dǎo)航區(qū)、搜索欄（商品名稱搜索、風(fēng)格搜索、主體材質(zhì)搜索、價(jià)格區(qū)間搜索、搜索按鈕、增加按鈕、刪除按鈕）、商品信息模塊（包括序號、商品名稱、寶貝分類、風(fēng)格、主體材質(zhì)、圖片、規(guī)格、上架日期、單限、庫存、評論數(shù)、價(jià)格、收藏?cái)?shù)、操作中查看按鈕、編輯按鈕、查看評論按鈕和刪除按鈕）；底部為頁碼。用戶管理頁界面原型圖設(shè)計(jì)如圖4-12所示：圖4-12商品管理頁面4.3.3添加商品信息頁面分析及布局設(shè)計(jì)頂部是店鋪名稱文字標(biāo)簽；左側(cè)是分類導(dǎo)航欄，優(yōu)惠券管理下拉出現(xiàn)優(yōu)惠券。右側(cè)是信息模塊，包括導(dǎo)航區(qū)、搜索欄（包括券類型搜索、生效時(shí)間從起始時(shí)間至失效時(shí)間搜索、過期時(shí)間從起始時(shí)間至結(jié)束時(shí)間搜索、搜索按鈕、增加按鈕、刪除按鈕）、商品信息模塊（包括序號、名稱、券類型、滿額、優(yōu)惠券、生效時(shí)間、過期時(shí)間、備注、操作中查看按鈕、編輯按鈕和刪除按鈕）；底部為頁碼。添加商品信息頁面原型圖設(shè)計(jì)如圖4-13所示：圖4-13添加商品信息頁面4.3.4訂單管理頁面分析及布局設(shè)計(jì)頂部是店鋪名稱文字標(biāo)簽；左側(cè)是分類導(dǎo)航欄，訂單管理下拉出現(xiàn)已退款訂單、已發(fā)貨訂單、未支付訂單、已支付訂單、已完成訂單、已取消訂單。其中已退款訂單頁面中部信息模塊，包括導(dǎo)航區(qū)、搜索欄（包括訂單編號搜索、商品名稱搜索、搜索按鈕、刪除按鈕）、商品信息模塊（包括序號、訂單編號、商品名稱、商品圖片、購買數(shù)量、價(jià)格、總價(jià)格、支付類型、狀態(tài)、地址、電話、收貨人、備注、商品類型、券編號、優(yōu)惠額、統(tǒng)一訂單編號、退貨審核、審核回復(fù)、下單時(shí)間、操作中查看按鈕和刪除按鈕）；最后是底部頁碼。訂單管理頁界面原型圖設(shè)計(jì)如圖4-14所示：圖4-14訂單管理頁面4.4主要頁面之間的關(guān)系用戶可以根據(jù)注冊頁面進(jìn)入網(wǎng)站，進(jìn)入首頁后可以通過導(dǎo)航欄進(jìn)入個(gè)人中心頁面，從個(gè)人中心頁面的導(dǎo)航按鈕框中可以進(jìn)入我的收藏頁面、我的訂單頁面和編輯收貨地址頁面。從首頁的導(dǎo)航欄還可以進(jìn)入購物車頁面和分類頁面。在首頁和分類頁面都可以進(jìn)入商品詳情頁面。在首頁的系統(tǒng)簡介中點(diǎn)擊更多按鈕進(jìn)入系統(tǒng)簡介頁面。主要頁面之間的關(guān)系圖如圖4-15所示：圖4-15主要頁面之間的關(guān)系圖5數(shù)據(jù)庫設(shè)計(jì)5.1概念模型設(shè)計(jì)管理員包括管理員編號、名稱、密碼、頭像、角色。如圖5-1所示。圖5-1管理員E-R圖用戶中包括用戶編號、用戶名、密碼、姓名、頭像、性別、年齡、郵箱、余額。如圖5-2所示。圖5-2用戶E-R圖本網(wǎng)站擁有訂單功能。一個(gè)用戶可以支付多個(gè)訂單。一個(gè)訂單只能被一個(gè)用戶支付，所以用戶和訂單存在的關(guān)系為一對多。管理員可以管理訂單，一個(gè)管理員可以管理多個(gè)訂單，一個(gè)訂單可以被多個(gè)管理員管理，所以管理員和訂單的關(guān)系為多對多，其E-R圖如圖5-2所示：商品中包括商品編號、商品名稱、寶貝分類、風(fēng)格、主體材質(zhì)、圖片、規(guī)格、商品介紹、單限、庫存、評論數(shù)、價(jià)格、收藏?cái)?shù)。如圖5-3所示。圖5-3商品E-R圖訂單中包括訂單序號、訂單編號、商品名稱、商品圖片、購買數(shù)量、價(jià)格、總價(jià)格、支付類型、狀態(tài)、地址、電話、收貨人、物流、備注、商品類型、是否審核、審核回復(fù)、優(yōu)惠額。如圖5-4所示。圖5-4訂單E-R圖購物車包含一個(gè)用戶可以擁有一個(gè)購物車。一個(gè)購物車只能被一個(gè)用戶擁有，所以用戶和訂單存在的關(guān)系為一對一。、如圖5-5所示：購物車中包括訂單編號、用戶id、商品id、商品名稱、購買數(shù)量、單價(jià)、商品類型。如圖5-5所示。圖5-3購物車E-R圖本網(wǎng)站擁有優(yōu)惠券功能。一個(gè)用戶可以擁有多張優(yōu)惠券。一張優(yōu)惠券能被多個(gè)用戶擁有，所以用戶和訂單存在的關(guān)系為多對多。管理員可以管理優(yōu)惠券，一個(gè)管理員可以管理多張優(yōu)惠券，一張優(yōu)惠券可以被多個(gè)管理員管理，所以管理員和訂單的關(guān)系為多對多，其E-R圖如圖5-4所示：優(yōu)惠券信息表中包括優(yōu)惠券編號、創(chuàng)建時(shí)間、用戶id、名稱、券類型、滿額、優(yōu)惠額、生效時(shí)間、過期時(shí)間。如圖5-6所示。圖5-6優(yōu)惠券E-R圖本網(wǎng)站擁有管理員實(shí)體、用戶實(shí)體、商品實(shí)體、訂單實(shí)體、購物車實(shí)體、優(yōu)惠券實(shí)體。實(shí)體之間涉及多對多的關(guān)系有管理員與用戶、管理員與商品、管理員與訂單、管理員與優(yōu)惠券、用戶與商品、用戶與優(yōu)惠券，因?yàn)橐晃还芾韱T可以管理多個(gè)用戶，用戶可以被多個(gè)管理員管理；一位管理員可以管理多個(gè)商品，商品也可以被多個(gè)管理員管理；一位管理員可以管理多個(gè)訂單，多個(gè)訂單可以被多個(gè)管理員管理；一位管理員可以管理多張優(yōu)惠券，優(yōu)惠券可以被多個(gè)管理員管理；一名用戶可以購買多個(gè)商品，商品也可以被多個(gè)用戶購買；一名用戶可以擁有多張優(yōu)惠券，一張優(yōu)惠券也可以被多個(gè)用戶擁有。實(shí)體之間涉及一對多的關(guān)系有用戶與訂單、用戶與優(yōu)惠券，因?yàn)橐幻脩艨梢灾Ц抖鄠€(gè)訂單，但是一個(gè)訂單只能被一名用戶支付。實(shí)體之間涉及一對一的關(guān)系有用戶與購物車，因?yàn)橐幻脩糁荒軗碛幸粋€(gè)購物車，此購物車只能被一名用戶擁有。實(shí)體聯(lián)系E-R圖如圖5-6所示：圖5-6實(shí)體聯(lián)系E-R圖5.2數(shù)據(jù)庫表設(shè)計(jì)5.2.1管理員信息表管理員信息表是用來存放管理員信息的。包含id（管理員編號）、username（管理員用戶名）、password（管理員的密碼）、Image（管理員的頭像）、role（管理員角色，默認(rèn)值為管理員），其中管理員id設(shè)置為主鍵自動(dòng)增長。如表5-1所示：表5-1管理員信息表字段名稱類型長度注釋相關(guān)說明默認(rèn)值idbigint編號主鍵usernamevarchar200用戶名passwordvarchar200密碼Imagerolevarcharvarchar200100頭像角色管理員5.2.2用戶信息表用戶信息表是用來存放用戶信息的。包含id（用戶編號）、yonghuming（用戶的用戶名）、mima（用戶的密碼）、xingming（用戶的姓名）、touxiang（用戶的頭像）、xingbie（用戶的性別）、nianling（用戶的年齡）、youxiang（用戶的郵箱）、money（用戶的余額），其中用戶id設(shè)置為主鍵，余額默認(rèn)值為0。如表5-2所示：表5-2用戶信息表字段名稱類型長度注釋相關(guān)說明默認(rèn)值idbigint編號主鍵yonghumingvarchar200用戶名mimavarchar200密碼xingmingvarchar200姓名touxianglongtext4294967295頭像xingbievarchar200性別nianlingint年齡youxiangvarchar200郵箱moneydouble余額05.2.3商品信息表商品信息表是用來存放商品信息的。包括id（商品編號）、shangpinmingcheng（商品名稱）、baobeifenlei（寶貝分類）、fengge（風(fēng)格）、zhuticaizhi（主體材質(zhì)）、tupian（圖片）、guige（規(guī)格）、shangpinjieshao（商品介紹）、onelimittimes（單限）、alllimittimes（庫存）、discussnum（評論數(shù)）、price（價(jià)格）、storeupnum（收藏?cái)?shù)），其中商品id設(shè)置為主鍵，收藏?cái)?shù)和評論數(shù)默認(rèn)值為0。如表5-3所示。表5-3商品信息表字段名稱類型長度注釋相關(guān)說明默認(rèn)值idbigint編號主鍵shangpinmingchengvarchar200商品名稱baobeifenleivarchar200寶貝分類fenggevarchar200風(fēng)格zhuticaizhivarchar4294967295主體材質(zhì)tupianlongtext200圖片guigeshangpinjieshaoonelimittimesalllimittimesdiscussnumpricestoreupnumvarcharlongtextintintintdoubleint2004294967295規(guī)格商品介紹單限庫存評論數(shù)價(jià)格收藏?cái)?shù)005.2.4訂單信息表訂單信息表是用來存放訂單信息的，包括id（訂單序號）、orderid（訂單編號）、goodname（商品名稱）、picture（商品圖片）、buynumber（購買數(shù)量）、price（價(jià)格）、total（總價(jià)格）、type（支付類型）、status（狀態(tài)）、address（地址）、tel（電話）、consignee（收貨人）、logistics（物流）、remark（備注）、goodtype（商品類型）、sfsh（是否審核）、shhf（審核回復(fù)）、discountamount（優(yōu)惠額）。其中訂單id設(shè)置為主鍵，價(jià)格、總價(jià)格和優(yōu)惠額默認(rèn)值為0，支付類型默認(rèn)值為1。如表5-4所示。表5-4訂單信息表字段名稱類型長度注釋相關(guān)說明默認(rèn)值idbigint序號主鍵orderidvarchar200訂單編號goodnamevarchar200商品名稱picturelongtext4294967295商品圖片buynumberint購買數(shù)量pricedouble價(jià)格0totaldouble總價(jià)格0typeint支付類型1statusvarchar200狀態(tài)addressvarchar200地址telvarchar200電話consigneevarchar200收貨人logisticslongtext4294967295物流remarkvarchar200備注goodtypevarchar200商品類型sfshvarchar200是否審核shhflongtext4294967295審核回復(fù)discountamountdouble優(yōu)惠額05.2.5購物車信息表購物車信息表是用來存放購物車信息的。包括id（訂單編號）、userid（用戶id）、goodid（商品id）、goodname（商品名稱）、buynumber（購買數(shù)量）、price（單價(jià)）、goodtype（商品類型）。其中購物車id設(shè)置為主鍵。如表5-5所示。表5-5購物車信息表字段名稱類型長度字段說明主鍵默認(rèn)值idbigint編號主鍵useridbigint用戶idgoodidbigint商品idgoodnamevarchar200商品名稱buynumberint購買數(shù)量pricedouble單價(jià)goodtypevarchar200商品類型5.2.6優(yōu)惠券信息表優(yōu)惠券信息表是用來存放優(yōu)惠券信息的。包括id（優(yōu)惠券編號）、addtime（創(chuàng)建時(shí)間）、userid（用戶id）、name（名稱）、type（券類型）、fullamount（滿額）、discountamo（優(yōu)惠額）、startime（生效時(shí)間）、endtime（過期時(shí)間）。其中優(yōu)惠券id設(shè)置為主鍵，價(jià)格、創(chuàng)建時(shí)間默認(rèn)值為CURRENT_TIMESTAMP，滿額和優(yōu)惠額默認(rèn)值為0。如表5-6所示。表5-6優(yōu)惠券信息表字段名稱類型長度字段說明主鍵默認(rèn)值idbigint編號主鍵addtimetimestamp創(chuàng)建時(shí)間CURRENT_TIMESTAMPuseridbigint用戶idnamevarchar200名稱typevarchar200券類型fullamountdouble滿額0discountamodouble優(yōu)惠額0startimedatetime生效時(shí)間endtimedatetime過期時(shí)間6系統(tǒng)實(shí)現(xiàn)6.1系統(tǒng)前臺實(shí)現(xiàn)6.1.1注冊頁面效果及功能實(shí)現(xiàn)注冊界面主要包含了底部圖片、USER/REGISTER文字標(biāo)簽、用戶名、密碼、確認(rèn)密碼、姓名、頭像、注冊用戶按鈕、已有賬戶登錄。用戶注冊賬號時(shí)，輸入用戶名、密碼、確認(rèn)密碼、姓名、上傳頭像后，點(diǎn)擊“注冊”按鈕即可，其中用戶名、密碼、確認(rèn)密碼必填。注冊頁面實(shí)際運(yùn)行效果如下圖6-1所示。圖6-1用戶端注冊頁面效果該頁面運(yùn)用了Vue.js中的

created()

生命周期鉤子方法，根據(jù)查詢pageFlag和this.tableName的值設(shè)置的驗(yàn)證規(guī)則。用戶端注冊賬號功能實(shí)現(xiàn)代碼如下所示：created(){this.pageFlag=this.$route.query.pageFlag;if(this.$route.query.pageFlag=='register'){if('yonghu'==this.tableName){this.rules.yonghuming=[{required:true,message:'請輸入用戶名',trigger:'blur'}];}if('yonghu'==this.tableName){this.rules.mima=[{required:true,message:'請輸入密碼',trigger:'blur'}];}this.yonghuxingbieOptions="男,女".split(',');if('yonghu'==this.tableName){this.rules.money=[{required:true,validator:this.$validate.isNumber,trigger:'blur'}];}}},6.1.2首頁頁面效果及功能實(shí)現(xiàn)用戶進(jìn)入網(wǎng)站首頁頁面時(shí)，頁面頂部是導(dǎo)航欄和輪播圖展示，用戶可以根據(jù)商品名稱進(jìn)行搜索飾品，然后是系列推薦和新品預(yù)告展示，用戶能看見網(wǎng)站的一部分商品，接著是關(guān)于我們和系統(tǒng)簡介，用戶能夠了解到店鋪信息和非遺纏花絨花信息。首頁頁面實(shí)際運(yùn)行效果如下圖6-2所示：圖6-2首頁頁面效果該頁面創(chuàng)建了一個(gè)EntitxWrapper對象ew，用于構(gòu)建查詢條件。搜索功能的代碼如下：@RequestMapping("/lists")publicRlist(RonghuaxiEntityronghuaxi){EntityWrapper<RonghuaxiEntity>ew=newEntityWrapper<RonghuaxiEntity>();ew.allEq(MPUtil.allEQMapPre(ronghuaxi,"ronghuaxi"));returnR.ok().put("data",ronghuaxiService.selectListView(ew));}6.1.3系統(tǒng)簡介頁面效果及功能實(shí)現(xiàn)用戶在首頁的系統(tǒng)簡介板塊點(diǎn)擊更多按鈕后，進(jìn)入系統(tǒng)簡介頁面，主要簡單介紹了絨花、纏花的歷史與制作方法、材料。為了讓用戶初步了解非遺絨花纏花的歷史悠久和制作工藝的不易。系統(tǒng)簡介頁面實(shí)際運(yùn)行效果如圖6-3所示：圖6-3系統(tǒng)簡介頁面效果該頁面根據(jù)id、addtime、title、subtitle、content、picture的值來獲取MySQL數(shù)據(jù)表。獲取系統(tǒng)簡介內(nèi)容功能實(shí)現(xiàn)代碼如下：CREATETABLE`systemintro`(`id`bigint(20)NOTNULLAUTO_INCREMENTCOMMENT'主鍵',`addtime`timestampNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT'創(chuàng)建時(shí)間',`title`varchar(200)NOTNULLCOMMENT'標(biāo)題',`subtitle`varchar(200)DEFAULTNULLCOMMENT'副標(biāo)題',`content`longtextNOTNULLCOMMENT'內(nèi)容',`picture1`longtextCOMMENT'圖片1',`picture2`longtextCOMMENT'圖片2',`picture3`longtextCOMMENT'圖片3',PRIMARYKEY(`id`))6.1.4分類頁面效果及功能實(shí)現(xiàn)分類頁面以絨花系頁面為例，用戶在分類頁面中可以通過商品分類、商品的名稱、商品的價(jià)格區(qū)間、商品的風(fēng)格和商品的主體材質(zhì)進(jìn)行查找所需的飾品。并且可以根據(jù)價(jià)格升降進(jìn)行商品的排序，以便于實(shí)現(xiàn)快速找到用戶所需的對應(yīng)絨花發(fā)飾。分類頁面實(shí)際運(yùn)行效果如圖6-4所示：圖6-4分類頁面效果該頁面根據(jù)pricestart和priceend構(gòu)建查詢條件，限制價(jià)格的范圍，其中“data”是返回?cái)?shù)據(jù)的鍵，Page是查詢結(jié)果的值。價(jià)格升降排序代碼如下：@IgnoreAuth@RequestMapping("/list")publicRlist(@RequestParamMap<String,Object>params,RonghuaxiEntityronghuaxi,@RequestParam(required=false)Doublepricestart,@RequestParam(required=false)Doublepriceend,HttpServletRequestrequest){EntityWrapper<RonghuaxiEntity>ew=newEntityWrapper<RonghuaxiEntity>();if(pricestart!=null)ew.ge("price",pricestart);if(priceend!=null)ew.le("price",priceend);PageUtilspage=ronghuaxiService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,ronghuaxi),params),params));returnR.ok().put("data",page);}6.1.5商品詳情頁面效果及功能實(shí)現(xiàn)用戶選擇一個(gè)商品，點(diǎn)擊進(jìn)入商品詳情頁，用戶可以了解到商品的具體信息，包括名稱、分類、購買單限、價(jià)格、庫存、商品介紹和評論等等。以“翠綠森系發(fā)釵絨花”商品為例，點(diǎn)擊加號按鈕，添加商品數(shù)量，由于單限是3，商品添加至“大于3”時(shí)，點(diǎn)擊立即購買按鈕，頁面彈出“每人單限只能購買3件”，無法跳轉(zhuǎn)至下單頁面。當(dāng)用戶購買商品時(shí)個(gè)數(shù)選擇“小于等于3”時(shí)，點(diǎn)擊立即購買按鈕，跳轉(zhuǎn)至下單頁面。絨花系列商品搜索實(shí)際運(yùn)行效果如下圖6-5所示：圖6-5商品詳情頁面該頁面根據(jù)buyNow

函數(shù)，為了對用戶購買商品時(shí)的onelimittimes、detail.alllimittimes進(jìn)行判斷。點(diǎn)擊立即購買實(shí)現(xiàn)代碼如下所示：//立即購買buyNow(){//單次購買限制if(this.detail.onelimittimes>0&&this.detail.onelimittimes<this.buynumber){this.$message.error(`每人單次只能購買${this.detail.onelimittimes}件`);return}//庫存不夠if(this.detail.alllimittimes<=0){this.$message.error(`商品已售罄`);return}//庫存限制if(this.detail.alllimittimes>0&&this.detail.alllimittimes<this.buynumber){this.$message.error(`庫存不足`);return}用戶在瀏覽商品后，點(diǎn)擊商品后進(jìn)行商品詳情，點(diǎn)擊“點(diǎn)我收藏”按鈕，頁面彈出“收藏成功！”即可收藏成功。點(diǎn)擊導(dǎo)航欄個(gè)人中心按鈕，再點(diǎn)擊“我的收藏”按鈕進(jìn)入我的收藏頁面即可查看所收藏商品。根據(jù)名為storeup的方法，用于處理用戶的“收藏”行為，若res.data.code=0，將this.isStoreup

設(shè)置為

true，表示該項(xiàng)目已被收藏。表示此商品已經(jīng)被用戶收藏。收藏成功關(guān)鍵代碼如下所示：storeup(type){if(type==1&&!this.isStoreup){this.storeupP=this.title;this.storeupParams.picture=this.detailBanner[0];this.storeupPeltype=this.detail.baobeifenlei;this.storeupParams.refid=this.detail.id;this.storeupParams.type=type;this.$http.post('storeup/add',this.storeupParams).then(res=>{if(res.data.code==0){this.isStoreup=true;this.detail.storeupnum++this.$http.post('ronghuaxi/update',this.detail).then(res=>{});this.$message({type:'success',message:'收藏成功!',duration:1500,});}});}},6.1.6購物車頁面效果及功能實(shí)現(xiàn)用戶在購買某商品之后，在首頁頁面導(dǎo)航欄中點(diǎn)擊購物車按鈕查看購物車，可以看見商品名稱、價(jià)格、數(shù)量、總價(jià)、操作刪除按鈕和點(diǎn)擊購買按鈕。若要?jiǎng)h除商品，點(diǎn)擊刪除按鈕，彈出提示框，提示“是否確認(rèn)刪除”、取消按鈕和確定按鈕，選擇確定按鈕即可。購物車頁面實(shí)際運(yùn)行效果如下圖6-6所示，刪除購物車中的商品效果如圖6-7所示：圖6-6購物車界面圖6-7刪除購物車中的商品效果展示該頁面根據(jù)handleDelete方法用于處理刪除操作，若data.code為0，表示刪除操作成功。刪除購物車中的商品關(guān)鍵代碼如下所示：handleDelete(index,row){this.$confirm('是否確認(rèn)刪除?','提示',{confirmButtonText:'確定',cancelButtonText:'取消',type:'warning'}).then(()=>{letdelIds=newArray();delIds.push(row.id);this.$http.post('cart/delete',delIds).then(res=>{if(res.data.code==0){this.$message({type:'success',message:'刪除成功!',duration:1500,onClose:()=>{this.getCartList();}});}});});},6.1.7收貨地址頁面效果及功能實(shí)現(xiàn)在收貨地址頁面，用戶填寫聯(lián)系人、手機(jī)號碼和地址后，點(diǎn)擊保存按鈕即可新增收貨地址。點(diǎn)擊“是”按鈕時(shí)，將此地址設(shè)置為默認(rèn)地址，點(diǎn)擊“否”按鈕，則取消設(shè)置為默認(rèn)地址，方便用戶在下單時(shí)快速獲取收貨地址。收貨地址頁面實(shí)際運(yùn)行效果如圖6-8所示：圖6-8收貨地址界面該頁面在Session中獲取用戶的ID，如果新添加的地址被標(biāo)記為默認(rèn)地址（isdefault屬性為“是”)，則需要將該用戶的其他地址都設(shè)置為非默認(rèn)地址。添加收貨地址功能代碼如下所示：@RequestMapping("/save")publicRsave(@RequestBodyAddressEntityaddress,HttpServletRequestrequest){//ValidatorUtils.validateEntity(address);address.setUserid((Long)request.getSession().getAttribute("userId"));LonguserId=(Long)request.getSession().getAttribute("userId");if(address.getIsdefault().equals("是")){addressService.updateForSet("isdefault='否'",newEntityWrapper<AddressEntity>().eq("userid",userId));}address.setUserid(userId);addressService.insert(address);returnR.ok();}6.1.8我的訂單頁面效果及功能實(shí)現(xiàn)用戶點(diǎn)擊首頁導(dǎo)航欄中的個(gè)人中心，進(jìn)入個(gè)人中心頁面，點(diǎn)擊我的訂單按鈕，進(jìn)入我的訂單頁面，可以查看未支付、已支付、已發(fā)貨、已完成、已退款、已取消的商品信息。確認(rèn)收貨需點(diǎn)擊已發(fā)貨按鈕，再點(diǎn)擊“確認(rèn)收貨”按鈕，提示“是否確認(rèn)收貨？”、取消按鈕和確定按鈕，選擇確定按鈕后，頁面彈出“確認(rèn)收貨成功”即可。退貨需點(diǎn)擊已完成按鈕，再點(diǎn)擊“退貨”按鈕，頁面提示“確認(rèn)退貨嗎，審核通過后退款金額將返回賬戶中?！?、取消按鈕、確認(rèn)按鈕，點(diǎn)擊確認(rèn)按鈕后，頁面彈出頁面彈出“申請成功”，后臺審核通過后，退貨成功。我的訂單界面實(shí)際運(yùn)行效果如下圖6-9所示：圖6-9我的訂單頁面該頁面定義了一個(gè)名為confirm的方法，來處理訂單確認(rèn)收貨的操作，若用戶點(diǎn)擊確認(rèn)收貨按鈕后，顯示“確認(rèn)收貨成功”，并設(shè)置消息的顯示時(shí)間為1500毫秒。收貨關(guān)鍵代碼如下所示：confirm(item){this.$confirm(`是否確定收貨？`,"提示",{confirmButtonText:"確定",cancelButtonText:"取消",type:"warning"}).then(()=>{item.status='已完成'this.$http.post(`orders/update`,item).then(res=>{this.$message({message:'確認(rèn)收貨成功',type:'success',duration:1500,onClose:()=>{this.getMyOrderList(1);}});});});},該頁面定義了一個(gè)名為returnGood的方法，來處理用戶退貨的操作，若用戶點(diǎn)擊確認(rèn)按鈕后，顯示“申請成功”，并設(shè)置消息的顯示時(shí)間為1500毫秒。退貨關(guān)鍵代碼如下所示：//退貨returnGood(item){this.$confirm(`確定退貨嗎？審核通過后退款金額將返回賬戶中。`,"提示",{confirmButtonText:"確定",cancelButtonText:"取消",type:"warning"}).then(()=>{item.sfsh='待審核'this.$http.post(`orders/update`,item).then(res=>{this.$message({message:'申請成功',type:'success',duration:1500,onClose:()=>{this.getMyOrderList(1);}});})});},6.1.9個(gè)人中心頁面效果及功能實(shí)現(xiàn)用戶點(diǎn)擊首頁導(dǎo)航欄中的個(gè)人中心，進(jìn)入個(gè)人中心頁面，點(diǎn)擊我的訂單按鈕，進(jìn)入我的訂單頁面，點(diǎn)擊“點(diǎn)我充值”按鈕，頁面彈出用戶充值框，用戶輸入充值金額和選擇充值方式，點(diǎn)擊“確認(rèn)充值”按鈕，頁面彈出“充值成功”即可充值成功。用戶查看優(yōu)惠券需要點(diǎn)擊“我的優(yōu)惠券”按鈕，即可查看已過期優(yōu)惠券、已使用優(yōu)惠券、可使用優(yōu)惠券。個(gè)人中心頁面充值和查看優(yōu)惠券界面實(shí)際運(yùn)行效果如圖6-10所示，用戶充值界面效果如圖6-11所示：圖6-10個(gè)人中心界面圖6-11用戶充值界面效果該頁面根據(jù)chongzhi的方法，用于處理用戶充值操作。先檢查

this.chongzhiForm.money

是否為空，如果為空，則提示用戶輸入充值金額。然后檢查充值金額是否小于或等于0，如果是，則提示用戶輸入正確的充值金額。充值關(guān)鍵代碼如下所示：chongzhi(){if(this.chongzhiForm.money==''){this.$message({message:'請輸入充值金額',type:'error',duration:1500});return;}if(this.chongzhiForm.money<=0){this.$message({message:'請輸入正確的充值金額',type:'error',duration:1500});return;}if(this.chongzhiForm.radio==''){this.$message({message:'請選擇充值方式',type:'error',duration:1500});return;}if(!this.sessionForm.money){this.sessionForm.money=parseFloat(this.chongzhiForm.money)}else{this.sessionForm.money=parseFloat(this.sessionForm.money)+parseFloat(this.chongzhiForm.money);}this.$http.post(this.userTableName+'/update',this.sessionForm).then(res=>{if(res.data.code==0){this.setSession()this.$message({message:'充值成功',type:'success',duration:1500,onClose:()=>{this.dialogFormVisibleMoney=false;}});}});},6.1.10我的收藏頁面效果及功能實(shí)現(xiàn)用戶在個(gè)人中心頁面點(diǎn)擊“我的收藏”按鈕后，進(jìn)入我的收藏頁面，在此頁面用戶可以查找到自己收藏的所有商品信息，可以根據(jù)名稱進(jìn)行查詢商品。該頁面上方是輪播圖，輪播圖能夠自動(dòng)播放，也可以用戶點(diǎn)擊按鈕進(jìn)行切換圖片。點(diǎn)擊返回按鈕即可返回至個(gè)人中心頁面，實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)。我的收藏頁面實(shí)際運(yùn)行效果如圖6-12所示：圖6-12我的收藏界面效果該頁面定義了一個(gè)getCarousel

的方法，用

page

和

limit

參數(shù)，來從服務(wù)器獲取第一頁的3條輪播圖數(shù)據(jù)。獲取輪播圖功能實(shí)現(xiàn)代碼如下：getCarousel(){this.$http.get('config/list',{params:{page:1,limit:3}}).then(res=>{if(res.data.code==0){this.carouselList=res.data.data.list;}});},6.2系統(tǒng)后臺實(shí)現(xiàn)6.2.1用戶管理頁面效果及功能實(shí)現(xiàn)用戶注冊后在數(shù)據(jù)庫生成一條用戶數(shù)據(jù)，并顯示在用戶管理列表中，管理員可對用戶數(shù)據(jù)進(jìn)行刪除。點(diǎn)擊刪除按鈕，提示“確定進(jìn)行[批量刪除]操作?”、取消按鈕和確定按鈕，選擇確定按鈕即可進(jìn)行刪除用戶信息。用戶管理頁面刪除功能實(shí)際運(yùn)行效果如下圖6-13所示：圖6-13用戶管理界面該頁面定義了一個(gè)deleteHandler的方法，用于處理刪除操作，使用

this.$confirm

方法彈出一個(gè)確認(rèn)框，詢問用戶是否確定進(jìn)行刪除或批量刪除的操作。批量刪除用戶信息代碼如下所示：//刪除deleteHandler(id){varids=id?[Number(id)]:this.dataListSelections.map(item=>{returnNumber(item.id);});this.$confirm(`確定進(jìn)行[${id?"刪除":"批量刪除"}]操作?`,"提示",{confirmButtonText:"確定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$http({url:"users/delete",method:"post",data:ids}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.search();}});}else{this.$message.error(data.msg);}});});},6.2.2商品管理頁面效果及功能實(shí)現(xiàn)以絨花系管理為例，管理員點(diǎn)擊絨花系管理，下拉顯示絨花系，點(diǎn)擊絨花系進(jìn)入絨花系頁面，點(diǎn)擊“查看評論”按鈕，點(diǎn)擊刪除按鈕，提示“確定進(jìn)行[刪除]操作?”、取消按鈕和確定按鈕，選擇確定按鈕，頁面彈出“操作成功”即可刪除評論，商品管理頁面實(shí)際運(yùn)行效果如圖6-14所示，絨花系評論頁面如圖6-15所示：圖6-14絨花系管理界面圖6-15絨花系評論界面該頁面使用

discussDel

的方法，使管理員用于處理刪除用戶的評論，若數(shù)據(jù)

res.data

存在，并且

res.data.code

的值為0，表示刪除操作成功。刪除評論代碼如下所示：discussDel(id){this.$confirm('確定進(jìn)行[刪除]操作？').then(_=>{this.$http.post('discussdiscussxinpinyugao/delete',[id]).then(res=>{if(res.data&&res.data.code==0){this.addDiscussNum(1)this.$message({type:'success',message:'刪除成功!',duration:1500,onClose:()=>{this.getDiscussList(1);}});}})}).catch(_=>{});},6.2.3添加商品信息頁面效果及功能實(shí)現(xiàn)以添加絨花系商品為例，在絨花系商品信息頁面，頁面包括商品名稱、寶貝分類、風(fēng)格、主體材質(zhì)、圖片、規(guī)格、上架日期、單限、庫存、價(jià)格、商品介紹、保存按鈕和取消按鈕。管理員在添加商品名稱、寶貝分類價(jià)格時(shí)必填，單限數(shù)和庫存數(shù)不能為負(fù)數(shù)，點(diǎn)擊保存按鈕即可添加成功。添加商品信息頁面實(shí)際運(yùn)行效果如下圖6-16所示：圖6-16添加商品信息頁面效果該頁面定義了一個(gè)onSubmit的方法，主要用于在保存商品信息時(shí)進(jìn)行驗(yàn)證。檢查this.ruleForm.price（價(jià)格字段的值）是否小于0。如果是，則通過

this.$message.error

方法提示“價(jià)格不能輸入負(fù)數(shù)”，并且使用return語句提前退出方法，阻止后續(xù)代碼的執(zhí)行。保存商品信息驗(yàn)證代碼如下所示：onSubmit(){if(this.ruleForm.price<0){this.$message.error("價(jià)格不能輸入負(fù)數(shù)");return}if(this.ruleForm.alllimittimes<0){this.$message.error("庫存不能輸入負(fù)數(shù)");return}if(this.ruleForm.onelimittimes<0){this.$message.error("單次購買不能輸入負(fù)數(shù)");return}},6.2.4訂單管理頁面效果及功能實(shí)現(xiàn)訂單管理頁面主要是管理員查看訂單狀態(tài)、刪除訂單信息、查看訂單詳情，可以進(jìn)行發(fā)貨、退貨、查看物流信息。在商品過多時(shí)，管理員瀏覽完第一頁訂單后，可以點(diǎn)擊下方“上一頁”或者“下一頁”按鈕進(jìn)行跳轉(zhuǎn)換頁，實(shí)現(xiàn)頁面的切換。訂單管理頁面的實(shí)際運(yùn)行效果如下圖6-17所示：圖6-17訂單管理頁面效果該頁面根據(jù)pricestart和priceend構(gòu)建查詢條件，限制價(jià)格的范圍，其中查詢結(jié)果以PageUtis對象的形式返回，包含了查詢結(jié)果的分頁信息和數(shù)據(jù)列表。上一頁、下一頁按鈕代碼如下所示：@RequestMapping("/page")publicRpage(@RequestParamMap<String,Object>params,RonghuaxiEntityronghuaxi,@RequestParam(required=false)Doublepricestart,@RequestParam(required=false)Doublepriceend,HttpServletRequestrequest){EntityWrapper<RonghuaxiEntity>ew=newEntityWrapper<RonghuaxiEntity>();if(pricestart!=null)ew.ge("price",pricestart);if(priceend!=null)ew.le("price",priceend);PageUtilspage=ronghuaxiService.queryPage(params,MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew,ronghuaxi),params),params));returnR.ok().put("data",page);}7系統(tǒng)測試7.1用戶下單訂單功能測試用戶查看訂單信息需要選擇一個(gè)商品后，點(diǎn)擊立即購買按鈕，跳轉(zhuǎn)到確認(rèn)下單頁面，支付成功后，跳轉(zhuǎn)到我的訂單頁面，即可查看訂單詳情。為實(shí)現(xiàn)用戶下單功能測試用例如表7-1所示。表7-1用戶查看訂單信息測試表用例編號操作流程測試結(jié)果12點(diǎn)擊“立即購買”按鈕點(diǎn)擊“支付”按鈕跳轉(zhuǎn)至確認(rèn)下單頁面支付成功后，跳轉(zhuǎn)至我的訂單頁面項(xiàng)目預(yù)約測試結(jié)果如表7-2所示。表7-2增添商品信息測試結(jié)果用例編號輸入輸出12點(diǎn)擊“立即購買”按鈕點(diǎn)擊“支付”按鈕進(jìn)入確認(rèn)下單頁面頁面彈出“購買成功”，進(jìn)入我的訂單頁面7.2商品收藏與取消功能測試商品收藏信息需要在商品詳情中，點(diǎn)擊點(diǎn)我收藏按鈕，即可收藏該商品。若收藏該商品后需要取消該商品，點(diǎn)擊取消收藏按鈕即可。為實(shí)現(xiàn)商品收藏信息功能測試用例如表7-3所示。表7-3商品收藏與取消信息測試用例用例編號操作流程測試結(jié)果12擊商品名稱旁的“點(diǎn)我收藏”按鈕點(diǎn)擊“取消收藏”按鈕頁面彈出“已收藏”頁面彈出“已取消”商品收藏和取消信息測試結(jié)果如表7-4所示。表7-4商品收藏和取消信息測試結(jié)果用例編號輸入輸出12點(diǎn)擊“點(diǎn)我收藏”按鈕點(diǎn)擊“取消收藏”按鈕頁面彈出“已收藏”，五角星圖標(biāo)由綠色變成白色，文字由“點(diǎn)我收藏”變成“取消收藏”頁面彈出“取消成功”，五角星圖標(biāo)由白色變成綠色，文字由“取消收藏”變成“點(diǎn)我收藏”7.3商品搜索功能測試搜索功能以絨花系頁面為例，查找絨花商品時(shí)，可以根據(jù)商品名稱或者價(jià)格區(qū)間查詢，輸入商品名稱或者價(jià)格區(qū)間后，點(diǎn)擊查詢按鈕，即可查找相應(yīng)商品。為實(shí)現(xiàn)商品搜索信息功能測試用例如表7-5所示。表7-5商品搜索信息測試用例用例編號操作流程測試結(jié)果1234用戶輸入存在的商品名稱用戶輸入不存在的商品名稱用戶輸入存在的商品價(jià)格區(qū)間用戶輸入不存在的商品價(jià)格區(qū)間頁面顯示對應(yīng)的商品頁面彈出“無此商品”頁面顯示對應(yīng)的商品頁面彈出“無此商品”商品搜索信息測試結(jié)果如表7-6所示。表7-6商品搜索信息測試結(jié)果用例編號輸入輸出1234輸入“發(fā)釵絨花”，點(diǎn)擊查詢輸入“發(fā)釵纏花”，點(diǎn)擊查詢輸入價(jià)格區(qū)間為70-90，點(diǎn)擊查詢輸入價(jià)格區(qū)間為20-35，點(diǎn)擊查詢頁面顯示出三個(gè)發(fā)釵絨花商品頁面無商品頁面顯示出八個(gè)發(fā)釵絨花商品頁面無商品7.4管理商品分類功能測試管理人員新增商品分類信息需要在寶貝分類管理頁面中，點(diǎn)擊增加按鈕，輸入寶貝分類名稱，圖片，點(diǎn)擊保存按鈕即可，其中寶貝分類名稱必填。為實(shí)現(xiàn)管理商品分類信息功能測試用例如表7-7所示。表7-7管理商品分類信息測試用例用例編號操作流程測試結(jié)果12管理員點(diǎn)擊增加按鈕，信息為空填寫寶貝分類名稱，點(diǎn)擊保存按鈕保存失敗，提示未填寫完整信息新增成功管理商品分類信息測試結(jié)果如表7-8所示。表7-8管理商品分類信息測試結(jié)果用例編號輸入輸出12管理員點(diǎn)擊增加按鈕，未填寫寶貝分類填寫寶貝分類名稱，點(diǎn)擊保存按鈕提示寶貝分類不能為空頁面彈出“操作成功”7.5管理商品詳情功能測試以增加絨花系商品為例，管理人員新增商品信息需要在絨花系管理頁面，點(diǎn)擊增加按鈕，輸入商品名稱，選擇寶貝分類、風(fēng)格、主體材質(zhì)，上傳商品圖片，輸入規(guī)格、單限、庫存、價(jià)格，填寫商品介紹，其中商品名稱、寶貝分類必填，單限和庫存不能為負(fù)。為實(shí)現(xiàn)增加商品信息功能測試用例如表7-9所示。表7-9增加商品信息測試用例用例編號操作流程測試結(jié)果123管理員點(diǎn)擊增加按鈕，商品信息為空新增商品信息，合規(guī)填寫商品信息單限或庫存為負(fù)保存失敗，提示未填寫完整信息新增成功新增失敗增加商品信息測