????

目錄

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

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

?三 最后的效果圖

????先簡單說一下我寫的這個(gè)微信小程序前后端交互的業(yè)務(wù)，主要是兩個(gè)數(shù)據(jù)：supplyCount和wantBuyCount，分別代表我的車源和我的求購。目前的需求就是小程序向后端發(fā)送請(qǐng)求，然后后端從數(shù)據(jù)庫獲取車源和求購的數(shù)量反饋給小程序，最后將這兩個(gè)數(shù)據(jù)顯示出來。

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

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

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

   

   

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

   

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

   

4. 在小程序的js頁面中寫發(fā)送請(qǐng)求的方法，因?yàn)檎?qǐng)求的數(shù)據(jù) 需要在頁面加載的時(shí)候就顯示，所以將次方法寫在了onLoad頁面初始化函數(shù)里。并且我們需要從storage緩存中獲取用戶的id來查詢數(shù)量，所以先從storage獲取user數(shù)據(jù)，然后通過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
           })
         })

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

     <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'>我的車源</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'>我的求購</view>
         </view>
       </view>
     </view>

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

后端來說比較簡單，先在controller層寫好和前端請(qǐng)求地址對(duì)應(yīng)的方法，然后再service層寫好對(duì)應(yīng)的邏輯方法，即根據(jù)shopId查詢車源和求購數(shù)量，因?yàn)槲业膕pringboot項(xiàng)目使用了mybatis和mybatis-generator插件，所以實(shí)體類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);
        }
}

?三 最后的效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-485506.html

到了這里，關(guān)于微信小程序前后端數(shù)據(jù)交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！