[6]Uni-app的特點和優(yōu)勢包括：跨平臺支持：Uni-app支持一次編寫，多端發(fā)布。開發(fā)者可以使用同一套代碼基于Vue.js開發(fā)，然后通過編譯工具生成適用于多個平臺的應(yīng)用程序，包括小程序、App、H5等。組件化開發(fā)：Uni-app采用了Vue.js的組件化開發(fā)理念，使得開發(fā)者能夠更加高效地組織和管理代碼，提高代碼復(fù)用性和可維護(hù)性REF_Ref163232679\r\h[6]。靈活擴(kuò)展：Uni-app提供了豐富的原生能力擴(kuò)展和插件市場，允許開發(fā)者通過插件或者原生擴(kuò)展來實現(xiàn)更多的功能需求。性能優(yōu)化：Uni-app對性能進(jìn)行了優(yōu)化，可以在不同平臺上提供流暢的用戶體驗，包括對渲染速度、內(nèi)存占用、以及應(yīng)用啟動速度的優(yōu)化。Uni-app是一個靈活且強(qiáng)大的跨平臺開發(fā)框架，為開發(fā)者提供了便捷的方式來構(gòu)建高性能、跨平臺的應(yīng)用程序。通過統(tǒng)一的開發(fā)方式，開發(fā)者可以更高效地將應(yīng)用部署到不同的平臺，減少了重復(fù)工作，提高了開發(fā)效率。系統(tǒng)需求分析數(shù)據(jù)需求本課題是面向所有大眾開發(fā)的一款在線購物商城小程序，對于該app的數(shù)據(jù)需求可以從以下的幾個方面進(jìn)行考慮：從管理員角度分析，可得到管理員的帳號，用戶名，密碼，注冊時間，商品的增刪改查等。從用戶角度分析，可得到用戶的賬號，密碼，頭像，購物車數(shù)據(jù)，支付寶或微信支付等。綜上所述，在開發(fā)該系統(tǒng)的數(shù)據(jù)層時可以從上面所列兩個方面去設(shè)計數(shù)據(jù)庫的表，進(jìn)而能將所需數(shù)據(jù)全部包含起來。功能需求面向管理員的功能有：商品的上架、商品的編輯、訂單的管理、商戶賬號的管理、商品分類管理、商家信息管理、商品物流信息管理等。面向普通用戶的功能有：登錄、注冊、修改密碼、編輯個人信息、瀏覽商品列表、加入商品至購物車、點擊查看商品詳情、支付購買商品、編輯個人收貨地址等。性能需求UniApp云開發(fā)在線商城需要具備快速的頁面加載速度和交互響應(yīng)時間，能夠處理大量的用戶訪問并發(fā)和訂單處理并發(fā)，同時具備良好的擴(kuò)展性，包括用戶增長擴(kuò)展和功能擴(kuò)展。系統(tǒng)應(yīng)優(yōu)化內(nèi)存和CPU利用率，確保高效運行，并對數(shù)據(jù)庫和網(wǎng)絡(luò)傳輸性能進(jìn)行優(yōu)化，以提高系統(tǒng)的響應(yīng)速度和穩(wěn)定性，為用戶提供良好的購物體驗。

部分系統(tǒng)用例分析整體用例分析在整體用例圖中，我們有以下幾個參與者和用例：參與者：用戶：指使用在線商城系統(tǒng)的客戶。管理員：指管理和維護(hù)在線商城系統(tǒng)的工作人員。用例：用戶注冊：用戶創(chuàng)建一個新的賬戶來訪問和使用在線商城系統(tǒng)。用戶登錄：指用戶使用自己已經(jīng)注冊好的賬號去登錄該在線商城小程序系統(tǒng)進(jìn)行瀏覽以及購買商品等操作。瀏覽商品：指用戶登錄進(jìn)小程序后瀏覽商家已上架的所有商品。添加商品到購物車：用戶將想要購買的的商品添加到購物車。從購物車中刪除商品：用戶可以將購物車中不再感興趣的商品刪除。下單購買商品：用戶可以將已經(jīng)加入到購物車的商品進(jìn)行選擇后支付購買，購買后會生成訂單。支付訂單：當(dāng)用戶支付完成后會生成相應(yīng)的訂單信息。管理商品信息：管理員能對系統(tǒng)中的商品進(jìn)行添加、編輯、刪除等操作。管理訂單信息：管理員可以查看、處理和管理系統(tǒng)中的訂單信息。商家賬號管理：管理員可以添加、編輯、刪除商家內(nèi)部員工的賬號以及對賬號進(jìn)行權(quán)限分配。圖4.1整體用例分析圖用戶管理用例圖管理員能夠?qū)τ脩糍~號進(jìn)行管理，例如查看、修改用戶信息、登錄情況、刪除用戶賬戶。圖4.2用戶管理用例圖商品管理用例圖管理員可以對商品進(jìn)行添加、刪除、編輯等操作，以及查看已上架的商品列表。圖4.3商品管理用例圖訂單管理用例圖管理員既可以進(jìn)行取消、查詢以及修改訂單信息等操作，也可以使用管理員權(quán)限手動創(chuàng)建訂單。圖4.4訂單管理用例圖

