角色代码不能很好的与我的python django应用程序 [英] Angular code not playing nice with my python django application

问题描述

由于某种原因，我无法使用我的角度代码来播放我的python django应用程序。当我提交页面时，它会保存我的数据库中的所有空值，并且我的获取响应无法正常工作，因为没有返回任何内容。任何帮助将不胜感激，我还包括屏幕截图，以更好地了解我正在做的事情。

角度代码

  var dim = angular.module（'Dim '，['ngResource']）; 
 
 
 dim.config（['$ httpProvider'，function（$ httpProvider）{
 $ httpProvider.defaults.xsrfCookieName ='csrftoken'; 
 $ httpProvider。 defaults.xsrfHeaderName ='X-CSRFToken'; 
}]）; 
 
 dim.factory（Dim，function（$ resource）{
 return $ resource（/ _ dims.html /：id，{id：'@id'}， 
 index：{method：'GET'，isArray：true，responseType：'json'}，
 update：{method：'PUT'，responseType：'json'} 
}）; 
}）
 
 
 dim.controller（DimController，function（$ scope，$ http，Dim）{
 $ scope.dims = Dim.index ）
 
 $ scope.addDim = function（）{
 dim = Dim.save（$ scope.newDim）
 
 $ scope.dims.push（Dim） 
 $ scope.newDim = {} 
} 
 
 $ scope.deleteDim = function（index）{
 
 dim = $ scope.dims [index ] 
 Dim.delete（dim）
 $ scope.dims.splice（index，1）; 
} 
}）
  / pre> 
 
 
 views.py 
  def add_dimensions（request）： 
如果request.method =='POST'：
 c_date = datetime.now（）
 u_date = datetime.now（）
 description = request.POST.get（'description'）
 style = request.POST.get（'style'）
 target = request.POST.get（'target'）
 upper_limit = request.POST.get（'upper_limit'）
 lower_limit = request.POST.get（'lower_limit'）
 inspect_tool = request.POST.get（'inspect_tool'）
 critical = request.POST.get（'critical'）
 units = request.POST.get（'units'）
 metric = request.POST.get（'metric'）
 target_strings = request。 POST.get（'target_strings'）
 ref_dim_id = request.POST.get（'ref_dim_id'）
 nested_number = request.POST.get（'nested_number'）
 met_upper = request.POST。 get（'met_upper'）
 met_lower = request.POST.get（'met_lower'）
 valc = request.POST.get（'valc'）
 sheet_id = request.POST.get 'sheet_id'）
 data = {} 
 dim = Dimension.objects.create（
 description = description，
 style = style，
 target = target，
 upper_limit = upper_limit，
 lower_limit = lower_limit，
 inspect_tool = inspect_tool，
 critical = critical，
 units = units，
 metric = metric，
 target_strings = target_strings，
 ref_dim_id = ref_dim_id，
 nested_number = nested_number，
 met_upper = met_upper，
 met_lower = met_lower，
 valc = valc，
 sheet_id = sheet_id，
 created_at = c_date，
 updated_at = u_date）
 data ['description'] = dim.description; 
 data ['style'] = dim.style; 
 data ['target'] = dim.target; 
 data ['upper_limit'] = dim.upper_limit; 
 data ['lower_limit'] = dim.lower_limit; 
 data ['inspect_tool'] = dim.inspection_tool; 
 data ['critical'] = dim.critical; 
 data ['units'] = dim.units; 
 data ['metric'] = dim.metric; 
 data ['target_strings'] = dim.target_strings; 
 data ['ref_dim_id'] = dim.ref_dim_id; 
 data ['nested_number'] = dim.nested_number; 
 data ['met_upper'] = dim.met_upper; 
 data ['met_lower'] = dim.met_lower; 
 data ['valc'] = dim.valc; 
 data ['sheet_id'] = dim.sheet_id; 
 return HttpResponse（json.dumps（data），content_type =application / json，）
 
 else：
 return render（request，'app / _dims.html'） 
  
 url.py 
  urlpatterns = [
＃示例：
 url（r'^ $'，app.views.home，name ='home'），
 url（r'联系$'，app.views.contact，name ='contact'），
 url（r'^ about'，app.views.about，name ='about'），
 #url（r '^ sheet'，app.views.sheet，name ='sheet'），
 url（r'^ sheet /（？P< customer_id> \w +）$'，app.views.sheet，name = 'sheet_customer'），
 url（r'^ sheet / sheet_form_create.html $'，app.views.sheet_form_create，name ='sheet_form_create'），
 url（r'^ sheet / sheet_form_create.html / get_work $'，app.views.get_work，name ='get_work'），
 url（r'^ sheet /（？P< pk> \d +）/ sheet_update $'，app.views.update_sheet，name ='sheet_update'），
 url（r'^ _ dims.htm l $'，app.views.add_dimensions，name ='dim_update'），
 url（r'^ sheet /（？P< pk> \d +）/ delete_sheet $'，app.views.delete_sheet，name ='sheet_delete'），
 url（r'^ sheet / sheet_form_create.html / _dim $'，app.views.add_dimensions，name ='dim'），
 url（r'^ _ dims.html （？P< pk> \d +）$'，app.views.add_dimensions，name ='dim'），
 url（r'^ $'，app.views.dimtable_asJson，name ='dim_table_url' ，
 #url（r ^'grid_json /'，include（djqgrid.urls）），
  
 _dims.html 
  {％block content％} 
 
< div class =container ng-app =Dim> 
< h1>维度< / h1> 
< divng-controller =DimController> 
< div class =well> 
< h3>添加维度< / h3> 
< form ng-submit =addDim（）> 
< div class =row> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.descriptionplaceholder =Descriptiontype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.styleplaceholder =Styletype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.targetplaceholder =Targettype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.upper_limitplaceholder =上限type =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.lower_limitplaceholder =下限type =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.inspecton_toolplaceholder =Inspection Tooltype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.criticalplaceholder =Criticaltype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.unitsplaceholder =Unitstype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.metricplaceholder =Metrictype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.target_stringsplaceholder =Target Stringstype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.ref_dim_idplaceholder =Ref Dim Idtype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.nested_numberplaceholder =Nested Numbertype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.met_upperplaceholder =Met Uppertype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.met_lowerplaceholder =Met Lowertype =text>< / input> 
< / div> 
< div class =col-xs-6>> 
< input class =form-controlng-model =newDim.valcplaceholder =Valctype =text>< / input> 
< / div> 
< div class =col-xs-6> 
< input class =form-controlng-model =newDim.sheet_idplaceholder =Sheet IDtype =text>< / input> 
< / div> 
< / div> 
< div class =row> 
< div class =col-xs-12 text-center> 
< br /> 
< input class =btn btn-primarytype =submitvalue =保存维度> /< / input> {％csrf_token％} 
< / div> 
< / div> 
< / form> 
< table class =table table-bordered trace-table> 
< thead> 
< tr class =trace-table> 
< th class =ts jpstyle =border：solid black;>描述< / th> 
< / tr> 
< / thead> 
< tr class =trace-table> 
< trng-repeat =dim in tracks by $ index> 
< td class =trace-tablestyle =border：solid black;> {{dim.description}}< / td> 
< / tr> 
< / tr> 
< / table> 
< / div> 
< / div> 
< / div> 
< a class =btn btn-dangerng-click =deleteDim（$ index）> _< / a> 
 
 {％endblock％}。 
  
  
 
 
 
  
解决方案
随着您的网络标签屏幕截图显示，您正在发送JSON，不是表单编码数据。所以在Django你需要使用 json.loads（request.body）来获取数据作为一个dict，而不是访问 request.POST 这将永远是空的。
 
 
 
注意，如果你这样做，你几乎肯定会使用django-rest-framework，允许您定义将自动将模型转换为JSON的序列化器和解串器，并另外验证提交的数据。
 
For some reason I can't get my angular code to play nice with my python django application. When I submit the page it saves all null values in my db and my get response isn't working correctly either because nothing is returned. Any help will be greatly appreciated, I also included screen shots for a better picture of what I am trying to do. 

angular code 
var dim = angular.module('Dim', ['ngResource']); 


dim.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
}]); 

