python flask实战订餐系统微信小程序-49实现小程序端banner图的加载

B站配套视频教程观看

实现banner图的加载

小程序端和python后端进行数据的交互

数据表

购物车数据表设计

小程序分享记录数据表设计

需要获取后端的美食和分类列表

web/controllers/api/Food.py文件的添加

from web.controllers.api import route_api
from flask import request,jsonify
from application import app,db
import requests
import json
from common.libs.Helper import getCurrentDate

@route_api.route("/food/index" )
def foodIndex():
    return

@route_api.route("/food/search")
def foodSearch():
    return 

web/controllers/api/__ init __.py 引入Food

from flask import Blueprint

route_api = Blueprint( 'api_page',__name__ )
from web.controllers.api.Member import *
from web.controllers.api.Food import *

后端food/index接口提娜佳：

from web.controllers.api import route_api
from flask import request,jsonify
from application import app,db
import requests
import json
from common.libs.Helper import getCurrentDate
from common.libs.UrlManager import UrlManager
from common.models.food.FoodCat import FoodCat
from common.models.food.Food import Food

@route_api.route("/food/index" )
def foodIndex():
    resp = { 'code':200 ,'msg':'操作成功~','data':{} }
    cat_list = FoodCat.query.filter_by( status = 1 ).order_by( FoodCat.weight.desc() ).all()
    data_cat_list = []
    data_cat_list.append({
        'id': 0,
        'name': "全部"
    })
    if cat_list:
        for item in cat_list:
            tmp_data = {
                'id':item.id,
                'name':item.name
            }
            data_cat_list.append( tmp_data  )
    resp['data']['cat_list'] = data_cat_list

    food_list = Food.query.filter_by( status = 1 )\
        .order_by( Food.total_count.desc(),Food.id.desc() ).limit(3).all()

    data_food_list = []
    if food_list:
        for item in food_list:
            tmp_data = {
                'id':item.id,
                'pic_url':UrlManager.buildImageUrl( item.main_image )
            }
            data_food_list.append( tmp_data )

    resp['data']['banner_list'] = data_food_list
    return jsonify( resp )

访问这个接口就可以看到返回的数据了

http://127.0.0.1:8999/api/food/index

小程序端发起网络请求

order/mina/pages/food/index.js

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

,
    getBannerAndCat: function () {
        var that = this;
        wx.request({
            url: app.buildUrl("/food/index"),
            header: app.getRequestHeader(),
            success: function (res) {
                var resp = res.data;
                if (resp.code != 200) {
                    app.alert({"content": resp.msg});
                    return;
                }

                that.setData({
                    banners: resp.data.banner_list,
                    categories: resp.data.cat_list
                });
                that.getFoodList();
            }
        });
    }

app.js添加认证信息的token

,
    getRequestHeader:function(){
        return {
            'content-type': 'application/x-www-form-urlencoded',
            'Authorization': this.getCache( "token" )
        }
    }

在OnLoad里面调用getBannerAndCat接口

],
        loadingMoreHidden: false
    });
    this.getBannerAndCat();
},

运行，可以看到图片正常的显示出来了：