前后端分离项目—小程序首页的商品展示及商品下拉分页（四)

11.Mybatis-plus日志打印

添加日志打印能够更好的发现访问数据库是程序的问题所在。

11.1yml配置

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

配置成功后重新启动程序，控制台出现对应的SQL语句

12.首页商品展示

项目前期架构简单，将所有的物品展示放于首页，通过触底调用函数达到查询完所有商品的目的，商品以每行两个进行排版，通过点击即可查询商品详情，此处只涉及首页页面的功能。

12.1wxml代码

  <view class="hot_store">
    <view class="store_title">
      物品广场,快来交换吧！
    </view>
    <view class="store_list">
      <view class="store_detail"
      wx:for="{{hotList}}"
      wx:for-item="hot"
      wx:key="storeId"
      >
        <navigator>
        <image class="store_img" src="{{hot.storeImg1}}" mode="widthFix"/>
        <view class="name">
          {{hot.storeName}}
        </view>
        <view class="author_price">
          <text class="author">甲方:{{hot.userName}}</text>
          <text class="price">估价:￥{{hot.storePrice}}</text>
        </view>
        <view>
         
        </view>
        <button class="store_btn" size="mini" type="primary" >点击交换</button>
        </navigator>
      </view>
    </view>
  </view>

12.2wcss代码

.store_title{
  padding: 20rpx;
  color:black;
  font-size: 35rpx;
  font-weight: 600;
  text-align: center;
}
.store_list{
  display: flex;
  flex-wrap: wrap;
  
}
.store_detail{
  width: 45%;
  margin: 17rpx;
  text-align:center;

}

.name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author_price{
font-size: small;
display: flex;
justify-content: space-between;
}
.price{
color: red;
}
.author{
  width: 200rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button{
  font-size: small;
}

12.3 js代码

后端使用触底监听，当用户触底触发函数后调用函数发送数据请求从后端获取物品数据，页数加1，持续操作，当到达最底部无数据时，通知数据已经显示完。总体达到下拉分页的效果。

data: {
    hotList:[]
  },
  //分页查询要传递给后端参数数据
  QueryParams:{
    page:1,
    pageSize:10
  },

//总页数
//初始值设置为1
totalPage:1,
  /**
   * 获取商品
   */
  async getHot(){
    const res = await requestUtil({
      url:'/store/findHot',
      data:this.QueryParams,
      method:'GET'
    });
    this.totalPage=res.data.pages;
    this.setData({
      hotList:[...this.data.hotList,...res.data.records]
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getHot()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.QueryParams.page>=this.totalPage){
      wx.showToast({
        title: '商品已经显示完了',
        icon:'error'
      })
    }else{
      this.QueryParams.page++;
      this.getHot();
    }
  },

12.4配置分页插件

在config中创建MybatisPlusConfig类进行分页拦截

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MybatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor(){

        return new PaginationInterceptor();
    }
}

12.5 Controller代码

后端获取页数及每页的商品数后，将值传给分页函数，然后分页拦截器根据数据将查询到的结果进行分页。

@RestController
@RequestMapping("/store")
public class StoreController {

    @Autowired
    private IStoreService storeService;

    @GetMapping("/findHot")
    public Result findHot(Integer page,Integer pageSize){
        return storeService.getHot(page,pageSize);
    }

}

12.6 Service代码

public interface IStoreService extends IService<Store> {
    Result getHot(Integer page,Integer pageSize);
}

@Service
public class StoreServiceImpl extends ServiceImpl<StoreMapper, Store> implements IStoreService {
    @Autowired
    private StoreMapper storeMapper;


    @Override
    public Result getHot(Integer page, Integer pageSize) {

        Page<HotStore> pageInfo =new Page<>(page,pageSize);
        IPage<HotStore> IPage = storeMapper.findHotStore(pageInfo);
        return Result.success(IPage);
    }
}

12.7 Mapper代码

因为涉及多表查询的问题，需要自己写方法，则有两种格式:1.使用注解书写。2.使用xml书写

public interface StoreMapper extends BaseMapper<Store> {
    /**
    *
    *查询商品
    */
    @Select("select s.store_id,s.store_name,s.store_price,u.user_name,s.store_img1 from store s,user u where s.user_id = u.user_id and s.store_state=0 order by S.createdate")
    IPage<HotStore> findHotStore (Page<HotStore> page);

}

12.8 Vo层代码

vo层通常用于多表查询是拿来映射的实体类

@Data
@EqualsAndHashCode(callSuper = false)
public class HotStore implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 物品ID
     */
    @TableId(value = "store_id", type = IdType.AUTO)
    private Integer storeId;

    /**
     * 物品的名称
     */
    private String storeName;


    /**
     * 物品的价格
     */
    private BigDecimal storePrice;

    /**
     * 物品的主人
     */
    private String userName;

    /**
     * 物品的图片1
     */
    private String storeImg1;

}

最终完成效果：

注意事项：

1.前端页面设置了当内容超过宽度时，用省略号代替

2.页面样式可根据自己的需求进行对应的更改，本人未系统学习前端，所以页面简陋