处理单页面应用程序url和django url

Question

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

django 的urls.py是这样的:

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

和views.home:

def home(request):
    return render(request, 'index.html')

请考虑以下情形:

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

因为,主页响应单页Vuejs应用程序所需的index.html,它的工作方式与它应该的一样.

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

它仍然正常工作,因为它与Vue路由器导航.

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

由于没有/username/12在urls.py模式,它会显示找不到网页(404) .

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

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

但是像媒体或静态网址这样的其他网址也会指向所有模式正则表达式.我怎么解决这个问题？

Answer 1

我有一个类似的问题.

如何使用VUE路由器和Django的REST框架的同时？

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

预期成绩:

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

我尝试这个,它的工作原理!

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({
  mode: 'history',
  base: __dirname,
  routes: [{
      path: '/courses',
      component: CourseSet
    }, {
      path: '/',
      component: hello
    }]
})

我在GitHub上的项目

Answer 2

既然你提到了“单页”：

1. 服务器应该只提供一页index.html（或您想称之为的任何其他内容）。

2. 服务器和 Web 应用程序（前端）代码将通过 api 调用进行通信，以便服务器提供资源，而 Web 应用程序负责使用该资源。

3. 如果缺少资源，服务器仍然不能以单独的页面响应，它仍应以 Web 应用程序可以使用的消息响应。

我有一个在 Vue.js 中创建的单页应用程序，它利用 HTML5 历史模式进行路由

我相信您正在使用vue-router，它将单页应用程序模拟为功能齐全的多页应用程序。

您可能想看看this和this，但上述内容适用于单页应用程序。

您分享了您的网址模式：

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

但是其他 url，如媒体或静态 url 也将指向相同的捕获所有模式正则表达式。我怎么解决这个问题？

1. 您可以管理的一种方法是，在'/'上面提到的/app.

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

   并在您的 router.js 文件中：

   new Router({
     mode: 'History',
     base: '/app'
     routes: [
       {
         path: '/',
         name: 'name',
         component: ComponentName
       }
     ]
   })
   

2. 或者为 URL 所服务的目的添加前缀，例如

   urlpatterns = [
     url(r'^api/admin/', admin.site.urls),
     url(r'^api/api-token-auth/', obtain_jwt_token),
     url(r'^.*$', views.home),
     url(r'^.*$/assets', your-static-assets) 
   ]
   

Answer 3

我通过这种方式在 Django 2.x 中使用启用了 VueJS 路由器的历史模式：

从 app urls.py 你需要到repath你的前端 url，如下所示：

# urls.py

from django.urls import path, include
from django.urls import re_path

urlpatterns = [
    path('', TemplateView.as_view(template_name="application.html"), name="app", ),
    # ... rest of your urls
]

urlpatterns += [
    re_path('^.*$', TemplateView.as_view(template_name="application.html")),
]

现在历史模式运行顺利！

http://sample.com/#/users/login/

变得：

http://sample.com/users/login/