幾何驅(qū)動(dòng)的圖像顏色編輯方法與應(yīng)用摘要本章節(jié)將對(duì)滑板商城小程序的具體實(shí)現(xiàn)做呈現(xiàn)，分別對(duì)前后端兩個(gè)部分進(jìn)行圖片解釋和代碼闡述。小程序端主要面向滑板商城使用的微信用戶，在這里用戶可以看到大致7個(gè)界面。這七個(gè)界面可以滿足用戶購(gòu)買(mǎi)的整體性需求和信息獲取需求。5.1.1滑板商城小程序首頁(yè)小程序首頁(yè)展現(xiàn)有：輪播圖、四個(gè)分類欄、跳轉(zhuǎn)到選購(gòu)頁(yè)面的按鈕以及最新資訊板塊四大板塊。如圖5-1所示。（a）首頁(yè)部分圖(b)首頁(yè)部分圖圖5-1滑板商城小程序首頁(yè)界面圖核心代碼：Index.Wxml:<swiperindicator-dots="true"autoplay="true"><swiper-itemwx:for="{{imgUrls}}"wx:for-item="banner"wx:key="*this"><imagestyle="width:100%;"mode="widthFix"src="{{banner}}"></image></swiper-item></swiper><viewclass="menu-bar"><viewclass="menu-block"bindtap="start">Index.js:data:{imgUrls:["/static/picture(lunbo)/banner1.png","/static/picture(lunbo)/banner2.png","/static/picture(lunbo)/banner3.png","/static/picture(lunbo)/banner4.png",}5.1.2滑板商城小程序購(gòu)物頁(yè)面小程序購(gòu)物頁(yè)面展現(xiàn)有：左側(cè)分類欄和右側(cè)商品欄、底部購(gòu)物車(chē)欄和提交訂單按鈕、商家優(yōu)惠活動(dòng)顯示欄。如圖5-2所示。選購(gòu)界面部分圖(b)選購(gòu)界面部分圖圖5-2滑板商城小程序選購(gòu)界面圖核心代碼：list.Wxml:<blockwx:for="{{GoodList}}"wx:for-item="category"wx:key="id"wx:for-index="category_id"><viewclass="Good-category"id="category_{{category_id}}"{{}}<viewclass="Good-item"wx:for="{{category.good}}"wx:for-item="good"wx:key="id"><viewclass="good-item-pic"><imagemode="widthFix"src="{{good.image_url}}"<viewclass="good-item-info"><view>{{}}<viewclass="good-item-price">{{priceFormat(good.price)}}<viewclass="good-item-opt"><iclass="iconfont"data-category_id="{{category_id}}"data-id="{{good.id}}"bindtap="addToCart"></i>5.1.3確認(rèn)訂單及支付界面小程序確認(rèn)訂單及支付界面展現(xiàn)有：訂單詳情、滿減優(yōu)惠如圖5-3所示。選購(gòu)界面部分圖(b)選購(gòu)界面部分圖圖5-3確認(rèn)訂單及支付頁(yè)面界面圖核心代碼：Checkout.js：Page({data:{},onLoad:function(options){varid=options.order_id})fetch('good/order',{id:id}).then(data=>{this.setData(data);wx.hideLoading()},()=>{this.onLoad(options)})},comment:function(e){ment=e.detail.value},fetch('gooder',{id:id,comment:ment},'POST').then(data=>{returnfetch('food/pay',{id:id},'POST')}).then(data=>{wx.hideLoading()wx.showToast({title:'支付成功',icon:'success',duration:2000,success:()=>{wx.navigateTo({url:'/pages/order/detail/detail?order_id='+id})5.1.4歷史訂單列表及詳情界面歷史訂單列表及詳情界面主要展現(xiàn)有：個(gè)人歷史所創(chuàng)建的訂單列表，每個(gè)訂單都有查看詳情和是否發(fā)貨兩個(gè)主要信息，在點(diǎn)擊查看詳情后即可查看訂單的詳細(xì)信息，如：創(chuàng)建時(shí)間、下單時(shí)間、是否發(fā)貨等一些列信息。如圖5-4所示。歷史訂單列表界面圖(b)歷史訂單詳情界面圖圖5-4歷史訂單列表及詳情界面圖核心代碼：List.js:constapp=getApp()constfetch=app.fetchonGodScroll:function(e){varscrollTop=e.detail.scrollTopvaractiveIndex=0categoryHeight.forEach((item,i)=>{if(scrollTop>=item){activeIndex=i}})if(!this.changingCategory){this.changingCategory=truethis.setData({activeIndex:activeIndex,},()=>{this.changingCategory=false}5.1.5滑板商城小程序個(gè)人頁(yè)面小程序個(gè)人頁(yè)面展現(xiàn)有：個(gè)人頭像信息以及消費(fèi)記錄。如圖5-5所示。圖5-5小程序個(gè)人界面圖核心代碼：Home.js:constapp=getApp()constfetch=app.fetchPage({data:{},enableRefresh:false,onLoad:function(){wx.showLoading({title:'努力加載中'})fetch('god/record').then(data=>{wx.hideLoading()this.setData(data)})},onShow:function(){if(this.enableRefresh){this.onLoad()}else{this.enableRefresh=true}}})5.1.6滑板商城小程序信息頁(yè)面小程序滑板信息頁(yè)面展現(xiàn)有：頂部搜索框、教練信息欄、板場(chǎng)信息欄。如圖5-6所示?；逍畔⒔缑娌糠謭D(b)滑板信息界面部分圖圖5-6滑板商城小程序信息頁(yè)面核心代碼：Map.wxml:<view><viewclass="top"><viewclass="search"><viewclass="search_in"><imagesrc="/static/serach.png"><inputtype="text"placeholder="請(qǐng)輸入搜索內(nèi)容"/><viewclass="search_btn">搜索</view>Map.wxss:.search{display:flex;align-items:center;justify-content:center;height:90rpx;background-color:#b0b1df;}.search.search_in{display:flex;align-items:center;justify-content:space-between;padding:020rpx;box-sizing:border-box;height:70rpx;width:710rpx;background-color:#ffffff;border-radius:35rpx};后端主要分為三個(gè)大板塊：訂單管理、商品管理、個(gè)人信息及優(yōu)惠信息管理。5.2.1后臺(tái)管理訂單模塊在這個(gè)界面商家可以看到小程序用戶在小程序端下單的滑板云品種類、數(shù)量、金額、下單時(shí)間等信息。如圖5-7所示圖5-7后臺(tái)訂單信息管理頁(yè)面核心代碼：classOrderextendsAdmin{publicfunctionindex(){if($this->request->isPost()){$action=$this->request->post('action/s','');if($action==='taken'){$this->taken();}}$param=['is_pay'=>$this->request->get('is_pay/d',-1),'is_taken'=>$this->request->get('is_taken/d',-1),'page'=>max($this->request->get('page/d',1),1),'search'=>$this->request->get('search/s','','trim'),'user_id'=>$this->request->get('user_id/d',0)$order=OrderModel::with('OrderGood')->order('id','desc');if($param['user_id']){$order->where('user_id',$param['user_id']);}if($param['is_pay']>=0){$order->where('is_pay',$param['is_pay']);}}if($param['is_taken']>=0){$order->where('is_taken',$param['is_taken']);if($param['search']!==''){$order->where('id',ltrim($param['search'],'A'));}5.2.2商品及分類管理模塊在這個(gè)界面商家可以依據(jù)自己的需求對(duì)商品分類進(jìn)行增刪查改、對(duì)商品信息進(jìn)行增刪查改操作，增刪查改操作所需要用到：名稱、價(jià)錢(qián)、商品圖片、商品類別、商品類別序號(hào)等。如圖5-8所示添加商品圖（b）所有商品圖(c)所有分類圖(d)添加分類圖圖5-8商品及分類管理頁(yè)面核心代碼：publicfunctionedit(){$id=$this->request->param('id/d',0);if($this->request->isPost()){$data=['category_id'=>$this->request->post('category_id/d',0),'name'=>$this->request->post('name/s','','trim'),'price'=>$this->request->post('price/d',0),'status'=>$this->request->post('status/d',0)];if($id){FoodModel::withTrashed()->where('id',$id)->update($data);$this->alert('success','保存成功。');}else{FoodModel::create($data);$this->alert('success','添加成功。');}}$data=['category_id'=>0,'name'=>'','price'=>'','image_url'=>'','status'=>''];if($id){$data=FoodModel::withTrashed()->field(array_keys($data))->where('id',$id)->find();}if(!$data){$this->error('商品記錄不存在！');}$category=CategoryModel::order('sort','asc')->select();$this->assign('id',$id);$this->assign('category',$category);$this->assign('food',$data);return$this->fetch();}5.2.3個(gè)人密碼及優(yōu)惠信息管理模塊在這個(gè)界面商家可以看到小程序用戶在小程序端下單的滑板云品種類、數(shù)量、金額、下單時(shí)間等信息。如圖5-9所示修改密碼圖（b）修改優(yōu)惠金額圖圖5-9個(gè)人密碼及優(yōu)惠信息管理頁(yè)面核心代碼：publicfunctionpassword(){if($this->request->isPost()){$password=$this->request->post('password/s','','trim');$this->auth->changePassword($password);$this->alert('success','密碼修改成功。');}return$this->fetch();}}classSettingextendsValidate{protected$rule=['appid'=>'require|length:1,255','appsecret'=>'require|length:1,255'];protected$message=['appid.require'=>'AppID必填','appsecret.require'=>'AppSecret必填'];}本章使用圖例和代碼基本實(shí)現(xiàn)微信小程序端和后臺(tái)管理端，分別使用不同的開(kāi)發(fā)語(yǔ)言進(jìn)行詳細(xì)開(kāi)發(fā)，滑板商城系統(tǒng)基本完成?；谖⑿判〕绦虻幕迳坛窍到y(tǒng)設(shè)計(jì)與實(shí)現(xiàn)第6章系統(tǒng)測(cè)試本章節(jié)主要對(duì)微信滑板商城小程序進(jìn)行前端和后端測(cè)試，其測(cè)試方法主要有黑盒測(cè)試、動(dòng)態(tài)測(cè)試，展示最終結(jié)果。測(cè)試環(huán)境搭建首先需要具備Wampsever軟件正常運(yùn)行，其次需要把提前編寫(xiě)好的滑板商城后端文件復(fù)制到Wampsever安裝包的www文件夾中，方可成功運(yùn)行。其次前后端連接也需要在小程序端進(jìn)行編寫(xiě)。軟件環(huán)境有微信開(kāi)發(fā)者工具、VisualStudioCode、Wampsever所配置好的PHP環(huán)境和MySQL數(shù)據(jù)庫(kù)。功能性測(cè)試是系統(tǒng)測(cè)試中的重要組成部分，接下來(lái)將通過(guò)黑盒測(cè)試[12]的方式對(duì)系統(tǒng)的多個(gè)模塊進(jìn)行測(cè)試。一下為測(cè)試過(guò)程中的測(cè)試用例和結(jié)果。6.2.1用戶結(jié)算測(cè)試用戶在選購(gòu)?fù)昊迳唐泛髸?huì)自動(dòng)獲取訂單金額并且篩選是否達(dá)到優(yōu)惠金額的力度，從而對(duì)金額進(jìn)行減免。系統(tǒng)在獲得到訂單金額后會(huì)在內(nèi)部進(jìn)行比較，超過(guò)設(shè)定金額后會(huì)自動(dòng)進(jìn)行減免，未超過(guò)則無(wú)法享受任何金額。如圖6-1所示。未滿足條件（b）滿足條件圖6-1用戶結(jié)算測(cè)試圖6.2.2創(chuàng)建訂單測(cè)試用戶在選購(gòu)?fù)昊迳唐泛髸?huì)自動(dòng)生成訂單并且自動(dòng)在歷史訂單行列增加訂單列表，同時(shí)可以獲取訂單的金額、數(shù)量、種類和時(shí)間。讀寫(xiě)小程序的數(shù)據(jù)庫(kù)，增加訂單詳細(xì)信息并且顯示在歷史訂單界面。如圖6-2所示。創(chuàng)建訂單（b）訂單列表顯示圖6-2創(chuàng)建訂單測(cè)試圖6.2.3后臺(tái)發(fā)貨測(cè)試用戶在選購(gòu)?fù)瓿珊笊捎唵涡畔ⅲ@是系統(tǒng)在歷史訂單界面顯示未發(fā)貨狀態(tài)，這是只需要管理員在后臺(tái)進(jìn)行發(fā)貨操作，就可以在前端顯示發(fā)貨狀態(tài)。通過(guò)微信小程序接口實(shí)現(xiàn)，在小程序端編寫(xiě)相關(guān)代碼即可實(shí)現(xiàn)。如圖6-3所示。顯示未發(fā)貨（b）顯示已發(fā)貨（c）后端操作界面圖6-3后臺(tái)發(fā)貨測(cè)試圖6.2.4后端修改登錄密碼測(cè)試商家在登錄滑板商城系統(tǒng)后臺(tái)時(shí)需要密碼和賬號(hào)，而密碼可以通過(guò)后臺(tái)系統(tǒng)進(jìn)行修改。如圖6-4所示。（a）后臺(tái)修改密碼（b）錯(cuò)誤密碼登錄圖6-4后端修改登錄測(cè)試圖壓力測(cè)試是使用postman軟件對(duì)滑板商城小程序服務(wù)端接口進(jìn)行簡(jiǎn)單壓力測(cè)試，其目的在于對(duì)小程序外部和內(nèi)部以及內(nèi)部之間進(jìn)行數(shù)據(jù)交換測(cè)試，傳遞和控制管理過(guò)程，以及系統(tǒng)間的相互邏輯依賴關(guān)系。6.3.1首頁(yè)接口壓力