django 与 vue 的完美结合 以及NodeJS与Django协同应用开发

django 与 vue 的完美结合 实现前后端的分离开发之后在整合

用django后端，前端用vue，做一个普通的简单系统，我就是一搞后端的，听到vue也是比较震惊，之前压根没接触过vue.

看了vue的一些文档，还有一些项目，先说一下django与vue的完美结合吧！

首先是创建一个django项目

 django-admin startproject mysite   # 创建mysite项目

 django-admin startapp blog   # 创建blog应用

一、接下来就是安装关于vue 的东西了

1、首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/

2、使用npm淘宝镜像，避免npm下载速度过慢的问题   npm install -g cnpm --registry=https://registry.npm.taobao.org  

3、使用cnpm 下载vue-cli       cnmp install -g cue-cli

二、在django项目中创建vue项目

首先，进去django项目的项目目录中，执行：

vue-init webpack firstvue## firstvue为前端项目的名称，可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。

mysite 文件夹  blog 文件夹   和 firstvue文件夹  要在同一目录级别

在创建时，会弹出很多选择项，根据自己需求自定义修改。也可以全部回车，使用默认的。这里我就直接全部回车。

三、编写vue前端项目，直接编写就是，调试则可以执行。也可先不编写，跳过这一步

    cd firstvue## 进入到上一部创建的firstvue项目中  
    cnpm install        ## 安装需要的依赖模块  
    cnpm run dev        ## 运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式  

四、vue项目写完后，打包vue项目，然后修改django配置，将vue集成到django中

    cnpm run build        ## 打包vue项目，会将所有东西打包成一个dist文件夹  

五、接下来就是配置django中的setting文件了：

六、修改django的主目录的urls文件：

七、启动django服务，访问localhost:8000 则可以出现vue的首页。

python manage.py runserver

 

 

 

---

系列目录

• NodeJS与Django协同应用开发（0） node.js基础知识
• NodeJS与Django协同应用开发（1）原型搭建
• NodeJS与Django协同应用开发（2）业务框架
• NodeJS与Django协同应用开发（3）测试与优化
• NodeJS与Django协同应用开发（4）部署

---

前文我们介绍了node.js还有socket.io的基础知识，这篇文章我们来说一下如何将node.js与Django一起使用，并且搭建一个简单的原型出来。

原本我们的项目全部都基于Django框架，并且也能够满足基本需求了，但是后来新增了实时需求，在Django框架下比较难做，为了少挖点坑，多省点时间，我们选择使用node.js。

基本框架

在没有node.js之前，我们的结构是这样的：

初始结构.png

增加的node.js系统应该是与原本的Django系统平行的，而我们使用node.js的初衷是将它作为实时需求的服务器，不承担或者只承担一小部分的业务逻辑，且完全不需要和数据库有交互。所以之后的结构就是这样的：

nodejs+django结构.png

数据库依然只有Django负责连接，这和一般的系统并没有什么区别，所以文章里就不涉及具体读写数据库的实现了。
于是问题的关键就在于django和node.js该如何交互。
Django和node.js几乎是两种风格的网络框架，语言也不同，所以我们需要一个通信手段。而系统间通信不外乎就是靠网络请求（部署在本机的不同系统不在此列，也不值得讨论），或是另一个可以用作通信的系统。通常来说对于node.js和django之间交互的话，一般有3种手段可选：

1. HTTP Request
2. Redis publish/subscribe
3. RPC

三种都是可行的方案，但是也有各自的应用场景。

原型实现（1） HTTP Request

首先是http request。先来看一下django代码：

[urls.py]
from django.conf.urls import url

urlpatterns = [
    url(r'^get_data/$', 'backend.views.get_data'),
]

[backend.views.py]
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods

@require_http_methods(["GET"])
def get_data(request):
    data = {
        'data1': 123,
        'data2': 'abc',    
    }
    return JsonResponse(data, safe=False)

这里我们定义了一个叫get_data的api，方便起见我们使用JSON格式作为返回类型，返回一个整型一个字符串。

然后再来看一下node.js代码：

[django_request.js]
var http = require('http');

var default_protocol = 'http://'
var default_host = 'localhost';
var default_port = 8000;

