एकल पृष्ठ एप्लिकेशन यूआरएल और डीजेंगो यूआरएल

Question

मेरे पास एक एकल पृष्ठ एप्लिकेशन है जो Vue.js में बनाया गया है जो रूटिंग के लिए HTML5 इतिहास मोड का उपयोग करता है, और HTML फ़ाइल Django के साथ परोसा जाता है।

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

और views.home:

1. उपयोगकर्ता का दौरा:

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

   इस परिदृश्य पर विचार करें

   urls.py Django के इसलिए की तरह है होम पेज (यानी, /)

चूंकि, होम पेज एकल पेज Vuejs ऐप के लिए आवश्यक index.html के साथ प्रतिक्रिया करता है, यह इसकी तरह काम करता है।

2. वहां से उपयोगकर्ता लगभग पृष्ठ पर जाता है (यानी, /username/12)।

यह अभी भी ठीक काम कर रहा है, क्योंकि यह वू राउटर के साथ घूम रहा है।

3. अब, उपयोगकर्ता पृष्ठ को रीफ्रेश करता है।

चूंकि urls.py पैटर्न में कोई /username/12 है, यह पृष्ठ नहीं मिला (404) दिखाएगा।

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

लेकिन मीडिया या स्थिर यूआरएल की तरह अन्य यूआरएल भी एक ही को इंगित करेंगे:

अब, मैं इस के रूप में पिछले आदेश में सभी पैटर्न को पकड़ने के लिए urls.py में एक और पद्धति प्रदान कर सकता है सभी पैटर्न regex पकड़ो। इस समस्या का समाधान किस प्रकार से किया जा सकता है?

Answer 1

जब से तुम "एक पृष्ठ" का उल्लेख किया है:

1. सर्वर सिर्फ एक पेज की सेवा के लिए माना जाता है index.html (या जो कुछ भी आप इसे कॉल करना चाहते हैं)।

2. सर्वर और वेब एप्लिकेशन (फ्रंट एंड) कोड एपीआई कॉल के माध्यम से संवाद करेगा, जैसे कि सर्वर संसाधन प्रदान करता है और वेब-ऐप उस संसाधन का उपयोग करने का ख्याल रखता है।

3. अनुपलब्ध संसाधन के मामले में, सर्वर को अभी भी एक अलग पृष्ठ के साथ प्रतिक्रिया नहीं देनी चाहिए, इसे अभी भी उस संदेश के साथ जवाब देना चाहिए जो वेब-ऐप उपयोग कर सकता है।

मैं Vue में बनाए गए एक ही पृष्ठ आवेदन किया है।js कि

रूट करने के लिए एचटीएमएल 5 इतिहास मोड का इस्तेमाल करता है मेरा मानना ​​है कि आप vue-router, जो एकल पृष्ठ एप्लिकेशन simulates प्रयोग कर रहे हैं एक पूर्ण विशेषताओं, बहु-पृष्ठ आवेदन किया जाना है।

---

आप this और this पर एक नज़र लेने के लिए चाहते हो सकता है, लेकिन इसके बाद के संस्करण एक ही पृष्ठ आवेदन के लिए सच है।

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

लेकिन अन्य यूआरएल मीडिया या स्थिर यूआरएल भी एक ही पकड़ सभी पैटर्न regex को इंगित करेंगे की तरह:

---

आप अपने urlpatterns साझा की है। इस समस्या का समाधान किस प्रकार से किया जा सकता है?

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. या उद्देश्य यूआरएल द्वारा सेवा लगाकर

   तरह

   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

मैं एक ऐसी ही समस्या है।

मैं वू-राउटर और डीजेंगो आराम ढांचे का उपयोग कैसे कर सकता हूं एक ही समय?

यह इस समस्या का मेरा समाधान है। उम्मीद है कि यह आपकी मदद करता है।

परिणाम आशा पाने के लिए:

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

Answer 3

चूंकि index.html templated (एक गतिशील पृष्ठ) है क्योंकि यह स्थैतिक के बजाय आपके विचारों से परोसा जाता है, यह थोड़ा अजीब हो जाता है।

उत्पादन के लिए, निश्चित रूप से समान सामग्री में स्थिर सामग्री की सेवा के लिए 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))