dim.factory("Dim", function ($resource) { 
    return $resource("/_dims.html/:id", { id: '@id' }, { 
        index: { method: 'GET', isArray: true, responseType: 'json' }, 
        update: { method: 'PUT', responseType: 'json' } 
    }); 
}) 


dim.controller("DimController", function ($scope, $http, Dim) { 
    $scope.dims = Dim.index() 

    $scope.addDim = function () { 
        dim = Dim.save($scope.newDim) 

        $scope.dims.push(Dim) 
        $scope.newDim = {} 
    } 

    $scope.deleteDim = function (index) { 

        dim = $scope.dims[index] 
        Dim.delete(dim) 
        $scope.dims.splice(index, 1); 
    } 
}) 
views.py 
def add_dimensions(request): 
  if request.method == 'POST': 
    c_date = datetime.now() 
    u_date = datetime.now() 
    description = request.POST.get('description') 
    style = request.POST.get('style') 
    target = request.POST.get('target') 
    upper_limit = request.POST.get('upper_limit') 
    lower_limit = request.POST.get('lower_limit') 
    inspection_tool = request.POST.get('inspection_tool') 
    critical = request.POST.get('critical') 
    units = request.POST.get('units') 
    metric = request.POST.get('metric') 
    target_strings = request.POST.get('target_strings') 
    ref_dim_id = request.POST.get('ref_dim_id') 
    nested_number = request.POST.get('nested_number') 
    met_upper = request.POST.get('met_upper') 
    met_lower = request.POST.get('met_lower') 
    valc = request.POST.get('valc') 
    sheet_id = request.POST.get('sheet_id') 
    data = {} 
    dim = Dimension.objects.create( 
          description=description, 
          style=style, 
          target=target, 
          upper_limit=upper_limit, 
          lower_limit=lower_limit, 
          inspection_tool=inspection_tool, 
          critical=critical, 
          units=units, 
          metric=metric, 
          target_strings=target_strings, 
          ref_dim_id=ref_dim_id, 
          nested_number=nested_number, 
          met_upper=met_upper, 
          met_lower=met_lower, 
          valc=valc, 
          sheet_id=sheet_id, 
          created_at=c_date, 
          updated_at=u_date) 
    data['description'] = dim.description; 
    data['style'] = dim.style; 
    data['target'] = dim.target; 
    data['upper_limit'] = dim.upper_limit; 
    data['lower_limit'] = dim.lower_limit; 
    data['inspection_tool'] = dim.inspection_tool; 
    data['critical'] = dim.critical; 
    data['units'] = dim.units; 
    data['metric'] = dim.metric; 
    data['target_strings'] = dim.target_strings; 
    data['ref_dim_id'] = dim.ref_dim_id; 
    data['nested_number'] = dim.nested_number; 
    data['met_upper'] = dim.met_upper; 
    data['met_lower'] = dim.met_lower; 
    data['valc'] = dim.valc; 
    data['sheet_id'] = dim.sheet_id; 
    return HttpResponse(json.dumps(data), content_type="application/json",) 

  else: 
      return render(request, 'app/_dims.html')     