exports.get = function get(path, on_data_callback, on_err_callback) {
    var url = default_protocol + default_host + ':' + default_port + path;
    var req = http.get(url, function onDjangoRequestGet(res) {
        res.setEncoding('utf-8');
        res.on('data', function onDjangoRequestGetData(data) {
            on_data_callback(JSON.parse(data));
        });
        res.resume();
    }).on('error', function onDjangoRequestGetError(e) {
        if (on_err_callback)
            on_err_callback(e);
        else
            throw "error get " + url + ", " + e;
    });
}

[app.js]
var django_request = require('./django_request');

django_request.get('/get_data/', function(data){
    console.log('get_data response: %j',data);
}, function(err) {
    console.log('error get_data: '+e);
});

在django_request.js里面我们写了一个通用的get方法，可以用来向django发起http get请求。运行app.js以后我们就看到结果了。

alfred@workstation:~/Documents/node_django/nodeapp$ node app.js 
get_data response: {"data1":123,"data2":"abc"}

非常简单，但是别急，还有post请求。
普通的post请求和get类似，非常简单，用过http库的同学都应该会写，但是这年头已经没有普通的post了，大家的安全意识越来越高，没有哪个网站会不防跨域请求了，所以我们的post还需要解决跨域的问题。
默认配置下django的中间件是包含CsrfViewMiddleware的，也就是会在用户访问网页时向cookie中添加csrf_token。所以我们就写一个简单的页面，顺便把socket.io也使用起来。

在django的views中添加名为post_data的api，以及为页面准备的view函数。

[backend.views.py]
import json

def index(request):
    return render_to_response('index.html', RequestContext(request, {}))

def get_post_args(request, *args):
    try:
        args_info = json.loads(request.body)
    except Exception, e:
        args_info = {}

    return [request.POST.get(item, None) or args_info.get(item, None) for item in args]
    
@require_http_methods(["POST"])
def post_data(request):
    data1, data2 = get_post_args(request, 'data1', 'data2')
    response = {
        'status': 'success',
        'data1': data1,
        'data2': data2,
    }
    return JsonResponse(response, safe=False)

[urls.py]
urlpatterns = [
    url(r'^$', 'backend.views.index'),
    url(r'^get_data/$', 'backend.views.get_data'),
    url(r'^post_data/$', 'backend.views.post_data'),
]

socket.io监听9000端口。

[app.js]
var http = require('http');
var sio = require('socket.io');
var chatroom = require('./chatroom');

var server = http.createServer();
var io = sio.listen(server, {
    log: true,
});
chatroom.init(io);
var port = 9000;
server.listen(9000, function startapp() {
    console.log('Nodejs app listening on ' + port);
});

定义通用的post方法。

[django_request.js]
var cookie = require('cookie');

exports.post = function post(user_cookie, path, values, on_data_callback, on_err_callback) {
    var cookies = cookie.parse(user_cookie);
    var values = querystring.stringify(values);
    var options = {
        hostname: default_host,
        port: default_port,
        path: path,
        method: 'POST',
        headers: {
            'Cookie': user_cookie,
            'Content-Type': 'application/x-www-form-urlencoded',
            'Content-Length': values.length,
            'X-CSRFToken': cookies['csrftoken'],
        }
    };
    var post_req = http.request(options, function onDjangoRequestPost(res) {
        res.setEncoding('utf-8');
        res.on('data', function onDjangoRequestPostData(data) {
            on_data_callback(data);
        });
    }).on('error', function onDjangoRequestPostError(e) {
        console.log(e);
        if (on_err_callback)
            on_err_callback(e);
        else
            throw "error get " + url + ", " + e;
    });
    post_req.write(values);
    post_req.end();
}

为get和post事件设定handler。

[chatroom.js]
var cookie_reader = require('cookie');
var django_request = require('./django_request');

