Django,Angular结合的一些问题解决方法

Django,Angular结合的一些问题解决方法

---

1 模板标签的问题

Django和Angular都使用{{varname}}的标签语法，存在冲突，解决方法之一是配置Angular使用不同的标签，例如使用[[varname]],这个需要在模块级别配置

    angular.module('app',[]).config(['$interpolateProvider',function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }]);

2 csrf的问题

这个如果是针对个别请求需要设置csrf，可以在用$http发送请求时配置xsrfHeaderName和xsrfCookieName参数，在Django中这2个值分别为：’csrftoken’和’X-CSRFToken’，因此发送一个请求应如下：

代码段1：

    $http({
            method : 'post',
            url : '/login',
            data : {'username' : 'tom', 'password' : '123'},
            xsrfCookieName : 'csrftoken',
            xsrfHeaderName : 'X-CSRFToken'
        });

一般是所有的请求均需要设置xsrfCookieName和xsrfHeaderName，因此可以在模块上统一配置：

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

另外如果不使用Angular，只是用jquery的情况下，需要对jQuery的ajax方法作配置：

    var getCookie = function(name){
        var offset = document.cookie.indexOf(name);
        if(offset != -1){
            offset += name.length + 1;
            end = document.cookie.indexOf(";",offset);
            if(end == -1){
                end = document.cookie.length;
            }
            return unescape(document.cookie.substring(offset,end));
        }else{
            return "";
        }
    };

    jQuery.ajaxSetup({
        dataType: "json",
        beforeSend: function(xhr, settings){
            var csrftoken = getCookie('csrftoken');
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        },
    });

3 post请求参数的问题

上面的代码段1中发送的ajax请求，实际上发出的html请求报文的body是json串：”{‘username’ : ‘tom’, ‘password’ : ‘123’}” ，而不是表单参数形式”username=tom&password=123”,Django接受到请求后，得到的HttpRequest对象实例request其body属性的值为json串”{‘username’ : ‘tom’, ‘password’ : ‘123’}”，而request.POST这个字典是空的，也就不能使用request.POST[‘username’]的方式得到username参数值，而只能通过分析request.body的json串来得到各参数值。在我们的目的确实就是想传一个json到服务器时，这样是可以的。如果就是想从request.POST里取参数，需要修改下代码，做2个工作：

1. 把”{‘username’ : ‘tom’, ‘password’ : ‘123’}”转成”username=tom&password=123”
2. 设置http头’Content-Type’为’application/x-www-form-urlencoded’

第1项可以自己写代码实现，也可以用jQuery现成的方法：

    jQuery.param({'username' : 'tom',
                    'password' : '123'});

修改后的代码应该时这样的：

    $http({
                method : 'post',
                url : '/login',
                data : jQuery.param({
                    'username' : 'tom',
                    'password' : '123'}),
                headers : {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                }
            });