Use vue3, vite, less, flask, python to learn Silicon Valley takeaway from scratch (Episodes 11-15)

Solemn statement!
Let me say something important again. This article is for sharing only. The article and code are open source. It is strictly prohibited to make profits from this. It is strictly prohibited to infringe on any rights of the original video of Shang Silicon Valley. I know that people who learn programming have various thoughts. But this is not a reason for you to infringe on the open source community!
Episode 11: This is a common idea of ​​extracting components, but now the usage of slots has changed. It is necessary to add v-slot to the template. This can be changed slightly.
Episode 12: After the swiper component was revised, the small dots disappeared. Don’t worry about this. When you have time in the future, you can study the source code or write one yourself. This is not a big problem.
Episode 13: The components are also split here. One thing to note is that the path of the picture (star) needs to be changed,... to ., because the directory has changed.
Episode 14: Good guys, do you still need to learn mongodb? That’s fine, but the documentation is unclear, so I’d better use flask, the python framework I’m familiar with. Here you can see that the data is all in shops.json Here, let's take a look at its structure and fold the same structure.
Insert image description here
Insert image description here

As you can see, this is an array. The content of each object in the array contains the data we want to request. Of course we can use mongodb, but in this case the version number may not be correct. We directly use the latest flask, for the basic use of flask, please read my other blog: https://blog.csdn.net/returnadsss/article/details/128857080?spm=1001.2014.3001.5502. Good guy, this article about the backend is quite lengthy. Well, the amount of data in shops.json is not small, and we can only perform batch processing. We do not distinguish between query and params parameters here, because this parameter is mentioned a lot in vue, and it is easy to distinguish it with node. Flask is a little troublesome, and our focus is on the front end. Here we will briefly go through the preparation of the interface. We create a new python folder under the project. To use python, you need to install python, then install pip, pipinstall flask, and put shops.json and interface documents into it. The first interface: Use longitude and latitude to obtain a json data containing longitude, latitude and address. First adjust the environment:
Insert image description here

Let's write the interface again: I haven't written Python for a long time, and I have forgotten a lot of syntax, but the idea is right. I can debug it by Baidu and print it. Unless the logic is complex, I generally don't use debugging.
Insert image description here

Then we write down
Insert image description here

You can see that the writing is almost complete, but the city value is not in the json file. We can use regular matching to match the subtitles from the end of "province" to the front of "city".
After looking at it for a while, because the situation in our json file is relatively simple, I only made a simple version of regular matching. The default non-greedy mode can prevent strange place names like "Yuyao City, Ningbo City, Zhejiang Province" from being used. Just for a moment, don’t waste time delving into it.
After a lot of fussing and bells and whistles, the interface written in python was completed. It is actually a simple server that returns data in the background. . Post the code and share it. Note that only latitude is judged here, longitude can be judged by adding "and", but it is not necessary based on the data of this 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"))

Use postman to test it. The returned data meets the requirements. Writing an interface will take your life. Let’s write a separate blog for the next nine.
Insert image description here
Insert image description here

Guess you like

Origin blog.csdn.net/returnadsss/article/details/128877429