使用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个再单独写一篇博客吧。