处理单页应用程序 url 和 django url [英] Handling single page application url and django url

问题描述

我在 Vue.js 中创建了一个单页应用程序，它利用 HTML5 历史模式进行路由，并且 html 文件由 Django 提供.

django 的 urls.py 是这样的:

urlpatterns = [网址(r'^$'，views.home)，url(r'^admin/', admin.site.urls),url(r'^api-token-auth/',获取_jwt_token),]

和views.home:

def home(请求):返回渲染(请求，'index.html')

考虑以下场景:

1. 用户访问主页(即/)

由于主页以单页 Vuejs 应用程序所需的 index.html 响应，因此它的工作原理与预期相同.

2. 用户从那里导航到关于页面(即 /username/12).

它仍然工作正常，因为它使用 Vue 路由器导航.

3. 现在，用户刷新页面.

由于 urls.py 模式中没有 /username/12，它会显示 Page not found (404).>

现在，我可以在 urls.py 中提供另一个模式来捕获最后一个顺序中的所有模式，如下所示:

urlpatterns = [url(r'^admin/', admin.site.urls),url(r'^api-token-auth/',获取_jwt_token),url(r'^.*$', views.home),]

但是其他 url，如媒体或静态 url 也将指向相同的 catch all pattern regex.我该如何解决这个问题?

解决方案

我也有类似的问题.

如何使用 vue-router 和 django rest框架同时?

这是我对这个问题的解决方案.希望能帮到你.

预期结果:

http://127.0.0.1:8000/<-- TeamplateView index.html 使用 vuehttp://127.0.0.1:8000/course <-- vue-routerhttp://127.0.0.1:8000/api <-- 休息框架http://127.0.0.1:8000/admin <-- Django 管理员

我试了一下，效果很好！

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")),]

<块引用>

顺序很重要，url(r'^.*$', TemplateView.as_view(template_name="index.html")),是最后一个

这是我的 vue 路由器

const router = new VueRouter({模式:'历史'，基础:__dirname，路线:[{路径:'/课程'，组件:课程集}, {小路: '/'，组成部分:你好}]})

我在 GitHub 上的项目

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:

1. User visits the home page (i.e., /)

Since, the home page responds with required index.html for the Single page Vuejs app, it works like its supposed to.

2. From there the user navigates to the about page (i.e., /username/12).

Its still working fine, as its navigating with the Vue router.

3. Now, the user refreshes the page.

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?

解决方案

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

这篇关于处理单页应用程序 url 和 django url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！