Menu
I have a single page application created in Vue.js that utilizes the HTML5 History Mode for routing, and the html file is served with Django.
The urls.py of django is like so:
urlpatterns = [ url(r'^$', views.home), url(r'^admin/', admin.site.urls), url(r'^api-token-auth/', obtain_jwt_token), ] And views.home:
def home(request): return render(request, 'index.html') Consider the following scenario:
/)Since, the home page responds with required index.html for the Single page Vuejs app, it works like its supposed to.
/username/12).Its still working fine, as its navigating with the Vue router.
Since there's no /username/12 in the urls.py patterns, it will show Page not found (404).
Now, I could provide another pattern in urls.py to catch all pattern in the last order as this:
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api-token-auth/', obtain_jwt_token), url(r'^.*$', views.home), ] But other urls like the media or static urls will also point to the same catch all pattern regex. How can I solve this problem?
842
A single page application (SPA) is a web application, which runs in a browser, and does not require a page refresh to load new content. Django is a great framework for handling the backend of single-page applications.
Django runs through each URL pattern, in order, and stops at the first one that matches the requested URL, matching against path_info . Once one of the URL patterns matches, Django imports and calls the given view, which is a Python function (or a class-based view).
The path function is contained with the django. urls module within the Django project code base. path is used for routing URLs to the appropriate view functions within a Django application using the URL dispatcher.
Django has his own way for URL mapping and it's done by editing your project url.py file (myproject/url.py). The url.py file looks like −. When a user makes a request for a page on your web app, Django controller takes over to look for the corresponding view via the url.py file, and then return the HTML response or a 404 not found error, ...
After creating a Django project, we need to create a Django app for our single-page app. Every Django project must contain at least one app. Navigate into the outer directory where manage.py script exists : These will create an app named singlepage in our project.
The technique involves creating url patterns within each app. This will bring more flexibility when the app needs to be plugged into a different application. Just making inclusion of these URL’s in the main project urls.py file will help to easily access the web pages associated with that Django application.
For a Django-powered website, a URLconf is similar to a table of contents. It’s a relationship between URL patterns and the view functions that must be called when those URLs are accessed. To begin, we must import the view function that our server will use when the URL is matched.
I have a similar problem.
How can I use vue-router and django rest framework the same time?
This is my solution to this problem. Hope it helps you.
Expected results：
http://127.0.0.1:8000/ <-- TeamplateView index.html using vue http://127.0.0.1:8000/course <-- vue-router http://127.0.0.1:8000/api <-- rest framework http://127.0.0.1:8000/admin <-- django admin and I try this and it works!
urls.py
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')), url(r'^api/', include(router.urls)), url(r'^.*$', TemplateView.as_view(template_name="index.html")), ] The order is important,
url(r'^.*$', TemplateView.as_view(template_name="index.html")),is the last one
and this is my vue router
const router = new VueRouter({ mode: 'history', base: __dirname, routes: [{ path: '/courses', component: CourseSet }, { path: '/', component: hello }] }) My project on GitHub
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
