Flutter實戰視頻-移動電商-18.首頁_火爆專區後臺接口調試

18.首頁_火爆專區後臺接口調試

樓層結束以後有個火爆專區。到地圖有個上拉加載的效果

lib/config/service_url.dart

首先找到咱們的接口配置文件，增長接口的配置

lib/service/service_method.dart

複製原來的放進行修改

最終定義完的方法：

 

home_page.dart測試接口

 

咱們在initState方法裏面調用接口返回數據，並print打印出咱們的數據

放在這裏調用一下：

運行 查看測試效果

 

 

提取接口的方法

這兩個方法幾乎是同樣的 ，因此咱們單獨作一個公共的方法

公共的方法

這樣咱們火爆專區的接口就能夠使用通用的request的方法了。

查看效果：

也是能夠調通的

 

改造獲取首頁全部數據的方法

 

咱們主要用到方法名和傳遞的參數

改造以後的，數據正常加載出來了

 

最終代碼：

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:convert';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() { 
    super.initState();
    print('1111111');
  }

  String homePageContent='正在獲取數據';
  @override
  Widget build(BuildContext context) {
     var formData={'lon':'115.02932','lat':'35.76189'};//傳一個經緯度過去，防止惡意下單
    return Scaffold(
      appBar: AppBar(title: Text('百姓生活+')),
      body: FutureBuilder(
        future: request('homePageContent',formData:formData),
        builder: (context, snapshot) {
          if(snapshot.hasData){
            var data=json.decode(snapshot.data.toString());
            List<Map> swiper=(data['data']['slides'] as List).cast();
            List<Map> navigatorList=(data['data']['category'] as List).cast();
            String adPicture=data['data']['advertesPicture']['PICTURE_ADDRESS'];
            String leaderImage=data['data']['shopInfo']['leaderImage'];
            String leaderPhone=data['data']['shopInfo']['leaderPhone'];
            List<Map> recommendList=(data['data']['recommend'] as List).cast();
            String floor1Title=data['data']['floor1Pic']['PICTURE_ADDRESS'];
            String floor2Title=data['data']['floor2Pic']['PICTURE_ADDRESS'];
            String floor3Title=data['data']['floor3Pic']['PICTURE_ADDRESS'];
            List<Map> floor1=(data['data']['floor1'] as List).cast();
            List<Map> floor2=(data['data']['floor2'] as List).cast();
            List<Map> floor3=(data['data']['floor3'] as List).cast();

            return SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  SwiperDiy(swiperDateList: swiper),
                  TopNavigator(navigatorList:navigatorList ,),
                  AdBanner(adPicture:adPicture),
                  LeaderPhone(leaderImage: leaderImage,leaderPhone: leaderPhone,),
                  Recommend(recommendList:recommendList),
                  FloorTitle(picture_address: floor1Title,),//樓層1的標題圖片
                  FloorContent(floorGoodsList: floor1),
                   FloorTitle(picture_address: floor2Title,),//樓層1的標題圖片
                  FloorContent(floorGoodsList: floor2),
                   FloorTitle(picture_address: floor3Title,),//樓層1的標題圖片
                  FloorContent(floorGoodsList: floor3),
                  HotGoods()
                ],
              ),
            );
          }else{
            return Center(child: Text('加載中....'));
          }
        },
      ),
    );
  }
}
//首頁輪播插件
class SwiperDiy extends StatelessWidget {
  final List swiperDateList;
  //構造函數
  SwiperDiy({this.swiperDateList});

  @override
  Widget build(BuildContext context) {
  
   

    // print('設備的像素密度：${ScreenUtil.pixelRatio}');
    // print('設備的高：${ScreenUtil.screenWidth}');
    // print('設備的寬：${ScreenUtil.screenHeight}');

    return Container(
      height: ScreenUtil().setHeight(333),//
      width:ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,);
        },
        itemCount: swiperDateList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

class TopNavigator extends StatelessWidget {
  final List navigatorList;

  TopNavigator({Key key, this.navigatorList}) : super(key: key);

  Widget _gridViewItemUI(BuildContext context,item){
    return InkWell(
      onTap: (){print('點擊了導航');},
      child: Column(
        children: <Widget>[
          Image.network(item['image'],width: ScreenUtil().setWidth(95)),
          Text(item['mallCategoryName'])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    if(this.navigatorList.length>10){
      this.navigatorList.removeRange(10,this.navigatorList.length);//從第十個截取，後面都截取掉
    }
    return Container(
      height: ScreenUtil().setHeight(320),//只是本身大概預估的一個高度，後續能夠再調整
      padding: EdgeInsets.all(3.0),//爲了避免讓它切着屏幕的邊緣，咱們給它一個padding
      child: GridView.count(
        crossAxisCount: 5,//每行顯示5個元素
        padding: EdgeInsets.all(5.0),//每一項都設置一個padding，這樣他就不挨着了。
        children: navigatorList.map((item){
          return _gridViewItemUI(context,item);
        }).toList(),
      ),
    );
  }
}

class AdBanner extends StatelessWidget {
  final String adPicture;

  AdBanner({Key key, this.adPicture}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(adPicture),
    );
  }
}

//店長電話模塊
class LeaderPhone extends StatelessWidget {
  final String leaderImage;//店長圖片
  final String leaderPhone;//店長電話 


  LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: _launchURL,
        child: Image.network(leaderImage),
      ),
    );
  }

  void _launchURL() async {
    String url = 'tel:'+leaderPhone;
    //String url = 'http://jspang.com';
    if(await canLaunch(url)){
      await launch(url);
    }else{
      throw 'url不能進行訪問，異常';
    }
  }
}

//商品推薦
class Recommend extends StatelessWidget {
  final List recommendList;

  Recommend({Key key, this.recommendList}) : super(key: key);

