template - Manejo de url de aplicación de una sola página y URL de django

httpresponse django example

Question

Tengo una aplicación de una sola página creada en Vue.js que utiliza el Modo de historial HTML5 para el enrutamiento, y el archivo html se sirve con Django.

El urls.py de django es así:

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

Y views.home :

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

Considere la siguiente situación:

1. El usuario visita la página de inicio (es decir, / )

Dado que la página de inicio responde con index.html requerido para la aplicación Vuejs de una sola página, funciona como debería.

2. Desde allí, el usuario navega a la página de aproximadamente (es decir, /username/12 ).

Todavía funciona bien, ya que navega con el enrutador Vue.

3. Ahora, el usuario actualiza la página.

Como no hay /username/12 en los patrones urls.py , mostrará la página no encontrada (404) .

Ahora, podría proporcionar otro patrón en urls.py para capturar todos los patrones en el último orden como este:

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

Pero otras URL, como los medios o las URL estáticas, también apuntarán a la misma expresión retrospectiva de todos los patrones . ¿Como puedó resolver esté problema?

Answer 1

Como mencionó "página única":

1. Se supone que el servidor solo sirve una página del index.html (o lo que sea que quieras llamar).

2. El servidor y el código de la aplicación web (front-end) se comunican a través de llamadas api, de modo que el servidor proporciona recursos y la aplicación web se encarga de usar ese recurso.

3. En caso de que falte un recurso, el servidor aún no debe responder con una página separada, aún así debe responder con un mensaje que la aplicación web pueda usar.

Tengo una aplicación de una sola página creada en Vue.js que utiliza el modo de historial HTML5 para enrutar

Creo que estás usando vue-router , que simula que la aplicación de una sola página es una aplicación de varias páginas con todas las funciones.

Es posible que desee echar un vistazo a esto y esto , pero lo anterior es cierto para una aplicación de una sola página.

Compartió sus patrones url:

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

Pero otras URL, como los medios o las URL estáticas, también apuntarán a la misma expresión retrospectiva de todos los patrones. ¿Como puedó resolver esté problema?

1. Una manera que puede administrar eso sería mediante una ruta que no sea ''/'' como se mencionó anteriormente para /app .

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

   y en su archivo router.js:

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

2. O prefijando el propósito servido por las URL como

   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

Tengo un problema similar.

¿Cómo puedo usar vue-router y django rest framework al mismo tiempo ?

Esta es mi solución a este problema. Espero que te ayude

Espero obtener resultados:

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

¡Y pruebo esto y es trabajo!

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

El orden es importante, url(r''^.*$'', TemplateView.as_view(template_name="index.html")), es el último

y este es mi enrutador vue

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

Mi proyecto en GitHub

Answer 3

Dado que index.html está modelado (una página dinámica) porque se sirve desde sus vistas en lugar de estático, esto se vuelve un poco extraño.

Para la producción, definitivamente use nginx o apache para servir el contenido estático de una manera similar.

Para el desarrollo, esto es lo que haría:

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