function initSocketEvent(socket) {
    socket.on('get', function() {
        console.log('event: get');
        django_request.get('/get_data/', function(res){
            console.log('get_data response: %j',res);
        }, function(err) {
            //经指正这里应该是err而不是e，保留BUG以此为鉴
            console.log('error get_data: '+e);
        });
    });
    socket.on('post', function(data) {
        console.log('event: post');
        django_request.post(socket.handshake.headers.cookie, '/post_data/', {'data1':123, 'data2':'abc', function(res){
            console.log('post_data response: %j', res);
        }, function(err){
            console.log('error post_data: '+e);
        });
    });
};

exports.init = function(io) {
    io.on('connection', function onSocketConnection(socket) {
        console.log('new connection');
        initSocketEvent(socket);
    });
};

简单的html页面。

[index.html]
    ...
    <div>
        <button id="btn" style="width:200px;height:150px;">hit me</button>
    </div>
    <div id="content"></div>
    <script type="text/javascript" src="/static/backend/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/static/backend/js/socket.io.min.js"></script>
    <script type="text/javascript">
    (function() {
        socket = io.connect('http://localhost:9000/');
        socket.on('connect', function() {
            console.log('connected');
        });
        $('#btn').click(function() {
            socket.emit('get');
            socket.emit('post');
        });
    })();
    </script>

实现post的重点在于cookie的设置。socket.io在客户端连接的时候默认就会带上浏览器的cookie，这帮我们省去了不少功夫，也省去了显示传递csrftoken的烦恼。但是在node.js中向django发起post请求时不能只设定X-CSRFToken，也不能只设定cookie。看一下django的源码（django.middleware.csrf）就能够了解到是同时获取cookie和HTTP_X_CSRFTOKEN的。所以我们必须把cookie传给post函数，这样才能成功发起请求。
顺便一提，这同时也解决了sessionid的问题，如果是登录用户，django是能够获取到user信息的。

以上是node.js端向django端发起请求，但是这仅仅只是由node.sj主动而已，还缺少django向node.js发起HTTP请求的部分。

所以我们在app.js中添加如下代码

[app.js]
function onGetData(request, response){
    if (request.method == 'GET'){
        response.writeHead(200, {"Content-Type": "application/json"});
        jsonobj = {
            'data1': 123,
            'data2': 'abc'
        }
        response.end(JSON.stringify(jsonobj));
    } else {
        response.writeHead(403);
        response.end();
    }
}
function onPostData(request, response){
    if (request.method == 'POST'){
        var body = '';

        request.on('data', function (data) {
            body += data;

            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            response.writeHead(200, {'Content-Type': 'application/json'});
            jsonobj = {
                'data1': 123,
                'data2': 'abc',
                'post_data': post,
            }
            response.end(JSON.stringify(jsonobj));
        });
    } else {
        response.writeHead(403);
        response.end();
    }
}

然后我们写一小段python代码来测试一下

[http_test.py]
import urllib
import urllib2
 
httpClient = None
try:
    headers = {"Content-type": "application/x-www-form-urlencoded", 
               "Accept": "text/plain"}
    data = urllib.urlencode({'post_arg1': 'def', 'post_arg2': 456})
    get_request = urllib2.Request('http://localhost:9000/node_get_data/', headers=headers)
    get_response = urllib2.urlopen(get_request)
    get_plainRes = get_response.read().decode('utf-8')
    print(get_plainRes)
    post_request = urllib2.Request('http://localhost:9000/node_post_data/', data, headers)
    post_response = urllib2.urlopen(post_request)
    post_plainRes = post_response.read().decode('utf-8')
    print(post_plainRes)
except Exception, e:
    print e

然后就能看到成功的输出：

[nodejs]
Nodejs app listening on 9000
url: /node_get_data/, method: GET
url: /node_post_data/, method: POST
[python]
{"data1":123,"data2":"abc"}
{"data1":123,"data2":"abc","post_data":{"post_arg1":"def","post_arg2":"456"}}

到此双向的HTTP Request就建立起来了。只不过node.js端并没有csrf认证。而在我们的django端，csrf认证和api都是已经部署了的线上模块，所以不需要在这方面花精力。

然而如果最终决定采用双向HTTP Reqeust的话，那node.js端的csrf认证必须要做好，因为HTTP API都是向外暴露的，这是这种方式最大的缺点。并不是所有的系统间调用都需要向公网露接口，一旦被他人知道了一些非公开的api路径，那很有可能引发安全问题。
并且HTTP是要走外网的，这还带来了一些额外的开销。

原型实现（2） Redis Publish/Subscribe

相比HTTP Request，这种方式的代码量要少的多。（关于Redis Pub/Sub，请移步相关文档）
要实现双向通信，无非是两边同时建立pub与sub channel。而subscribe需要持续监听，关于这一点，我们先看代码再说。

首先是node.js端，npm安装redis库，库里已经包含了所有我们需要的了。

[app.js]
var redis = require('redis');
// subscribe
var sub = redis.createClient();
sub.subscribe('test_channel');
sub.on('message', function onSubNewMessage(channel, data) {
    console.log(channel, data);
});
// publish
var pub = redis.createClient();
pub.publish('test_channel', 'nodejs data published to test_channel');

node.js是事件驱动的异步非阻塞框架，pub/sub这种方式的实现和它本身的代码风格非常相近，所以8行代码就实现了sub与pub的功能。

再来看python代码

[redis_test.py]
import redis

r = redis.StrictRedis(host='localhost', port=6379)
# publish
r.publish('test_channel', 'python data published to test_channel');
# subscribe
sub = r.pubsub()
sub.subscribe('test_channel')
for item in sub.listen():  
    if item['type'] == 'message':  
        print(item['data'])

代码中的channel名是可以自定义的。实际应用中可以按照不同的需求管理不同的channel，这样就不会造成消息的混乱。

多看几眼代码，细心的同学会发现，python的sub代码只会执行一次，也就是说如果需要持续监听的话，至少要新开一个线程。也就是说对于django，我们还需要额外做线程间通信的工作。这种做法并不是说不可以，只是与django原本的风格不太吻合，并不是非常推荐。
（顺便一提，不要将开启线程的工作放在views函数中，因为views的执行是多线程的，线程数量会随着访问压力增大而增加，放在views中会导致重复开心线程，这个坑我爬过。）

原型实现（3） RPC

在我的另一篇文章（ZeroRPC应用）中提到过项目所使用的RPC系统。这个系统的建立是在node.js应用之前的，非常庆幸当时选用的是zerorpc，正好可以无缝接合node.js。。
类似于HTTP Request，如果要实现双向通信那就需要在两端同时建立server。
python端的代码可以看我的那篇文章里所写的内容，这边我们就来说一下node.js端的调用和建立server。

[app.js]
var zerorpc = require("zerorpc");

var client = new zerorpc.Client();
client.connect("tcp://127.0.0.1:4242");

client.invoke("test_connection", "arg1", "arg2", function(error, res, more) {
    if (!error){
        console.log(res, more);
    } else {
        console.log(error);
    }
});

var rpcserver = new zerorpc.Server({
    test_connection: function(arg1, arg2, reply) {
        reply(null, True, arg1, arg2);
    }
});

rpcserver.bind("tcp://0.0.0.0:5353");

和python一样，在node.js里写zerorpc也可以返回多个值，这就是invoke的回调函数里的more参数的作用。res表示返回的第一个值，而more包含了其他的返回值。

rpc方式的概念和HTTP Request的方式一样，不过比HTTP Request好在不需要暴露API，因为完全可以在内网下部署，并把外网端口禁封。但是他们又有一个共同的缺点，那就是对于node.js来说，我们需要一个额外的消息分发机制。为什么呢？因为我们接受消息的入口是统一的。
考虑这个情况：
在node.js里我们有2个子系统，子系统A和子系统B，他们分别为功能I和功能II服务，各自也都有需要和django交互的地方。如果此时功能I和功能II分别有一条消息到来，那我们就必须要区分消息的送达对象。这里就又是额外的工作量了。
这个情况在使用redis时就不会出现。redis下我们可以只subscribe自己关心的channel，也就是说只会收到与自身系统相关的消息。

总结

对于三种方式的优缺点，我们总结如下：

实现方式	优点	缺点
HTTP Request	方便和现有系统集成	暴露外网API，流量走外网，需要额外安全工作
Redis	切合node.js风格，容易按channel名管理	django端subscribe需要额外工作量
RPC	流量走内网，不暴露API	node.js端分发消息需要额外工作量

工作中我们可以按照实际需求来组合使用，我的项目里原本是使用HTTP Request实现的原型，后来也是因为其暴露API的缺点以及node.js端需要csrf认证才放弃用django向node.js发起HTTP请求。

目前我们项目中django向node.js发消息使用的是redis，node.js向django请求数据或发送消息使用的是rpc。这么做没有什么额外的工作量，可以让我专注于业务逻辑。

业务逻辑涉及到node.js端的架构设计。