This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

Hello, I’m Milo, a pothole!

Welcome everyone to pay attention to my public number: test development pit goods.

Hard cargo warning!! This article will focus on how to integrate React static resources in FastApi (vue).

review

Last time we talked about hash routing and Browser routing. Flask, Django, and FastApi are all common routes today.

routing

People always say URL, url, what is url? Why is it that if I give you a URL you won’t go to somebody else’s interface?

Obviously, URL (Uniform Resource Locator) is a short term to help us locate a specific Resource.

What the hell is the routing? Simply put, routing is a mapping between a URL and your corresponding execution method.

Those of you who are familiar with Django (except me) probably know that when you write an interface, You can use regular expressions to match your URL rules and then map them to the corresponding execution functions.

So from here we know, you gave me the URL, I found my service through IP and port, but I have so many functions in my service, how do I know which one to match and which one to execute? How come you still can’t string?

So there’s the routing rule (Django), @app.route in Flask, @app.get in FastApi.

Talk to you, so

Going back to strings from the previous article, we define our own routing for the front end, and we have our own routing for the back end. Why don’t hash routes have strings? That’s because when we define a route on the back end, very few people define it like this:

@app.route("/haha/#/nihaihaoma")
Copy the code

This definition is wolong chicken chick, at least not everyone here. So what happens if the routes don’t match? Will not string ah!

Packaging static resources

We run in the pityWeb directory

npm run build
Copy the code

Once you’re done, put everything in dist into the statics directory, why it’s statics instead of static, we’ll talk about that later.

Static resources in the FastApi

Let’s look at the example on the website:

In contrast to Flask, I remember Flask can be set up as a static resource directory. Basically, you’re treating the contents of the static folder as static resources.

Practice together

Boy, I went through the official documentation, and it hit me hard.

What I imagined:

Going to http://localhost7777 will take us back to our login page.

What it actually looks like:

Maybe that’s the beauty of FastApi. If you can’t catch up with it, you can’t scold it. Your knife is 40 meters long, but it has already run 100 meters!

Try to solve

Since it is not strong, we have been on the boat, that can not get cold feet and run away! So I started looking for a needle in a haystack, and I found a solution.

First of all, why does he say “not found”? There must be no match for the routing rule!

We didn’t really write a routing rule for /, so it makes sense. But what we want now is for our packaged index.html file to be automatically loaded when the user enters the front page, which means we want to return the HTML directly (which is the front page).

So we’re going to add this:

After that, restart the service to see what happens:

Don’t panic. Let’s keep going. Open F12:

Going back to our route matching rule, we did not write a route like: /{filename}, so we need to make a match for such a route.

Since we designed the backend routes to be business plus names, there is no string. For example, /request/ HTTP, /auth/login. (This is where good design comes in.)

This route will match the file we couldn’t find just now, and determine whether it is a file or not, and give it a 404 if not. If so, we open the file, read the contents, guess the type of the file, and return Response of the corresponding type.

The advantage of this is that CSS returns xxx.css and js is xxx.js.

Try again:

But do you see a problem? Logo is gone again!! Continue to see F12:

His URL is /static/ XXXX, so our routing rules do not match.

/static/{filename}

That’s why the name was changed to statics, because there were files with the same name, so the route didn’t come in at first.

Try at last, and it will take no more than three:

It’s not a problem (because the routing mode is changed to hash mode, non-hash mode will be refreshed 404, which is also a pit)

Flask can also integrate static resources in a similar way.

Encounter a problem is not terrible, slowly find the reason is good! Don't panic ~

With deployment plan article taste better oh.

Pity. Readthedocs. IO/deploy / % E9%…

😄 finally shameless to a wave of attention, everyone happy weekend ~~