快捷導(dǎo)航

微信小程序前后端數(shù)據(jù)交互的詳細(xì)圖文教程

更新時(shí)間：2022年10月18日 09:35:06 作者：孔祥宙

這篇文章主要給大家介紹了關(guān)于微信小程序前后端數(shù)據(jù)交互的相關(guān)資料,通過(guò)小程序向后端發(fā)送請(qǐng)求,然后后端從數(shù)據(jù)庫(kù)獲取車(chē)源和求購(gòu)的數(shù)量反饋給小程序,最后將這兩個(gè)數(shù)據(jù)顯示出來(lái),需要的朋友可以參考下

前言

先簡(jiǎn)單說(shuō)一下我寫(xiě)的這個(gè)危險(xiǎn)小程序前后端交互的業(yè)務(wù)，主要是兩個(gè)數(shù)據(jù)：supplyCount和wantBuyCount，分別代表我的車(chē)源和我的求購(gòu)。目前的需求就是小程序向后端發(fā)送請(qǐng)求，然后后端從數(shù)據(jù)庫(kù)獲取車(chē)源和求購(gòu)的數(shù)量反饋給小程序，最后將這兩個(gè)數(shù)據(jù)顯示出來(lái)。

因?yàn)榫蛢蓚€(gè)數(shù)據(jù)所以處理起來(lái)是比較簡(jiǎn)單的，可以把這個(gè)當(dāng)做小程序前后端交互最基礎(chǔ)CRUD方法，屬于是打基礎(chǔ)的技能。

一微信小程序發(fā)送請(qǐng)求

首先在微信開(kāi)發(fā)者工具的api.js里面加入發(fā)送的請(qǐng)求地址,如圖所示

這里我將util.request微信封裝的方法截圖出來(lái),大家可以看看他的格式和傳遞的參數(shù)和數(shù)據(jù)，可以看出，wx.request里面有四個(gè)參數(shù)，分別是請(qǐng)求地址url，返回后端的參數(shù)data，請(qǐng)求的方法method，和頭部header，已經(jīng)從后端請(qǐng)求成功后從后端返回的數(shù)據(jù)res。

根據(jù)這個(gè)方法，我們可以寫(xiě)出通過(guò)用戶id查詢用戶車(chē)源和求購(gòu)數(shù)量的請(qǐng)求。首先在data中定義兩個(gè)變量存儲(chǔ)車(chē)源和求購(gòu)數(shù)量,如圖所示。

在小程序的js頁(yè)面中寫(xiě)發(fā)送請(qǐng)求的方法，因?yàn)檎?qǐng)求的數(shù)據(jù) 需要在頁(yè)面加載的時(shí)候就顯示，所以將次方法寫(xiě)在了onLoad頁(yè)面初始化函數(shù)里。并且我們需要從storage緩存中獲取用戶的id來(lái)查詢數(shù)量，所以先從storage獲取user數(shù)據(jù)，然后通過(guò)util.request方法發(fā)送請(qǐng)求，最后將請(qǐng)求獲得的數(shù)據(jù)res賦值給data中定義好的兩個(gè)變量。代碼如下。

var user = wx.getStorageSync('user')
//從storage緩存中獲取用戶數(shù)據(jù)
util.request(api.supplyCount,//url為api中定義好的
            {shopId: user.shopId}//返回的數(shù)據(jù)為用戶的shopId
            ,'GET').then(res => {//請(qǐng)求的方法為get,res為獲取的數(shù)據(jù)
                this.setData({//將res賦值為data中的supplyCount
                   supplyCount: res
                })
})

util.request(api.wantBuyCount,
        {shopId: user.shopId}
        ,'GET').then(res => {
        this.setData({
          wantBuyCount: res
        })
      })

在xml文件中加入這兩個(gè)組件,將數(shù)據(jù)顯示出來(lái)

  <view class='top_nav'>
    <view class='top_column'>
      <view class='top_column_item' bindtap='goMySupply' data-index='1' data-route='/pages/purchase/purchase'>
        <text class="top_column_item_count">{{supplyCount}}</text>
        <view class='user_column_item_text'>我的車(chē)源</view>
      </view>
      <view class="divLine"></view>
      <view class='top_column_item' bindtap='goMyQuote' data-index='2' data-route='/pages/purchase/purchase'>
        <text class="top_column_item_count">{{wantBuyCount}}</text>
        <view class='user_column_item_text'>我的求購(gòu)</view>
      </view>
    </view>
  </view>

二后端接口接受小程序請(qǐng)求并返回?cái)?shù)據(jù)

后端來(lái)說(shuō)比較簡(jiǎn)單，先在controller層寫(xiě)好和前端請(qǐng)求地址對(duì)應(yīng)的方法，然后再service層寫(xiě)好對(duì)應(yīng)的邏輯方法，即根據(jù)shopId查詢車(chē)源和求購(gòu)數(shù)量，因?yàn)槲业膕pringboot項(xiàng)目使用了mybatis和mybatis-generator插件，所以實(shí)體類(lèi)domain層和mapper接口層都自動(dòng)生成了，并且也生成了常用的CRUD方法,可以直接調(diào)用，在這里將我的代碼附上。

controller層

@RequestMapping("/wx/supply")
public class WxSupplyController {
 
	@Autowired
	private SupplyService supplyService;
 
	@GetMapping("count")
	public int count(Integer shopId){
		int number = supplyService.countByshopId(shopId);
		return number;
	}
}

service層

@Service
public class SupplyService {
        @Resource
        private LitemallFormSupplyMapper formSupplyMapper;
 
 
        public int countByshopId(Integer shopId){
            LitemallFormSupplyExample example = new LitemallFormSupplyExample();
            LitemallFormSupplyExample.Criteria criteria = example.createCriteria();
            example.or().andShopIdEqualTo(shopId);
            return (int)formSupplyMapper.countByExample(example);
        }
}