使用vue3,vite,less,flask,python从零开始学习硅谷外卖(11-15集)

严正声明!
重要的事情说一遍,本文章仅供分享,文章和代码都是开源的,严禁以此牟利,严禁侵犯尚硅谷原作视频的任何权益,我知道学习编程的人各种各样的心思都有,但这不是你对开源社区侵权的理由!
第十一集:这是一个普通的抽离组件的思想,但是现在插槽的用法有所改变了,要在template里加v-slot了,这个稍微改一下就好了。
第十二集:这个swiper组件改版以后小圆点不见了,这个不必纠结,以后有空了可以研究源码或者自己写一个,这个不是什么大问题。
第十三集:这里也是拆分组件,有个需要注意的是图片(star)的路径要改一下,…改成.,因为目录改变了。
第十四集:好家伙,这还要学monggodb吗,那也就算了,可是文档不清不楚的,还是直接用我熟悉的python框架flask来,这里可以看到数据都是在shops.json里,我们来看一下它的结构,把相同的结构折起来。
在这里插入图片描述
在这里插入图片描述

可以看到,这是一个数组,数组里的每个对象的内容里,包含着我们想请求的数据,我们当然可以使用mongodb,但这样一来可能版本号就对不上了,我们直接使用最新的flask,关于flask的基本使用看我另一篇博客:https://blog.csdn.net/returnadsss/article/details/128857080?spm=1001.2014.3001.5502,好家伙,这个写后台的东西篇幅不小呢,看shops.json里面的数据量并不小,我们只能进行批量处理。我们这里不区分query和params参数,因为这个参数vue里面提的多,用node好区分,flask稍显麻烦,而我们的重点是前端,这里大致过一下接口的编写就行了。我们在项目下新建一个python文件夹,python的使用要安装python,然后安装pip,pipinstall flask即可,把shops.json和接口文档放进去。第1个接口:使用经纬度获得一个包含经纬度和地址的json数据。先把环境调通:
在这里插入图片描述

我们再来编写接口:好久没写python了,有很多语法忘记了,不过思路对,百度一下,print一下就可以调试解决了,除非复杂逻辑,不然一般我不用debug.
在这里插入图片描述

然后我们往下写
在这里插入图片描述

可以看到写的差不多了,就是这个city值在json文件里没有,我们可以用正则匹配,匹配“省”后面到“市”前面的子塞进来。
稍微看了一下,因为我们的json文件里情况比较简单,所以我也只做了一个简单版的正则匹配,默认非贪婪模式,可以防止“浙江省宁波市余姚市”这种奇怪的地名,将就一下,不花时间深究了。
经过一番折腾,花里胡哨,用python写成的接口完成了,实际就是一个简易服务器在后台返回数据。。把代码贴出来分享一下。注意这里只判断了纬度,经度可以加and判断,不过就这个shops.json的数据来看没必要。

from flask import Flask,jsonify
from flask import request
from flask import abort,redirect
import json
import re
app=Flask(__name__)
app.config['JSON_AS_ASCII'] = False
@app.route('/position/<geohash>')
def getGeoHash(geohash):
    latitude=geohash.split(",")[0]
    longitude=geohash.split(",")[1]
    copy={
    
    }
    with open('shops.json','r',encoding='utf-8') as f:
        a = f.read()
        if a.startswith(u'\ufeff'):
            a = a.encode('utf8')[3:].decode('utf8')
        shops = json.loads(a)
        for shop in shops:
            if(shop['latitude']==float(latitude)):
                copy=shop
        print(type(copy))
    select_shop={
    
    
      "code": copy['status'],
      "data": {
    
    
        "address": copy['address'],
        "city": match_city(copy["address"]),
        "geohash": geohash,
        "latitude": latitude,
        "longitude": longitude,
        "name": copy["name"]
      }
    }
    print(copy['address'],type(copy['address']))
    return jsonify(select_shop)

def match_city(city):
    if(city.find("省"))==-1:
        m=re.match('(.+\u5e02).+',city)
    else:
        m=re.match('[\u4e00-\u9fa5]*?\u7701+?(.+\u5e02).+',city)
    return m.group(1)

        
@app.route('/hello')
def hello_world():
    return 'Hello,World'

if __name__ == '__main__':
   app.run(port=int("3000"))

用postman测一下,返回的数据符合要求,写一个接口就要老命了,后面9个再单独写一篇博客吧。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/returnadsss/article/details/128877429