系統(tǒng)設(shè)計與實現(xiàn)總體設(shè)計軟件結(jié)構(gòu)設(shè)計總體結(jié)構(gòu)分為用戶模塊與管理員模塊。用戶模塊是面向普通用戶的功能模塊。它包含以下子模塊：注冊與登錄：其中包括用戶自己創(chuàng)建賬號、編輯個人信息等功能。商品瀏覽和搜索：該系統(tǒng)為用戶提供商品分類、關(guān)鍵字搜索等功能，以方便用戶進(jìn)行商品的挑選。購物車管理：在用戶將感興趣的商品添加到購物車后，用戶可以管理購物車中的商品，如添加或刪除。支付與結(jié)算：用戶可以選擇支付方式并完成支付，如微信或支付支付。管理員模塊是面向商城后臺管理人員的功能模塊。主要包含以下子模塊：商品管理：管理員可以添加、修改和刪除商品信息，如設(shè)置商品價格、名稱、規(guī)格等。訂單管理：管理員可以查看、處理和修改用戶的訂單，如發(fā)貨、取消、退款等操作。商家管理：管理員可以編輯商家信息，如商家名稱、地址、logo等。圖5.1系統(tǒng)功能模塊圖數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計要點用戶信息表表5.1用戶信息表列名數(shù)據(jù)類型是否留空描述user_IDINTEGER否主鍵，唯一標(biāo)識用戶usernameVARCHAR(50)否用戶名，用于登錄nicknameVARCHAR(50)是用戶的昵稱passwordVARCHAR(100)否加密后的密碼mobileVARCHAR(20)否用戶的電話號碼收貨地址表表5.2收貨地址表字段名數(shù)據(jù)類型是否留空描述idINTEGER否主鍵,唯一標(biāo)識收貨地址phoneSTRING否用戶的聯(lián)系電話city_codeSTRING否代表收貨地址所屬城市的代碼user_idINTRGER否外鍵，關(guān)聯(lián)到用戶表的ID字段，用于標(biāo)識收貨地址所屬的用戶city_nameSTRING否收貨地址所屬城市的名稱addressSTRING否具體的收貨地址，包括街道、門牌號等信息usernameSTRING否收貨地址所屬用戶的名稱或昵稱

商家信息表表5.3商家信息表字段名數(shù)據(jù)類型是否留空描述idINTEGER否主鍵，唯一標(biāo)識每個商家descSTRING是商家的店鋪簡介mobileSTRING否商家的聯(lián)系電話imagevalueSTRING是商家店鋪的頭像圖像nameSTRING否商家店鋪的名稱addressSTRING否商家店鋪的具體地址商品信息表表5.4商品信息表字段名數(shù)據(jù)類型是否留空屬性idINTEGER否主鍵，商品的唯一標(biāo)識goodsNameSTRING否商品名稱goodsPriceDecimal否商品價格goodsImgSTRING否商品圖片goodsTypeSTRING否商品類型goodsSkuSTRING是商品規(guī)格goodsDescSTRING是商品描述

部分?jǐn)?shù)據(jù)庫概念結(jié)構(gòu)設(shè)計用戶信息用戶ID：用于唯一標(biāo)識用戶，作為主鍵。賬號：用戶登錄系統(tǒng)時使用的賬號。昵稱：用戶在商城中顯示的昵稱。登錄密碼：用戶登錄時使用的密碼。電話：用戶的電話號碼，用于聯(lián)系或其他相關(guān)通訊。圖5.2用戶表E-R圖

