用前端大中台开发一个商品详情页面，居然这么简单

一个简单的商品详情页面，基本上要能实现这么几个功能：

1. 商品信息、价格、详情信息的展示；
2. 可以加入购物车，并查看购物车中的数据；

那么我们需要用到中台的下面3个方法：

获取商品详情

    async initGoods() {
      const res = await this.$wxapi.goodsDetail(this.$route.query.id)
      if (res.code === 0) {
        this.goodsDetail = res.data
      }
    },

读取购物车数据

    async shippingCarInfo() {
      const res = await this.$wxapi.shippingCarInfo(getToken())
      if (res.code === 0) {
        this.cartInfo = res.data
      } else {
        this.cartInfo = []
      }
    },

加入购物车

    async addCart() {
      const res = await this.$wxapi.shippingCarInfoAddItem(getToken(), this.goodsDetail.basicInfo.id, 1, [])
      if (res.code === 0) {
        this.$toast('加入成功')
        await this.shippingCarInfo()
        this.goodsList = this.processGoodsCarShow(this.goodsList)
      } else {
        this.$toast(res.msg)
      }
    }

获取到的商品详情数据，在页面上进行渲染：

    <div class="swiper-box">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in goodsDetail.pics" :key="index">
          <img :src="image.pic">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goods-description">
      <h3 style="margin-bottom:20px;">{{ goodsDetail.basicInfo.name }}</h3>
      <div style="margin-bottom:20px;">{{ goodsDetail.basicInfo.characteristic }}</div>
      <div class="html-content" v-html="goodsDetail.content" />
    </div>
    <div class="goods-detail-bottom" />
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartInfo.number" to="/cartlist" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
    </van-goods-action>
  </div>

如果需要将页面做的更加美化、饱满一点，可以更多的渲染接口返回的更多数据（例如标签、价格、特色、卖点等等），同时也可以结合其他的接口（例如推荐商品、买家秀、购买动态等等）来实现更加丰富的信息展示

使用中台进行前端开发是现在的趋势，前端人员独立即可完成整个项目的开发了，不需要像以前一样得找人开发后台、接口，所有的运维和维护工作全部交给中台去完成了。前端人员只需要专心干前端开发就够了！