2016-04-05 24 views
0

döndürür Angular 2 uygulamasından bir POST isteğini Django REST Framework API'mime yapıyorum. Tamam iş gibi görünüyor ama benim app döndürülen verilerin baktığınızda aşağıdaki gibi beklenmedik html oluşur (verileri göstermek için kullanılan uyarı görüldüğü gibi dampingli):Django REST Framework, Web API html uygulamasını POST uygulamasından

{"_body":"\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n \n\n \n  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n  <meta name=\"robots\" content=\"NONE,NOARCHIVE\" />\n \n\n <title>Item List – Django REST framework</title>\n\n \n  \n  <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap.min.css\"/>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/bootstrap-tweaks.css\"/>\n  \n\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/prettify.css\"/>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"/static/rest_framework/css/default.css\"/>\n \n\n \n</head>\n\n\n<body class=\"\">\n\n <div class=\"wrapper\">\n \n  <div class=\"navbar navbar-static-top navbar-inverse\">\n  <div class=\"container\">\n   <span>\n   \n    <a class='navbar-brand' rel=\"nofollow\" href='http://www.django-rest-framework.org'>\n     Django REST framework\n    </a>\n   \n   </span>\n   <ul class=\"nav navbar-nav pull-right\">\n   \n    \n    \n    \n   \n   </ul>\n  </div>\n  </div>\n \n\n <div class=\"container\">\n  \n  <ul class=\"breadcrumb\">\n   \n   \n    <li><a href=\"/api/\">Api Root</a></li>\n   \n   \n   \n    <li class=\"active\"><a href=\"/api/items/\">Item List</a></li>\n   \n   \n  </ul>\n  \n\n  <!-- Content -->\n  <div id=\"content\">\n\n  \n   <form id=\"get-form\" class=\"pull-right\">\n   <fieldset>\n    \n    <div class=\"btn-group format-selection\">\n     <a class=\"btn btn-primary js-tooltip\" href=\"/api/items/\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource\">GET</a>\n\n     <button class=\"btn btn-primary dropdown-toggle js-tooltip\" data-toggle=\"dropdown\" title=\"Specify a format for the GET request\">\n     <span class=\"caret\"></span>\n     </button>\n     <ul class=\"dropdown-menu\">\n     \n      <li>\n      <a class=\"js-tooltip format-option\" href=\"/api/items/?format=json\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `json`\">json</a>\n      </li>\n     \n      <li>\n      <a class=\"js-tooltip format-option\" href=\"/api/items/?format=api\" rel=\"nofollow\" title=\"Make a GET request on the Item List resource with the format set to `api`\">api</a>\n      </li>\n     \n     </ul>\n    </div>\n    \n   </fieldset>\n   </form>\n  \n\n  \n   <form class=\"button-form\" action=\"/api/items/\" data-method=\"OPTIONS\">\n   <button class=\"btn btn-primary js-tooltip\" title=\"Make an OPTIONS request on the Item List resource\">OPTIONS</button>\n   </form>\n  \n\n  \n\n  \n\n   <div class=\"content-main\">\n   <div class=\"page-header\">\n    <h1>Item List</h1>\n   </div>\n   <div style=\"float:left\">\n    \n    \n    \n   </div>\n\n   \n\n   <div class=\"request-info\" style=\"clear: both\" >\n    <pre class=\"prettyprint\"><b>POST</b> /api/items/</pre>\n   </div>\n\n   <div class=\"response-info\">\n    <pre class=\"prettyprint\"><span class=\"meta nocode\"><b>HTTP 201 Created</b>\n<b>Allow:</b> <span class=\"lit\">GET, POST, HEAD, OPTIONS</span>\n<b>Content-Type:</b> <span class=\"lit\">application/json</span>\n<b>Location:</b> <span class=\"lit\">fred</span>\n<b>Vary:</b> <span class=\"lit\">Accept</span>\n\n</span>{\n &quot;url&quot;: &quot;fred&quot;,\n &quot;item_type&quot;: &quot;P&quot;,\n &quot;title&quot;: &quot;&quot;,\n &quot;credits_applied&quot;: 10,\n &quot;credits_left&quot;: 10,\n &quot;credits_gifted&quot;: 0,\n &quot;username&quot;: &quot;admin&quot;,\n &quot;liked&quot;: 0,\n &quot;disliked&quot;: 0\n}</pre>\n   </div>\n   </div>\n\n   \n\n   \n    <div class=\"tabbable\">\n    \n     <ul class=\"nav nav-tabs form-switcher\">\n     <li>\n      <a name='html-tab' href=\"#post-object-form\" data-toggle=\"tab\">HTML form</a>\n     </li>\n     <li>\n      <a name='raw-tab' href=\"#post-generic-content-form\" data-toggle=\"tab\">Raw data</a>\n     </li>\n     </ul>\n    \n\n    <div class=\"well tab-content\">\n     \n     <div class=\"tab-pane\" id=\"post-object-form\">\n      \n      <form action=\"/api/items/\" method=\"POST\" enctype=\"multipart/form-data\" class=\"form-horizontal\" novalidate>\n       <fieldset>\n       <input type='hidden' name='csrfmiddlewaretoken' value='Z42Ygso019oegnf1NPdnCeq6ZoqlyWQN' />\n       \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Url\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"url\" class=\"form-control\" type=\"text\" value=\"fred\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group\">\n \n <label class=\"col-sm-2 control-label \">\n  Item type\n </label>\n \n\n <div class=\"col-sm-10\">\n <select class=\"form-control\" name=\"item_type\">\n  \n  \n   \n   <option value=\"V\" >Vine</option>\n   \n  \n   \n   <option value=\"Y\" >YouTube</option>\n   \n  \n   \n   <option value=\"P\" selected >Photo</option>\n   \n  \n   \n   <option value=\"F\" >Flickr</option>\n   \n  \n   \n   <option value=\"I\" >Instagram</option>\n   \n  \n   \n   <option value=\"D\" >DeviantArt</option>\n   \n  \n   \n   <option value=\"5\" >500px</option>\n   \n  \n </select>\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Title\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"title\" class=\"form-control\" type=\"text\" >\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Credits applied\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_applied\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n  <span class=\"help-block\">Total number of credits applied to this item including any given by VeeU admin</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Credits left\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_left\" class=\"form-control\" type=\"number\" value=\"10\">\n\n \n\n \n  <span class=\"help-block\">The number of credits still remaining to show the item</span>\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Credits gifted\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"credits_gifted\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n  <span class=\"help-block\">The number of credits this item has been gifted by other users</span>\n \n </div>\n</div>\n\n \n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Liked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"liked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n \n <div class=\"form-group \">\n \n <label class=\"col-sm-2 control-label \">\n  Disliked\n </label>\n \n\n <div class=\"col-sm-10\">\n <input name=\"disliked\" class=\"form-control\" type=\"number\" value=\"0\">\n\n \n\n \n </div>\n</div>\n\n \n\n\n       <div class=\"form-actions\">\n        <button class=\"btn btn-primary\" title=\"Make a POST request on the Item List resource\">POST</button>\n       </div>\n       </fieldset>\n      </form>\n      \n     </div>\n     \n\n     <div class=\"tab-pane\" id=\"post-generic-content-form\">\n     \n      <form action=\"/api/items/\" method=\"POST\" class=\"form-horizontal\">\n      <fieldset>\n       \n\n\n <div class=\"form-group\">\n <label for=\"id__content_type\" class=\"col-sm-2 control-label\">Media type:</label>\n <div class=\"col-sm-10\">\n  <select data-override=\"content-type\" id=\"id__content_type\" name=\"_content_type\" class=\"form-control\">\n<option value=\"application/json\" selected=\"selected\">application/json</option>\n<option value=\"application/x-www-form-urlencoded\">application/x-www-form-urlencoded</option>\n<option value=\"multipart/form-data\">multipart/form-data</option>\n</select>\n  <span class=\"help-block\"></span>\n </div>\n </div>\n\n <div class=\"form-group\">\n <label for=\"id__content\" class=\"col-sm-2 control-label\">Content:</label>

Açıkçası benim görüş ve diziselleştirici ile yanlış bir şey yapıyorum ama ne olduğunu göremiyorum.

görünümüdür:

class ItemViewSet(viewsets.ModelViewSet): 
 
    queryset = Item.objects.all().order_by('-date_added') 
 
    serializer_class = ItemSerializer 
 

 
    def perform_create(self, serializer): 
 
     creator = User.objects.get(pk=self.request.data['owner_id']) 
 
     serializer.save(owner=creator) 
 

 
    def get_queryset(self): 
 
     this_user = self.request.query_params.get('user', None) 
 
     restrict_to_items_from_user_id = self.request.query_params.get('from', None) 
 
     quantity = self.request.query_params.get('num', 20) 
 

 
     if restrict_to_items_from_user_id is not None: 
 
      
 
      queryset = Item.objects.filter(owner=restrict_to_items_from_user_id, active=True).order_by('-date_added')[0:int(quantity)] 
 
     elif this_user is not None: 
 
      
 
      queryset = Item.objects.filter(active=True, credits_left__gt=0).exclude(pk__in=Seen.objects.filter(user_id=this_user).values_list('item_id', flat=True))[0:int(quantity)] 
 
     else: 
 
      
 
      queryset = Item.objects.filter(active=True, credits_left__gt=0)[0:int(quantity)] 
 

 

 
     return queryset

serileştirici geçerli: API kodu bir GET verirken beklediğim yapar

class ItemSerializer(serializers.HyperlinkedModelSerializer): 
 
    username = serializers.SerializerMethodField() 
 

 
    def get_username(self, obj): 
 
     """ 
 
     Note that query params can be accessed here as follows: 
 
     request = self.context['request'] 
 
     print request.query_params.get['fields'] 
 
     """ 
 
     value = str(obj.owner) 
 
     return value 
 

 
    def get_keywords(self, obj): 
 
     value = str(obj.keywords) 
 
     return value 
 

 
    class Meta: 
 
     model = Item 
 
     fields = ('url', 'item_type', 'title', 'credits_applied', 'credits_left', 'credits_gifted', 'username', 'liked', 'disliked')

uygulamasından ancak neden POST'un beklenmedik bir sürü HTML’yi döndürdüğünü göremiyorum.

Başka bir deyişle, bir POST'tan sonra görünüm/diziselleştirici tarafından döndürülenin nasıl olduğunu nasıl belirleyebilirim. Ben mesela vb kötü argümanlar hakkında bazı veri eklemek isteyebilirsiniz

DÜZENLEME: İşte nedeniyle POST

let body = JSON.stringify({ url: 'fred', item_type: 'P', owner_id: 2, owner: "admin" }); 
 

 
    let headers = new Headers(); 
 
    headers.append('Content-Type', 'application/json'); 
 

 
    this.http.post('http://127.0.0.1:8000/api/items/', 
 
     body, { 
 
     headers: headers 
 
     }) 
 
     .subscribe(
 
     data => { 
 
      alert('DATA RETURNED: '+JSON.stringify(data)); 
 
     }, 
 
     err => alert('POST ERROR: '+err.json().message), 
 
     () => alert('POST Complete') 
 
    );

+0

Bunlardan bir tanesi, uç nokta için Web tarayıcı API'sı oluşturduğundan emin olabilir. – ofnowhere

+0

Evet, bana da öyle görünüyor. Göz atılabilir api'yi neden oluşturması gerektiğine dair bir fikrin var mı? –

+0

POST komut dosyanızı Angular2'den görebilir miyim? Çünkü, doğrudan API çağrısından değil, HTML biçiminden POST yapıyorsunuz gibi görünüyor. –

cevap

0

Problem için Açısal 2 kod idi Django koduyla aynı sunucuda çalışan test uygulaması, Django'nun Web API'sını istediğini düşünmesine neden oldu!

İlgili konular