url.py 
urlpatterns = [ 
    # Examples: 
    url(r'^$', app.views.home, name='home'), 
    url(r'^contact$', app.views.contact, name='contact'), 
    url(r'^about', app.views.about, name='about'), 
    #url(r'^sheet', app.views.sheet, name='sheet'), 
    url(r'^sheet/(?P<customer_id>\w+)$', app.views.sheet, name='sheet_customer'), 
    url(r'^sheet/sheet_form_create.html$', app.views.sheet_form_create, name='sheet_form_create'), 
    url(r'^sheet/sheet_form_create.html/get_work$', app.views.get_work, name='get_work'), 
    url(r'^sheet/(?P<pk>\d+)/sheet_update$', app.views.update_sheet, name='sheet_update'), 
    url(r'^_dims.html$', app.views.add_dimensions, name='dim_update'), 
    url(r'^sheet/(?P<pk>\d+)/delete_sheet$', app.views.delete_sheet, name='sheet_delete'), 
    url(r'^sheet/sheet_form_create.html/_dim$', app.views.add_dimensions, name='dim'), 
    url(r'^_dims.html(?P<pk>\d+)$', app.views.add_dimensions, name='dim'), 
    url(r'^$', app.views.dimtable_asJson, name='dim_table_url'), 
    #url(r^'grid_json/', include (djqgrid.urls)), 
_dims.html 
{% block content %} 

  <div class="container" ng-app="Dim"> 
    <h1>Dimensions</h1> 
    <div ng-controller="DimController"> 
      <div class="well"> 
        <h3>Add Dimensions</h3> 
        <form ng-submit="addDim()"> 
          <div class="row"> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.description" placeholder="Description" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.style" placeholder="Style" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.target" placeholder="Target" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.upper_limit" placeholder="Upper Limit" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.lower_limit" placeholder="Lower Limit" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.inspecton_tool" placeholder="Inspection Tool" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.critical" placeholder="Critical" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.units" placeholder="Units" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.metric" placeholder="Metric" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.target_strings" placeholder="Target Strings" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.ref_dim_id" placeholder="Ref Dim Id" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.nested_number" placeholder="Nested Number" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.met_upper" placeholder="Met Upper" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.met_lower" placeholder="Met Lower" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.valc" placeholder="Valc" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.sheet_id" placeholder="Sheet ID" type="text"></input> 
            </div> 
          </div>     
          <div class="row"> 
            <div class="col-xs-12 text-center"> 
              <br/> 
              <input class="btn btn-primary" type="submit" value="Save Dimension">/</input> {% csrf_token %} 
            </div> 
          </div> 
        </form> 
        <table class="table table-bordered trace-table"> 
          <thead> 
            <tr class="trace-table"> 
              <th class="ts jp" style="border: solid black;">Description</th> 
            </tr> 
          </thead> 
          <tr class="trace-table"> 
            <tr ng-repeat="dim in dims track by $index"> 
              <td class="trace-table" style="border: solid black;">{{ dim.description }}</td> 
            </tr> 
          </tr> 
        </table> 
      </div> 
    </div> 
  </div> 
  <a class="btn btn-danger" ng-click="deleteDim($index)">_</a> 

{% endblock %}. 


解决方案
As your network tab screenshot shows, you're sending JSON, not form-encoded data. So in Django you need to use json.loads(request.body) to get the data as a dict, rather than accessing request.POST which will always be empty.

Note that if you're doing something like this, you should almost certainly be using django-rest-framework, which allows you to define serializers and deserializers that will automatically convert your models to and from JSON, and additionally validate the submitted data.

                        
这篇关于角色代码不能很好的与我的python django应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！