處理單頁面應用程序url和django url

我在Vue.js中創建了一個使用HTML5歷史模式進行路由的單頁應用程序，並且該html文件與Django一起提供。處理單頁面應用程序url和django url

的urls.py Django的的是像這樣：

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')

考慮以下情形：

用戶訪問主頁（即/）

因爲主頁響應單頁Vuejs應用程序所需的index.html，它的工作原理與它應該的一樣。

從那裏用戶導航到關於頁面（即，/username/12）。

它仍然正常工作，因爲它的Vue路由器導航。

現在，用戶刷新頁面。

因爲有一個在urls.py模式沒有/username/12，它會顯示找不到網頁（404）。

現在，我可以提供urls.py另一種模式趕在最後訂單的所有模式，因爲這：

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

但其他網址，如媒體或靜態網址也將指向同捕捉所有圖案正則表達式。我怎麼解決這個問題？

來源

2017-03-17 Robin

包羅萬象的網址是要走的路。這不會影響媒體或靜態，因爲它們不是由Django在製作中提供的。 –

既然你提到的「單頁」：

服務器應該服務只有一個頁面的index.html（或者其他任何你想稱呼它）。
服務器和Web應用程序（前端）代碼將通過api調用進行通信，以便服務器提供資源並且web-app負責使用該資源。
如果資源缺失，服務器仍然不能使用單獨的頁面進行響應，它仍應迴應一條消息，指出該Web應用程序可以使用該消息。

我在Vue公司創造了一個單頁的應用程序。JS利用HTML5的歷史模式路由

我相信你正在使用vue-router，它模擬了單頁的應用程序是一個全功能，多頁應用。

你可能想看看this和this，但是對於單頁的應用程序上面也是如此。

您共享您的URL模式：

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

但其他網址，如媒體或靜態網址也將指向同一個包羅萬象的模式正則表達式。我怎麼解決這個問題？

的一種方式，您可以管理，這將是或者通過，服務比'/'其他路線上像上面提到的/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 
    } 
    ] 
})

或者通過加前綴的網址服務的宗旨一樣

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

來源

2017-03-17 18:44:42

我有類似的問題。

如何使用vue-router和django休息框架同時？

這是我解決這個問題的方法。希望它可以幫助你。

希望得到的結果：

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 
    }] 
})

My project on GitHub

來源

2017-10-07 09:05:37 Bllli

由於index.html是模板化的（動態頁面），因爲它是從您的視圖提供而不是靜態的，所以這會變得有點奇怪。

對於製作，絕對使用nginx或apache以類似的方式提供靜態內容。

的發展空間，這是我會做什麼：

from django.contrib.staticfiles.views import serve 

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

# Serve your static media (regex matches *.*) 
if settings.DEBUG: 
    urlpatterns.append(url(r'(?P<path>.*\..*)$', serve)) 

# Serve your single page app in every other case 
urlpatterns.append(url(r'^.*$', views.home))

來源

2017-10-20 02:46:43 Kenneth

處理單頁面應用程序url和django url

回答

相關問題