收貨地址ID：主鍵，唯一標(biāo)識收貨地址的ID。聯(lián)系電話：用戶的聯(lián)系電話，用于配送員或商家與用戶進(jìn)行溝通。城市代碼：代表收貨地址所屬城市的代碼，可以使用標(biāo)準(zhǔn)的行政區(qū)劃代碼或自定義的城市代碼。用戶ID：關(guān)聯(lián)到用戶表的ID字段，用于標(biāo)識收貨地址所屬的用戶。城市名稱：收貨地址所屬城市的名稱。地址：具體的收貨地址，包括街道、門牌號等信息。用戶名：收貨地址所屬用戶的名稱或昵稱。圖5.3收貨地址E-R圖

商家信息商家ID：唯一標(biāo)識每個商家的ID。店鋪簡介：商家的店鋪簡介，可以包括關(guān)于商家的描述、特色等信息。聯(lián)系電話：商家的聯(lián)系電話，用于顧客與商家進(jìn)行溝通。店鋪頭像：商家店鋪的頭像圖像，用于展示商家的品牌形象。店鋪名稱：商家店鋪的名稱。店鋪地址：商家店鋪的具體地址，包括街道、門牌號等信息。圖5.4商家信息E-R圖商品信息商品ID：商品的唯一標(biāo)識，作為主鍵。商品名稱：這是商品的名稱，用來簡單地描述商品。商品價格：用于存放商品的價格信息。在此表中，使用Decimal數(shù)據(jù)類型來確保價格的精確度，并保留小數(shù)位。商品圖片：該字段存儲商品的圖片URL，可以是一個指向服務(wù)器中存儲的商品圖片的鏈接。商品類型：該字段用于對商品進(jìn)行分類，以便在商城中組織和展示商品。例如，食品、服裝、美妝等不同的商品分類。商品規(guī)格：這個字段用于存儲商品的規(guī)格信息，可以是字符串類型，可以記錄商品的尺寸、顏色、重量等信息。商品描述：商品的描述，可以包括關(guān)于商品的詳細(xì)描述、特點等信息。圖5.5商品信息E-R圖詳細(xì)設(shè)計登錄與注冊界面展示用戶可以在此界面進(jìn)行登錄、注冊賬號以及找回密碼。其中登錄的方式包括使用賬號、密碼登錄以及短信驗證碼的方式，用戶登錄后會自動跳轉(zhuǎn)到商城首頁界面。圖5.6登錄頁面關(guān)鍵代碼下面是該界面使用賬號密碼登錄部分的關(guān)鍵代碼。pwdLogin(){pwdLogin(){ if(!this.password.length){ this.focusPassword=true returnuni.showToast({ title:'請輸入密碼', icon:'none', duration:3000 }); } if(!this.username.length){ this.focusUsername=true returnuni.showToast({ title:'請輸入手機(jī)號/用戶名/郵箱', icon:'none', duration:3000 }); } if(this.needCaptcha&&this.captcha.length!=4){ this.$refs.captcha.getImageCaptcha() returnuni.showToast({ title:'請輸入驗證碼', icon:'none', duration:3000 }); } if(this.needAgreements&&!this.agree){ returnthis.$refs.agreements.popup(this.pwdLogin) } letdata={ "password":this.password, "captcha":this.captcha } if(/^1\d{10}$/.test(this.username)){ data.mobile=this.username }elseif(/@/.test(this.username)){ data.email=this.username }else{ data.username=this.username } uniIdCo.login(data).then(e=>{ this.loginSuccess(e) }).catch(e=>{ if(e.errCode=='uni-id-captcha-required'){ this.needCaptcha=true }elseif(this.needCaptcha){ //登錄失敗，自動重新獲取驗證碼 this.$refs.captcha.getImageCaptcha() } })},商城首頁界面展示用戶登錄后會自動跳轉(zhuǎn)到此界面，在此界面能夠查看到當(dāng)前上架的所有商品，可以根據(jù)分類篩選商品，也可以根據(jù)關(guān)鍵詞搜索商品。點擊商品后面的“”圖標(biāo)，可以將該商品加入到購物車中。管理員可以點擊“后臺管理”跳轉(zhuǎn)到管理界面。點擊商家名稱可以查看商家信息，包括聯(lián)系電話、地址等。圖5.7首頁頁面關(guān)鍵代碼下面是該界面點擊選項卡商品列表自動滾動到相應(yīng)部分以及點擊搜索圖標(biāo)跳轉(zhuǎn)到搜索界面部分的關(guān)鍵代碼。/*跳轉(zhuǎn)到搜索頁面*//*跳轉(zhuǎn)到搜索頁面*/goSearch(){ uni.navigateTo({ url:"/pages/seach/seach" })},//調(diào)用方法滾動頁面...mapMutations(['setFoldState']),/*監(jiān)聽右側(cè)盒子滾動*/rightScrollEvent(e){ letscrollTop=Math.ceil(e.detail.scrollTop); /*如果只有一行數(shù)據(jù)是不需要花括號的*/ letidx=this.rightArr.findIndex((value,index,arr)=>scrollTop>=value&&scrollTop<arr[index+1]) this.currentIndex=idx; this.leftScrollValue=this.leftArr[idx]; /*頁面滾動到一定距離之后就折疊頂部*/ if(scrollTop<300){ //this.foldStatus=false this.setFoldState(false) } if(scrollTop>400){ //this.foldStatus=true this.setFoldState(true) }},clickNav(e){//左側(cè)盒子點擊之后右側(cè)盒子變化 //console.log(e); if(this.currentIndex==e)return; this.currentIndex=e; //如果存在就清除 if(this.timer)clearTimeout(this.timer) //設(shè)置定時器防抖 this.timer=setTimeout(()=>{ //點擊了之后top的值就是求出來的右側(cè)的數(shù)組的值 this.rightScrollValue=this.rightArr[e]; this.leftScrollValue=this.leftArr[e]; },200)}購物車界面展示用戶在首頁點擊商品后面的“”圖標(biāo)將商品加入到購物車后，首頁下方就會出現(xiàn)“”購物車圖標(biāo)，點擊購物車就能打開購物車列表。在該界面可以增加商品的數(shù)量，以及將已加入的商品移除出購物車，也可以點擊“清空”將購物車?yán)锏纳唐芬绘I清空。圖5.8購物車頁面關(guān)鍵代碼下面是該界面點擊清空購物車、以及跳轉(zhuǎn)到訂單支付界面部分的關(guān)鍵代碼。<script><script> import{mapGetters,mapMutations}from'vuex' import{priceFormat,discount}from'../../utils/tools.js' exportdefault{ props:{ type:{ type:String, default:'' }, payState:{ type:Boolean, default:false } }, name:"car-layout", data(){ return{ carShow:false, }; }, methods:{ ...mapMutations(['SET_CARS_LIST']), /*更改key的獲取為一個方法兼容小程序*/ carKey(item){ returnitem.goodsid+JSON.stringify(item.skuArr) }, priceFormat, /*點擊清空購物車*/ removeAll(){ this.SET_CARS_LIST() }, /*點擊購物車圖標(biāo)*/ cartClick(){ this.carShow=!this.carShow; }, /*跳轉(zhuǎn)到訂單支付頁面*/ goPay(){ uni.navigateTo({ url:'/pages/pay/pay' }) }, /*確認(rèn)支付*/ confirmPay(){ if(!this.payState)return //console.log(1); this.$emit('confirmPay') } }, computed:{ ...mapGetters(['carList','totalPrice','carNum']) } }</script>訂單支付界面展示用戶在選擇好需要購買的商品后，點擊“選好了”就會跳轉(zhuǎn)到訂單支付界面，在此界面中用戶可以自行選擇支付方式（系統(tǒng)目前已對接支付寶支付平臺）、收貨地址，也能查看到所選商品的總價格。點擊收貨地址會自動跳轉(zhuǎn)到“我的地址”界面。點擊“”圖標(biāo)就會彈出支付二維碼。圖5.9訂單支付頁面關(guān)鍵代碼下面是該界面獲取收貨地址以及進(jìn)行訂單支付（支付寶方式）部分的關(guān)鍵代碼。methods:{methods:{ ...mapMutations(['SET_CARS_LIST']), /*監(jiān)聽car-layout組件是否點擊了確認(rèn)訂單按鈕*/ //使用自定義事件 asyncconfirmPay(){ this.payLoading=false; //創(chuàng)建數(shù)據(jù)庫 letobj={ deliveryInfo:this.address, carList:this.carList, createTime:Date.now(), payType:this.defaultType, status:0, total_fee:this.totalPrice, done:false, } constorder_no=awaitorderObj.createOrder(obj); letout_trade_no=order_no+'_'+String(Math.random()).substring(3,9) //uni-pay的支付回調(diào)方法 this.$refs.uniPay.createOrder({ provider:this.defaultType,//支付供應(yīng)商 total_fee:this.totalPrice,//支付金額，單位分100=1元 type:"goods",//支付回調(diào)類型支付成功之后的回調(diào)信息 order_no,//業(yè)務(wù)系統(tǒng)訂單號 out_trade_no,//插件支付單號 qr_code:true,//是否強(qiáng)制使用掃碼支付 cancel_popup:false,//配合qr_code:true使用，是否只生成支付二維碼，沒有二維碼彈窗 description:"商品支付",//支付描述 }) //uni.navigateBack() }, /*創(chuàng)建支付*/ payCreate(e){ console.log(e); }, /*支付成功*/ paySuccess(e){ this.payLoading=true; //清空購物車 this.SET_CARS_LIST() console.log(e); }, /*支付取消*/ payCancel(e){ this.payLoading=true; console.log(e); }, /*獲取默認(rèn)地址*/ asyncgetOneSelected(){ letres=awaitaddressObj.getSelected() //console.log(res); if(!res.data.length)return; this.address=res.data[0] //console.log(res.data[0]); }} }我的地址界面展示在訂單支付界面點擊收貨地址就會跳轉(zhuǎn)到此界面，在“我的地址”界面會顯示當(dāng)前已經(jīng)創(chuàng)建的地址列表。也可以點擊“”圖標(biāo)刪除已創(chuàng)建的收貨地址，或者點擊“”添加新的收貨地址。在新增地址界面按照系統(tǒng)提示輸入相應(yīng)的信息，也可以設(shè)置該地址是否為默認(rèn)地址。圖5.10收貨地址頁面關(guān)鍵代碼下面是新增地址界面部分的關(guān)鍵代碼。<script><script> constaddressObj=uniCloud.importObject('unipay-address') letaddressID; exportdefault{ data(){ return{ addressForm:{ username:'', phone:, address:'', selected:false, city_code:'', city_name:'', user_id:'', create_date:Date.now() }, addressFormRules:{ username:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }, { min:2, max:8, message:'長度在6-8個字符之間' }, ], phone:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }, { //自定義驗證函數(shù)，見上說明 validator:(rule,value,callback)=>{ //上面有說，返回true表示校驗通過，返回false表示不通過 //uni.$u.test.mobile()就是返回true或者false的 returnuni.$u.test.mobile(value); }, message:'手機(jī)號碼不正確', //觸發(fā)器可以同時用blur和change trigger:['change','blur'], } ], address:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }] }, } }, onLoad(e){ //判斷是否存在，只有存在才讓它獲取數(shù)據(jù) addressID=e?.id??null; if(addressID)this.getOne() }, methods:{ onSubmit(){ this.$refs.uForm.validate().then(asyncres=>{ //uni.$u.toast('校驗通過') //console.log(this.addressForm); lettitle; if(this.addressForm._id){ awaitaddressObj.updateAddress(this.addressForm) title='修改成功' }else{ constresult=awaitaddressObj.add(this.addressForm) title='新增成功' } uni.showToast({ title, success:res=>{ setTimeout(()=>{ uni.navigateBack() },1000) } }) }).catch(errors=>{ uni.$u.toast('校驗失敗') }) }, /*練級選擇器*/ onchange(e){ this.addressForm.city_name=e.detail.value.map(item=>{ returnitem.text }).join("") }, /*獲取一條數(shù)據(jù)*/ asyncgetOne(){ letres=awaitaddressObj.getOneAddress(addressID) this.addressForm=res.data[0] } } }</script>}, addressFormRules:{ username:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }, { min:2, max:8, message:'長度在6-8個字符之間' }, ], phone:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }, { //自定義驗證函數(shù)，見上說明 validator:(rule,value,callback)=>{ //上面有說，返回true表示校驗通過，返回false表示不通過 //uni.$u.test.mobile()就是返回true或者false的 returnuni.$u.test.mobile(value); }, message:'手機(jī)號碼不正確', //觸發(fā)器可以同時用blur和change trigger:['change','blur'], } ], address:[{ required:true, message:'此為必填字段', //blur和change事件觸發(fā)檢驗 trigger:['blur','change'], }] }, } }, onLoad(e){ //判斷是否存在，只有存在才讓它獲取數(shù)據(jù) addressID=e?.id??null; if(addressID)this.getOne() }, methods:{ onSubmit(){ this.$refs.uForm.validate().then(asyncres=>{ //uni.$u.toast('校驗通過') //console.log(this.addressForm); lettitle; if(this.addressForm._id){ awaitaddressObj.updateAddress(this.addressForm) title='修改成功' }else{ constresult=awaitaddressObj.add(this.addressForm) title='新增成功' } uni.showToast({ title, success:res=>{ setTimeout(()=>{ uni.navigateBack() },1000) } }) }).catch(errors=>{ uni.$u.toast('校驗失敗') }) }, /*練級選擇器*/ onchange(e){ this.addressForm.city_name=e.detail.value.map(item=>{ returnitem.text }).join("") }, /*獲取一條數(shù)據(jù)*/ asyncgetOne(){ letres=awaitaddressObj.getOneAddress(addressID) this.addressForm=res.data[0] } } }</script>后臺管理界面展示此頁面為管理員后臺管理的首頁，里面主要功能包括：管理分類、商品列表、新增商品、商家信息、訂單管理。圖5.11后臺管理頁面關(guān)鍵代碼以下內(nèi)容為后臺管理界面的關(guān)鍵代碼，該界面主要是界面引導(dǎo)跳轉(zhuǎn)作用。<uni-sectiontitle="分類設(shè)置"type="line"><uni-sectiontitle="分類設(shè)置"type="line"> <uni-list> <uni-list-itemshowArrowtitle="管理分類"to="/pages_manage/catetory/catetory"/> </uni-list></uni-section><uni-sectiontitle="商品設(shè)置"type="line"> <uni-list> <uni-list-itemshowArrowtitle="商品列表"to="/pages_manage/goods/list"/> <uni-list-itemshowArrowtitle="新增商品"to="/pages_manage/goods/add"/> </uni-list></uni-section><uni-sectiontitle="關(guān)于商家"type="line"> <uni-list> <uni-list-itemshowArrowtitle="商家信息"to="/pages_manage/brand/brand"/> <uni-list-itemshowArrowtitle="訂單管理"to="/pages_manage/order/order"/> </uni-list></uni-section>分類管理界面展示此界面列出了目前已經(jīng)創(chuàng)建好的所有分類，管理員可以點擊“新增分類”進(jìn)行添加。管理員也可以編輯或刪除已經(jīng)創(chuàng)建好的分類。圖5.12分類管理頁面關(guān)鍵代碼以下代碼為此界面顯示當(dāng)前分類列表、新增分類、編輯分類、刪除分類的部分邏輯代碼。methods:{methods:{ /*獲取分類數(shù)據(jù)*/ getData(){ db.collection('unipay-category').orderBy('create_datedesc').get().then(res=>{ //console.log(res); this.categoryList=res.result.data; }) }, add(){ this.$refs.inputDialog.open(); }, /*彈出框的確認(rèn)按鈕判斷是否有id如果有的話就執(zhí)行修改邏輯，沒有的話就執(zhí)行新增邏輯使用異步的方式進(jìn)行實時刷新*/ asyncdialogInputConfirm(e){ this.iptValue=e; if(this.editID){ if(this.editID){ awaitdb.collection('unipay-category').doc(this.editID).update({ name:this.iptValue, }) uni.showToast({ title:'修改分類成功', success:(res)=>{ this.editID='' this.iptValue='' } }) }else{ //向云端數(shù)據(jù)庫里面追加數(shù)據(jù) awaitdb.collection('unipay-category').add({ name:this.iptValue }) uni.showToast({ title:'新增分類成功', success:(res)=>{ this.iptValue='' } }) } this.getData() }, /*刪除分類*/ removeCate(e){ //console.log(e); uni.showModal({ title:'是否確認(rèn)刪除', success:(res)=>{ if(res.confirm){ //this.categoryList.splice(e,1) db.collection('unipay-category').doc(e).remove().then(res=>{ uni.showToast({ title:'刪除成功', icon:"success" }) this.getData() }) } }, fail:(err)=>{ console.log(err); } }) }, /*修改分類數(shù)據(jù)*/ editCate(e,name){ this.editID=e this.iptValue=name this.$refs.inputDialog.open(); } } }</script> fail:(err)=>{ console.log(err); } }) }, /*修改分類數(shù)據(jù)*/ editCate(e,name){ this.editID=e this.iptValue=name this.$refs.inputDialog.open(); }}商品列表界面展示此界面展示了目前所有商品，管理員可以進(jìn)行編輯、刪除等操作。圖5.13商品列表頁面

關(guān)鍵代碼以下為此對界面的商品進(jìn)行刪除、編輯，以及編輯后實時更新商品列表等操作的邏輯代碼。methods:{methods:{ /*點擊進(jìn)行修改*/ editClick(inx){ //console.log(inx); uni.navigateTo({ url:'./add?id='+inx }) }, /*點擊進(jìn)行刪除*/ removeClick(inx){ //console.log(inx); uni.showModal({ title:'是否確認(rèn)刪除', success:res=>{ if(res.confirm){ this.removeFn(inx) } } }) }, /*刪除的方法封裝*/ asyncremoveFn(inx){ letres=awaitgoodsListObj.remove(inx) //判斷是否具有刪除的權(quán)限 if(res.code==-1){ uni.showToast({ title:res.msg, icon:'error' }) return } this.getData() //console.log(res); }, /*獲取分類的商品數(shù)據(jù)*/ asyncgetData(){ letres=awaitgoodsListObj.get() //判斷是否具有刪除的權(quán)限 if(res.code==-1){ uni.showToast({ title:res.msg, icon:'error' }) return } this.goodsList=res; }, /*彈出輸入框的回調(diào)函數(shù)*/ dialogInputConfirm(e){ //console.log(e); }, },

/*獲取分類的商品數(shù)據(jù)*/ asyncgetData(){ letres=awaitgoodsListObj.get() //判斷是否具有刪除的權(quán)限 if(res.code==-1){ uni.showToast({ title:res.msg, icon:'error' }) return } this.goodsList=res; }, /*彈出輸入框的回調(diào)函數(shù)*/ dialogInputConfirm(e){ //console.log(e); },},新增商品界面展示此界面為新增商品界面，管理員需要根據(jù)提示輸入或上傳商品的相關(guān)資料。還可以選擇商品的屬性（規(guī)格，如：顏色、版本等），也可以根據(jù)需要添加屬性。圖5.14新增商品頁面關(guān)鍵代碼以下是新增商品界面的部分邏輯代碼。exportdefault{exportdefault{ data(){ return{ goodsFormData:{ goodsname:'', goodsImg:[], type:'', goodsprice:'', goodsoldprice:'', goodsdesc:'', selectedSkuArr:[],//選擇的sku skuArr:[],//sku的所有信息 attrName:[],//商品屬性 }, /*使用校驗規(guī)則的時候上面的name屬性必須有，否則檢測不到校驗*/ goodsRules:{ goodsname:{ rules:[{ required:true, errorMessage:'請輸入商品名稱', },] }, type:{ rules:[{ required:true, errorMessage:'請選擇商品分類', },] }, goodsprice:{ rules:[{ required:true, errorMessage:'請選擇商品價格', },] }, }, type:'parent', currentIdx:null, }; },商家信息界面展示此界面為商戶信息界面，打開會自動加載當(dāng)前設(shè)置好的商家信息。管理員可以在此界面對商家信息進(jìn)行編輯修改，更改后點擊確認(rèn)信息會實時更新。圖5.15商家信息頁面關(guān)鍵代碼以下是商家信息的部分邏輯代碼，其中包含打開界面時獲取當(dāng)前商家信息部分以及修改信息部分等。methods:{methods:{ ...mapMutations(['SET_BRAND']), getData(){ //獲取數(shù)據(jù)庫中存在的商戶信息存在的話就賦值給baseFormData //只有云端獲取到的數(shù)據(jù)庫的數(shù)據(jù)里面才會存在id如果存在id說明就是進(jìn)行修改的操作 brandCloudObj.get().then(res=>{ //新用戶是沒有商戶信息的，避免報錯 if(!res.data.length)return; this.baseFormData=res.data[0]||{}; }) }, submit(){ //console.log(this.baseFormData.imageValue.map); //return this.$refs.baseForm.validate().then(res=>{ letarr=this.baseFormData.imageValue.map(item=>{ return{ name:item.extname, url:item.url,//這里必須要使用url這樣才能預(yù)覽到圖片 size:item.size } }) this.baseFormData.imageValue=arr; //console.log('表單數(shù)據(jù)信息：',res); this.addAndUpdate(); }).catch(err=>{ console.log('表單錯誤信息：',err); }) }, //新增或者修改 asyncaddAndUpdate(){ lettitle; letres; //判斷數(shù)據(jù)里面有沒有_id_id是數(shù)據(jù)庫里面才有的，如果有說明是數(shù)據(jù)庫中已經(jīng)存在那么就執(zhí)行修改的邏輯，相反沒有的話就執(zhí)行新增的邏輯 if(this.baseFormData._id){ res=awaitbrandCloudObj.update(this.baseFormData) //判斷是否具有刪除的權(quán)限 if(res.code==-1){ uni.showToast({ title:res.msg, icon:'error' }) return } title='修改成功' }else{ res=awaitbrandCloudObj.add(this.baseFormData) //判斷是否具有刪除的權(quán)限 if(res.code==-1){ uni.showToast({ title:res.msg, icon:'error' }) return } title='新增成功' title }) setTimeout(()=>{ uni.navigateBack() },1000) //使用vuex的mutations方法將數(shù)據(jù)存儲到vuex里面這樣就能實現(xiàn)更改之后vuex里面是最新的值，返回首頁也能看到最新的商戶信息 this.SET_BRAND(this.baseFormData) } } } uni.showToast({ title }) setTimeout(()=>{ uni.navigateBack() },1000) //使用vuex的mutations方法將數(shù)據(jù)存儲到vuex里面這樣就能實現(xiàn)更改之后vuex里面是最新的值，返回首頁也能看到最新的商戶信息 this.SET_BRAND(this.baseFormData) }}訂單管理界面展示以下界面為訂單管理界面與訂單詳情頁，這里會顯示當(dāng)前已完成的訂單（其中包括支付方式、訂單編號等信息），商品詳情頁會顯示實際付款金額等詳細(xì)信息。圖5.16訂單管理頁面

關(guān)鍵代碼以下是此頁面的部分邏輯代碼，其中包含：返回鍵、訂單支付狀態(tài)、獲取所有訂單數(shù)據(jù)等部分。methods:{methods:{ priceFormat, formatTimestamp, //根據(jù)status返回對應(yīng)的支付狀態(tài) setStatusText(num){ letobj={ "0":"未支付", "1":"已支付", "-1":"支付異常", "-2":"支付異常" } returnobj[num] }, //獲取所有訂單數(shù)據(jù) asyncgetData(){ letres=awaitorderCloudObj.getAllList() this.List=res.data }, goDetail(val){ letparams=encodeURI(JSON.stringify(val))//url字符串化方便再url中傳遞數(shù)據(jù) uni.navigateTo({ url:"/pages/order/detail?item="+params }) }, //計算購物車?yán)锩嫔唐返拿Q getCarListName(arr){ letname=arr.map(item=>{ return }) returnname.join('/') },//點擊左側(cè)按鈕返回首頁 onClickLeft(){ uni.reLaunch({ url:'/pages/index/index' }) }系統(tǒng)測試系統(tǒng)測試是確保軟件系統(tǒng)在實現(xiàn)各項功能方面的正確性和完整性的過程。旨在驗證系統(tǒng)是否能正常運行各項功能。通過執(zhí)行測試用例來評估系統(tǒng)的功能性，包括輸入驗證、功能操作、數(shù)據(jù)處理、系統(tǒng)狀態(tài)和輸出結(jié)果等方面。系統(tǒng)測試的目標(biāo)是確保系統(tǒng)能夠正確地執(zhí)行各項功能。通過系統(tǒng)測試，可以驗證系統(tǒng)的功能是否符合設(shè)計要求，提前發(fā)現(xiàn)并修復(fù)該系統(tǒng)的功能缺陷，提高該系統(tǒng)的完整性和可靠性，從而確保用戶能夠順利地使用系統(tǒng)，并獲得良好的使用體驗。系統(tǒng)測試方法因為本系統(tǒng)基于uniapp開發(fā)，它可以生成同時運行在多個平臺上的應(yīng)用，例如，微信小程序、H5、App（iOS和Android）、以及各種快應(yīng)用平臺。所以本次測試主要以系統(tǒng)功能測試為主，其中包含注冊登錄、購物車、訂單支付等功能測試。功能測試結(jié)果以下是各個功能的測試情況。注冊登錄功能測試測試項目基于uniapp+vue+云開發(fā)實現(xiàn)的在線商城注冊登錄測試測試目的測試用戶打開小程序時使用手機(jī)號注冊、忘記密碼、登錄等功能。測試前提初次打開小程序。測試流程打開小程序后，進(jìn)入到登錄頁，點擊“注冊賬號”使用手機(jī)號注冊登錄。測試結(jié)果點擊“注冊賬號”后會彈出注冊界面，輸