Layout Function and Page Injector
Read this code first, Guess what it does.
ctx.Injector is for inject html into default layout's html head, and bottom of body.
html head normally for page title, keywords etc all kinds meta data, and css styles,
javascript libraries etc. You can see we put vue.js into head, but put main.js into the bottom of body.
Next part describe about these asset references:
web.JSComponentsPack is the production version of QOR5 core javascript code.
Created by using @vue/cli,
It does the basic functions like render server side returned html as vue templates.
Provide basic event functions that call to server, and manage push state
(change browser address urls before or after do ajax requests). do page partial refresh etc.
the javascript or css code are packed by using embed.
And with web.PacksHandler, You can merge multiple javascript or css assets together into one url.
So that browser only need to request them one time. and cache them. The cache is set to the start
time of the process. So next time the app restarts, it invalid the cache.
Summary
For a new project:
- Use @vue/cli to create an asset project that manage your javascript and css. and compile them for production use
- Use embed to pack them into Go code as
ComponentPack, which is a string - Use
PacksHandlerto mount them as available http urls - Write Layout function to reference them inside head, or bottom of body