首页商品大类显示axios异步请求数据动态渲染实现

bash 复制代码

package com.java1234.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/***
 *
 * web项目配置类
 */
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/swiper/**").addResourceLocations("file:D:\\java1234-mall-v3\\swiperImgs\\");
        registry.addResourceHandler("/image/bigType/**").addResourceLocations("file:D:\\java1234-mall-v3\\bigTypeImgs\\");
    }
}

bash 复制代码

<view>
<!-- 搜索框开始 -->
    <SearchBar></SearchBar>
<!-- 搜索框结束 -->

<!-- 轮播图开始 -->
<view class="index_swiper">
    <swiper autoplay circular indicator-dots>
        <swiper-item 
            wx:for="{{swiperList}}"
            wx:for-item="swiper"
            wx:key="id"
            >
            <navigator>
                <image mode="widthFix" src="{{'http://localhost:8080/image/swiper/'+swiper.swiperPic}}"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 轮播图结束 -->

<view class="index_bigType">
    <view class="bigTypeRow">
        <navigator
            wx:for="{{bigTypeList_row1}}"
            wx:for-item="bigType"
            wx:key="id">
        <image mode="widthFix" src="{{baseUrl+'/image/bigType/'+bigType.image}}"></image>
        </navigator>
    </view>
    <view class="bigTypeRow">
        <navigator
            wx:for="{{bigTypeList_row2}}"
            wx:for-item="bigType"
            wx:key="id">
            <image mode="widthFix" src="{{baseUrl+'/image/bigType/'+bigType.image}}"></image>
        </navigator>
    </view>
</view>

</view>

bash 复制代码

.index_swiper{
    swiper{
        width: 750rpx;
        height: 375rpx;
        swiper-item{
            image{
                width: 100%;
            }
        }
    }
}

.index_bigType{
    padding-top: 20rpx;
    background-color: #F7F7F7;
    .bigTypeRow{
        display: flex;
        navigator{
            flex:1;
            image{
                width: 150rpx;
            }
        }
    }
}

bash 复制代码

import { requestUtil,getBaseUrl } from "../../utils/requestUtil"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图数组
    swiperList:[],
    baseUrl:'',
    bigTypeList:[],
    bigTypeList_row1:[],
    bigTypeList_row2:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     const baseUrl = getBaseUrl();
     this.setData({
         baseUrl
     })
     this.getSwiperList();
     this.getBigTypeList();
  },
  async getSwiperList(){

    const result=await requestUtil({
        url:'/product/findSwiper',
        method:"GET"
    });
    this.setData({
        swiperList:result.message
    })

  },
  async getBigTypeList(){
    const result = await requestUtil({
        url:'/bigType/findAll',
        method:"GET"
    });
    console.log(result)
    const bigTypeList=result.message
    const bigTypeList_row1=bigTypeList.filter((item,index)=>{
        return index<5;
    })
    const bigTypeList_row2=bigTypeList.filter((item,index)=>{
        return index>=5;
    })
    this.setData({
        bigTypeList,
        bigTypeList_row1,
        bigTypeList_row2
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})