后端修改传递到小程序前端的完整流程
后端修改会员价格后,通过模型计算、API响应、小程序请求接收、数据处理和页面展示,完整传递到前端。涵盖单规格与多规格商品,实现前后端分离架构下的价格同步。
来团智慧商业小程序零代码开发平台 多行业适用
来团智慧商业小程序零代码开发平台,多行业适配。无需代码,拖拽式设计,轻松打造订货商城、会员制商城、分销商城及小程序官网。不仅能满足通用需求,还支持定制化,从页面布局到功能模块,随心定制,助您快速搭建专属商业小程序,抢占市场先机。
1. 后端处理流程
数据修改路径 :
api/model/Goods.php:setGoodsGradeMoney() →
setGoodsListDataFromApi() → getDetails() → api/
controller/Goods.php:detail() → 前端
详细步骤 :
- 会员价格计算 : setGoodsGradeMoney() 方法根据会员等级和商品设置计算会员价格
- 数据处理 : setGoodsListDataFromApi() 调用价格计算方法
- API响应 : detail() 控制器方法将计算后的商品数据返回给前端
2. 前端接收流程
数据接收路径 :
index.js:getGoodsDetail() →
_initGoodsDetailData() → setData() → 页面展示
详细步骤 :
- API请求 : getGoodsDetail() 方法调用 App._get('goods/detail') 获取商品详情
- 数据初始化 : _initGoodsDetailData() 方法处理后端返回的数据
- 价格设置 :从返回的 detail 中提取价格信息并设置到页面数据
- 页面更新 :通过 setData() 将价格等信息更新到页面
3. 关键传递节点 后端修改点
- Goods.php (model) :我们修改了 setGoodsGradeMoney() 方法,实现了三种会员价格设置方式
- Goods.php (controller) : detail() 方法将计算后的商品数据返回给前端 前端接收点
- index.js : getGoodsDetail() 方法接收后端数据
- index.js : _initGoodsDetailData() 方法处理数据并设置价格
4. 价格数据传递示例
后端计算 :
- 后端根据会员等级和商品设置计算会员价格
- 将计算后的价格存储在 goods['sku'][0]['goods_price'] 等字段中
- 通过 API 返回完整的商品详情数据
前端使用 :
// 初始化商品详情数据
_initGoodsDetailData(data) {
let goodsDetail = data.detail;
// 商品价格/划线价/库存
data.goods_sku_id = goodsDetail.goods_sku.
spec_sku_id;
data.goods_price = goodsDetail.goods_sku.
goods_price; // 这里就是后端计算的会员价格
data.line_price = goodsDetail.goods_sku.
line_price;
data.stock_num = goodsDetail.goods_sku.
stock_num;
return data;
},
5. 多规格商品的价格传递
对于多规格商品,价格传递流程:
- 后端计算所有 SKU 的会员价格
- 前端初始化多规格数据时,价格已包含在 spec_list 中
- 当用户切换规格时,前端从 spec_list 中获取对应 SKU 的价格
// 更新商品规格信息
_updateSpecGoods() {
let specSkuId = goodsSpecArr.join('_');
// 查找skuItem
let spec_list = _this.data.goodsMultiSpec.
spec_list,
skuItem = spec_list.find((val) => {
return val.spec_sku_id == specSkuId;
});
// 更新商品价格、划线价、库存
if (typeof skuItem === 'object') {
_this.setData({
goods_price: skuItem.form.
goods_price, // 这里获取的是对应规格的会员价
格
line_price: skuItem.form.line_price,
stock_num: skuItem.form.stock_num
});
}
},
总结
后端修改通过以下路径传递到前端:
- 数据计算 :后端模型计算会员价格
- API响应 :控制器将计算后的数据返回
- 前端接收 :小程序发起请求并接收数据
- 数据处理 :前端处理数据并设置页面状态
- 页面展示 :最终在小程序页面上显示计算后的会员价格
整个流程是一个典型的前后端分离架构中的数据传递过程,后端负责业务逻辑计算,前端负责数据展示。
来团QQ客服