Today, ill just introduce a nifty little trick to create a loading screen, to let your users know that your app is still working, even though it takes a while to do the initial load.
The idea is to add the loading/splash screen to the .public/index.html file inside the <div id="app"></div> or whatever your mount point is, because vue will remove whatever is inside, when it is done loading the components.
I’ve just created a new vue app from the CLI. To simulate the slow rendering I’ve put a delay function in the HelloWorld.vue which is then called inside of the beforeMount()
In the .public/index.html file I’ve added;
which is just some simple animation css and inside the <div id="app"></div>I’ve added the following:
Note: This post draws alot of points from https://www.troyhunt.com/your-api-versioning-is-wrong-which-is/ – but is more about implementation and documentation through swagger.
So please go read Troy’s post and then come back :).
There are a couple of ways of versioning a restful api
among them are:
1. Url versioning e.g. GET http://example.com/api/v1/cars
2. Request-Header e.g. GET http://example.com/api/cars — Header: api-version: 1
There are pros and cons in both regards, Troy gets around them quite nicely.
Time to code!
Easy – simply use either the RoutePrefix- or RouteAttribute
Drawing from Troy’s post
We create a new attribute which uses a custom routing constraint
** Usage **
Effectively matching routes based on the “api-version” header.
When using swashbuckle (swagger implementation for .Net).
It knows about the default Route- and RoutePrefixAttribute, so Url Versioning is taken care of, out of the box.
But Header versioning is not.
Fortunately, it’s quite easy to implement an OperationFilter that adds the header as a parameter to the endpoints in question.
This implementation uses a list of versions and the endpoints relativepaths to know when to add the parameter and when not to.