  //商品標題
  Widget _titleWidget(){
    return Container(
      alignment: Alignment.centerLeft,//局長靠左對齊
      padding: EdgeInsets.fromLTRB(10.0, 2.0, 0, 5.0),//左上右下
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 0.5,color: Colors.black12) //設置底部的bottom的邊框，Black12是淺灰色
        ),
      ),
      child: Text(
        '商品推薦',
        style:TextStyle(color: Colors.pink)
      ),
    );
  }
  //商品單獨項方法
  Widget _item(index){
    return InkWell(
      onTap: (){},//點擊事件先留空
      child: Container(
        height: ScreenUtil().setHeight(380),//兼容性的高度 用了ScreenUtil
        width: ScreenUtil().setWidth(250),//750除以3因此是250
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            left: BorderSide(width: 1,color: Colors.black12)//右側的 邊線的樣式 寬度和 顏色
          )
        ),
        child: Column(
          children: <Widget>[
            Image.network(recommendList[index]['image']),
            Text('￥${recommendList[index]['mallPrice']}'),
            Text(
              '￥${recommendList[index]['price']}',
              style: TextStyle(
                decoration: TextDecoration.lineThrough,//刪除線的樣式
                color: Colors.grey//淺灰色
              ),
            ),
          ],
        ),
      ),
    );
  }
  //橫向列表方法
  Widget _recommendList(){
    return Container(
      height: ScreenUtil().setHeight(380),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,//橫向的
        itemCount: recommendList.length,
        itemBuilder: (context,index){
          return _item(index);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(430),//列表已經設置爲330了由於還有上面標題，因此要比330高，這裏先設置爲380
      margin: EdgeInsets.only(top: 10.0),
      child: Column(
       children: <Widget>[
          _titleWidget(),
          _recommendList()
       ],
      ),
    );
  }
}

//樓層標題
class FloorTitle extends StatelessWidget {
  final String picture_address;

  FloorTitle({Key key, this.picture_address}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Image.network(picture_address),
    );
  }
}

//樓層商品列表
class FloorContent extends StatelessWidget {
  final List floorGoodsList;

  FloorContent({Key key, this.floorGoodsList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          _firstRow(),
          _otherGoods()
        ],
      ),
    );
  }

 Widget _firstRow(){
   return Row(
     children: <Widget>[
       _goodsItem(floorGoodsList[0]),
       Column(
         children: <Widget>[
          _goodsItem(floorGoodsList[1]),
           _goodsItem(floorGoodsList[2])
         ],
       )
     ],
   );
 }
 Widget _otherGoods(){
   return Row(
     children: <Widget>[
        _goodsItem(floorGoodsList[3]),
        _goodsItem(floorGoodsList[4])
     ],
   );
 }
  Widget _goodsItem(Map goods){
    return Container(
      width: ScreenUtil().setWidth(375),
      child: InkWell(
        onTap: (){print('點擊了樓層商品');},
        child: Image.network(goods['image']),
      ),
    );
  }
}

//火爆專區 定義爲動態的類
class HotGoods extends StatefulWidget {
  @override
  _HotGoodsState createState() => _HotGoodsState();
}

class _HotGoodsState extends State<HotGoods> {
  void initState() { 
    super.initState();
    request('homePageBelowConten',formData:1).then((val){
      print(val);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child:Text('111111')
    );
  }
}

home_page.dart

 

 

import 'package:dio/dio.dart';
import 'dart:async';
import 'dart:io';
import '../config/service_url.dart';

//通用方法
Future request(url,{formData}) async{
 try {
    print('開始獲取數據..............');
    Response response;
    Dio dio=new Dio();
    dio.options.contentType=ContentType.parse('application/x-www-form-urlencoded');
    //有參數的時候傳參數，這裏進行if判斷
    if(formData==null){
      response=await dio.post(servicePath[url]);//不傳參數
    }else{
      response=await dio.post(servicePath[url],data:formData);//傳參數
    }
    
    if(response.statusCode==200){
      print(response.data);
      return response.data;
    }else{
      throw Exception('後端接口出現異常');
    }
 } catch (e) {
   return print('ERROR:========>${e}');
 }
}

//獲取首頁主題內容

Future getHomePageContent() async{
 try {
    print('開始獲取首頁數據..............');
    Response response;
    Dio dio=new Dio();
    dio.options.contentType=ContentType.parse('application/x-www-form-urlencoded');
    var formData={'lon':'115.02932','lat':'35.76189'};//傳一個經緯度過去，防止惡意下單
    response=await dio.post(servicePath['homePageContent'],data:formData);
    if(response.statusCode==200){
      print(response.data);
      return response.data;
    }else{
      throw Exception('後端接口出現異常');
    }
 } catch (e) {
   return print('ERROR:========>${e}');
 }
}
//得到火爆專區的商品的方法
Future getHomePageBeloConten() async{
 try {
    print('開始獲取火爆專區數據..............');
    Response response;
    Dio dio=new Dio();
    dio.options.contentType=ContentType.parse('application/x-www-form-urlencoded');
    int page=1;//上拉加載數據 這裏定義變量 頁碼
    response=await dio.post(servicePath['homePageBelowConten'],data:page);
    if(response.statusCode==200){
      print(response.data);
      return response.data;
    }else{
      throw Exception('後端接口出現異常');
    }
 } catch (e) {
   return print('ERROR:========>${e}');
 }
}

service_method.dart

 

service_url.dart

const serviceUrl='http://test.baixingliangfan.cn/baixing/';
const servicePath={
  'homePageContent':serviceUrl+'wxmini/homePageContent',//商店首頁信息
  'homePageBelowConten':serviceUrl+'wxmini/homePageBelowConten',//商城首頁熱賣商品
};