How does django's TemplateView pass parameters to vue's index.html?

django+vue is used as the back-end and front-end. I want to pass some back-end configuration to the front-end page when rendering the home page:

class HomePageView(TemplateView):
    template_name="index.html"
 
    def get_context_data(self, **kwargs):
        context = super(HomePageView, self).get_context_data(**kwargs)
        context["arg1"] = "12345"
        context["arg2"] = "67890"
        return context


urlpatterns = [
    url(r"^admin/", admin.site.urls),
    url(r"^$", HomePageView.as_view()),
]

but the index.html from the front-end vue build is very simple. How can the js in the vue access the context parameters given to it by the backend?


        <body>
            <div id=app>{{ arg1 }}</div>
            <script type=text/javascript src=/static/js/manifest.ab01a7ddcd228431bc0f.js></script>

            <script type=text/javascript src=/static/js/vendor.4be9c4044c880f3a85ed.js></script>
            <script type=text/javascript src=/static/js/app.11129f6d90cce37c7348.js></script>

        </body>
Aug.24,2021

django and vue are usually used for development with complete front-and back-end separation, and front-and back-end html files with complete front-and back-end separation are not shared. It should be by accessing the front-end route, and then calling the back-end API on the page, and the back-end API only returns json. Seeing that the front and rear ends of your writing are mixed together (I did the same a long time ago, not very good), it should still be the back-end route for access, so there will be conflicts between the template syntax of vue and django, both {{}}, and there should be a solution on the Internet.

Menu