Django4+Vue3全新技术实战全栈项目

download：

django 与 vue 的完美结合 完成前后端的别离开发之后在整合
用django后端，前端用vue，做一个一般的简略体系，我便是一搞后端的，听到vue也是比较震动，之前压根没触摸过vue.

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

首先是创立一个django项目

django-admin startproject mysite # 创立mysite项目

django-admin startapp blog # 创立blog运用

一、接下来便是装置关于vue 的东西了

1、首先装置node.js，官网地址：

2、运用npm淘宝镜像，防止npm下载速度过慢的问题 npm install -g cnpm --registry=

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协同运用开发（1） —— 原型建立

系列目录
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之前，咱们的结构是这样的：

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



nodejs+django结构.png

数据库仍然只有Django负责连接，这和一般的体系并没有什么区别，所以文章里就不涉及详细读写数据库的完成了。
所以问题的要害就在于django和node.js该如何交互。
Django和node.js几乎是两种风格的网络结构，言语也不同，所以咱们需求一个通讯手法。而体系间通讯不外乎便是靠网络恳求（部署在本机的不同体系不在此列，也不值得评论），或是另一个能够用作通讯的体系。通常来说关于node.js和django之间交互的话，一般有3种手法可选：

HTTP Request
Redis publish/subscribe
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 = ';
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也运用起来。