Xử lý url ứng dụng trang đơn và url django

Question

Tôi có một ứng dụng trang đơn được tạo trong Vue.js sử dụng Chế độ lịch sử HTML5 để định tuyến và tệp html được phân phát bằng Django.

Các urls.py của django là như vậy:

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

Và views.home:

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

Hãy xem xét kịch bản sau đây:

1. lần User trang chủ (ví dụ: /)

Vì trang chủ phản hồi với index.html bắt buộc cho ứng dụng Trang đơn Vuejs, nó hoạt động giống như ứng dụng của nó.

2. Từ đó người dùng điều hướng đến trang giới thiệu (ví dụ: /username/12).

Nó vẫn hoạt động tốt khi điều hướng với bộ định tuyến Vue.

3. Bây giờ, người dùng làm mới trang.

Kể từ khi không có /username/12 trong urls.py mô hình, nó sẽ hiển thị Trang không tìm thấy (404).

Bây giờ, tôi có thể cung cấp một mô hình trong urls.py để bắt tất cả các mô hình theo thứ tự cuối cùng như thế này:

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

Nhưng url khác như phương tiện truyền thông hoặc các url tĩnh cũng sẽ trỏ đến cùng bắt tất cả mẫu regex. Làm thế nào tôi có thể giải quyết vấn đề này?

Answer 1

Vì bạn đã đề cập đến "trang duy nhất":

1. Các máy chủ được cho là để phục vụ chỉ là một trang index.html (hoặc bất cứ điều gì khác mà bạn muốn gọi nó).

2. Máy chủ và mã ứng dụng web (front-end) sẽ liên lạc qua các cuộc gọi api, sao cho máy chủ cung cấp tài nguyên và ứng dụng web quản lý việc sử dụng tài nguyên đó.

3. Trong trường hợp tài nguyên bị thiếu, máy chủ vẫn không được trả lời bằng một trang riêng biệt, máy chủ vẫn phải trả lời bằng thông báo mà ứng dụng web có thể sử dụng.

Tôi có một ứng dụng đơn được tạo trong Vue.js sử dụng Chế độ Lịch sử HTML5 để định tuyến

Tôi cho rằng bạn đang sử dụng vue-router, mô phỏng ứng dụng một trang là ứng dụng nhiều trang đầy đủ tính năng.

---

Bạn có thể muốn có một cái nhìn tại this và this, nhưng nắm giữ trên đúng đối với một ứng dụng trang duy nhất.

---

Bạn chia sẻ urlpatterns của bạn:

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

Nhưng khác url như giới truyền thông hoặc các url tĩnh cũng sẽ trỏ đến cùng bắt tất cả các mô hình regex. Làm thế nào tôi có thể giải quyết vấn đề này?

1. Một cách bạn có thể quản lý đó sẽ là một trong hai bằng, phục vụ trên một tuyến đường khác hơn '/' như đề cập ở trên cho /app.

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

   và trong router.js bạn file:

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

2. Hoặc tiền tố mục đích phục vụ bởi các url như

   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 2

Tôi có một vấn đề tương tự.

Làm cách nào tôi có thể sử dụng phần còn lại của vue-router và django framework cùng một lúc?

Đây là giải pháp của tôi cho vấn đề này. Hy vọng nó sẽ giúp bạn.

Hope để có được kết quả:

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 

và tôi cố gắng này và nó là công việc!

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

Trình tự là quan trọng, url(r'^.*$', TemplateView.as_view(template_name="index.html")), là cuối cùng một

và đây là bộ định tuyến vue tôi

const router = new VueRouter({ 
    mode: 'history', 
    base: __dirname, 
    routes: [{ 
     path: '/courses', 
     component: CourseSet 
    }, { 
     path: '/', 
     component: hello 
    }] 
}) 

My project on GitHub

Answer 3

Vì index.html được tạo khuôn mẫu (trang động) vì nó được phân phát từ chế độ xem của bạn thay vì tĩnh, điều này trở nên hơi lạ.

Để sản xuất, hãy sử dụng nginx hoặc apache để phục vụ nội dung tĩnh theo cách tương tự.

Đối với phát triển, đây là những gì tôi sẽ làm gì:

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