第 4-3 課：前後端交互之分類實現
目錄
- 開篇
- 基礎篇
- 前端篇
1 邏輯處理
client 新建 models/CategoryModel.js
import { CloudRequest } from '../utils/cloud-request.js'
class CategoryModel extends CloudRequest {
/**
* 獲取分類
* @param {*} callBack
*/
getCateGory(callBack){
this.request({
url: "getCategoryMenu",
success: res => {
callBack(res)
}
})
}
/**
* 根據商品類型獲取商品
* @param {*} category_type
* @param {*} callBack
*/
getCateGoryProduct(category_type,callBack){
this.request({
url: "getCategoryProduct",
data:category_type,
success: res => {
callBack(res)
}
})
}
}
export { CategoryModel }
2 前臺數據處理
回到我們 pages/category/category.js
// pages/category/category.js
import { CategoryModel } from '../../models/CategoryModel.js'
let category = new CategoryModel()
Page({
/**
* 頁面的初始數據
*/
data: {
menuCategories: [
{ category_name:'堅果炒貨',category_type:1},
{ category_name: '休閒零食', category_type: 2 },
{ category_name: '餅乾蛋糕', category_type: 3 },
{ category_name: '蜜餞果乾', category_type: 4 },
{ category_name: '肉乾肉脯', category_type: 5 },
],
menuSelect:1,
menuNmae:'',
products:[]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this._init()
},
// 初始化數據
_init:function(){
category.getCateGory(res=>{
let menuCategories = res.result.data.data
let menuSelect = menuCategories[0].category_type
let menuNmae = menuCategories[0].category_name
this.setData({
menuCategories,
menuSelect,
menuNmae
})
this._getCateGory(menuSelect)
})
},
// 菜單切換
menu:function(e){
let index = category.getDataSet(event, "index")
let menuCategories = this.data.menuCategories
let menuSelect = menuCategories[index].category_type
let menuNmae = menuCategories[index].category_name
this._getCateGory(menuSelect)
this.setData({
menuSelect,
menuNmae
})
},
// 跳轉商品詳情
productDetails:function(e){
wx.navigateTo({
url: '/pages/product/product?product_id=' + e.detail.productId,
})
},
_getCateGory:function(type){
category.getCateGoryProduct(type, data => {
this.setData({
products: data.result.data.data
})
})
}
})
menuCategories : 這個一般不是經常改變的默認給出初始值，方便提前顯示給前臺頁面
pages/category/category.wxml
<!-- pages/category/category.wxml -->
<view class='container'>
<!-- 分類左邊選擇區域 -->
<scroll-view class='left-container' scroll-y="true">
<block wx:for="{{menuCategories}}" wx:key="key">
<view class="categoryBar {{ menuSelect==item.category_type?'active':''}}" data-id='{{item.category_type}}' data-index='{{index}}' bind:tap="menu">
<text>{{item.category_name}}</text>
</view>
</block>
</scroll-view>
<!-- 分類右邊選擇區域 -->
<scroll-view class='right-container' scroll-y="true">
<!-- 主題宣傳圖 -->
<view class='introduce-image'>
<image src='../../images/temp/category.png'></image>
</view>
<view class='category-name'>
<text>{{menuNmae}}</text>
</view>
<view class='product-container'>
<block wx:for="{{products}}" wx:key="key">
<category-comp product="{{item}}" bind:productDetails="productDetails"></category-comp>
</block>
</view>
</scroll-view>
</view>
wxml ：當前頁面和組件通信，見前後端交互之首頁實現
components/behaviors/product-behavior.js
商品信息 Behavior 公用，跟上一個章節一樣，這裏就不在貼出代碼
components/category/index.wxml
<!--components/category/index.wxml-->
<view class='container' >
<view class='product-img' bind:tap='productDetails'>
<image src='{{product.product_img}}'></image>
</view>
<view class='product-name'>
<text>{{product.product_name}}</text>
</view>
</view>
樣式在之前靜態頁面已經完成
3 代碼分解
整個章節從初始數據、頁面加載數據、菜單切換、商品詳情跳轉的流程爲大家講解。
3.1 初始化數據
分類的菜單和主題的菜單一開始我都是給出默認值，在獲取數據庫的數據，每一個分類打擊了之後需要改變狀態和名稱 ，這裏的 menuSelect 和 menuNmae 則處理我們菜單交互的過程，menuSelect 的值默認爲第一個分類>
menuCategories: [
{ category_name:'堅果炒貨',category_type:1},
{ category_name: '休閒零食', category_type: 2 },
{ category_name: '餅乾蛋糕', category_type: 3 },
{ category_name: '蜜餞果乾', category_type: 4 },
{ category_name: '肉乾肉脯', category_type: 5 },
],
menuSelect:1, // 頁面加載默認第一個選中
menuNmae:'',
products:[]
3.2 頁面加載數據
category.getCateGory() 獲取初始化數據，將左邊的分類、選擇的分類、和分類名重新賦值，初始化數據爲下面我們註釋的 5 步。
category.getCateGory(res=>{
let menuCategories = res.result.data.data
let menuSelect = menuCategories[0].category_type
let menuNmae = menuCategories[0].category_name
this.setData({
menuCategories,
menuSelect,
menuNmae
})
this._getCateGory(menuSelect)
})
3.3 菜單切換
菜單切換是根據頁面上的綁定的值判斷
// 菜單切換
menu:function(e){
// 取出 wxml 菜單綁定的 index 值
let index = category.getDataSet(event, "index")
// 賦值頁面分類的 data 值
let menuCategories = this.data.menuCategories
// 取出當前選中的分類類型
let menuSelect = menuCategories[index].category_type
// 取出當前分類的名稱
let menuNmae = menuCategories[index].category_name
// 獲取選中分類的數據
this._getCateGory(menuSelect)
// 改變 data 的值
this.setData({
menuSelect,
menuNmae
})
},
3.4 跳轉商品詳情
在這裏跳轉商品詳情 跟之前的基本類似 productDetails 獲取組件的傳值
// 跳轉商品詳情
productDetails:function(e){
wx.navigateTo({
url: '/pages/product/product?product_id=' + e.detail.productId,
})
},
源碼地址
在搭建項目前，根據自己需要下載本系列文章的源代碼