导读：本篇文章首席CTO笔记来给大家介绍有关django前端后台怎么对接的相关内容，希望对大家有所帮助，一起来看看吧。
Django接受前端数据的几种方法
字符型
字符型的数据相对好获取，前端传递的方法如下：
sendData = { "exporttype": exporttype，
"bugids": bugids，
"test": JSON.stringify({"test": "test"})
};
在Django的后端只要使用exporttype = request.GET.get("exporttype")
就能正常的获取到这个数据了。
注意： 在Python2.7中数据是unicode编码的，如果要使用，有时候需要进行转str
结果示例：
Excle type 'unicode'
数组型
获取数组型的数据如果使用获取字符串的数据的方法，打出的结果是None。我们要使用这个方法：
bugids = request.GET.getlist("bugids[]")
这样获取的数据就是数组类型。
注意： 获取的数组中的元素是unicode编码的，在某些时候使用需要转编码
结果示例：
•传递的url
[14/Jul/2016 11:00:41]"GET /testtools/exportbug/?exporttype=Exclebugids%5B%5D=102bugids%5B%5D=101bugids%5B%5D
•获取的数据
[u'102'， u'101'， u'100'， u'99'， u'98'， u'97'， u'96'， u'95'， u'94'， u'93'， u'92'， u'91'， u'90'， u'89'， u'88'， u'87'
字典型
字典型数据其实可以当成字符串数据来处理，获取到对应字符串后使用JSON模块做一下格式化就行了。
对于前端来说，传递字典型的数据就是传递JSON数据，所以使用的方法是：
"test": JSON.stringify({"test": "test"})
结果示例：
{"test":"test"} type 'unicode'
相关源码
•Get方法
Get方法是wsgi里面的一个方法。
def GET(self):
# The WSGI spec says 'QUERY_STRING' may be absent.
raw_query_string = get_bytes_from_wsgi(self.environ， 'QUERY_STRING'， '')
return http.QueryDict(raw_query_string， encoding=self._encoding)
最终返回的是一个http.QueryDict(raw_query_string， encoding=self._encoding)http的原始数据，而QueryDict继承于MultiValueDict ，所以我们直接看MultiValueDict就好了。
•MultiValueDict
其实源码看起来并不难。
def get(self， key， default=None):
"""
Returns the last data value for the passed key. If key doesn't exist
or value is an empty list， then default is returned.
"""
try:
val = self[key]
except KeyError:
return default
if val == []:
return default
return val
def getlist(self， key， default=None):
"""
Returns the list of values for the passed key. If key doesn't exist，
then a default value is returned.
"""
try:
return super(MultiValueDict， self).__getitem__(key)
except KeyError:
if default is None:
return []
return default
def __getitem__(self， key):
"""
Returns the last data value for this key， or [] if it's an empty list;
raises KeyError if not found.
"""
try:
list_ = super(MultiValueDict， self).__getitem__(key)
except KeyError:
raise MultiValueDictKeyError(repr(key))
try:
return list_[-1]
except IndexError:
return []
Django 前台与后台交互问题
你这个问题描述，着实有点让人费解。感觉你对这方面了解不深，所以一般像你这样的问题很少会有人回答，因为回答之后，你会有更多的疑问，甚至是一直问下去。
在学习的过程中，你要学会自己去搜索解决....
Django。如果你看过官方文档的话，查询数据并把列表传到前台。肯定没问题，很简单的几行代码。如果你不会，那就去查看相应版本的django文档。
jquery ajax请求。看下面的示例代码
//这是一个ajax异步请求，使用post方法
$.ajax({type: "POST",
url: "/message/",
data: {
telnum: $("#telnum").val(),
ordernum: $("#ordernum").val(),
mesgchannel: $("#mesgchannel").val(),
mesglevel: $("#mesglevel").val(),
starttime: $("#datepicker1").val(),
endtime: $("#datepicker2").val()
},
success: function(response){
$('#result').html(response);
}
});
//下面这个是异步请求成功之后，用于接收数据的html标签
div
div id="result" class="alert"/div
/div
django+vue前后端分离项目部署
后端用的drf，使用的是uwsgi+nginx
进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：
测试效果命令：
如果访问：xxx.xxx.xxx.xx:8000 成功， 则uwsgi.ini配置成功
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：
1、第一行
主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：
以及后面的端口问题
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到
5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门
关于django后台admin（suit）缺失的修改（参考：django中文网： ）
在环境中进入项目目录，需要收集css样式，在终端输入命令：
接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常
uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下
教训
获取不到环境，那就指定环境
另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp
netstat -aptn命令行，查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
django-restful:与前端vue接口对接
category 与vue 接口对接
首先是需要把所有的category的内容取出来
由于前端vue展示category是分级的
一级 二级 三级 这样展示的
所以我们需要把三个内容都拿出来
但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样
我们还是需要写serializer
这样就是一级 镶嵌二级 二级镶嵌三级
但是这里有一个问题不要搞错了 这三个类的位置不能弄错了
因为一级是调用二级 所以二级一定是先写好了的
所以二级一定在一级上面 同理 三级要在二级上面
然后就是view
在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了
同时我们还要处理取出某个单一的信息
所以 我们继承了mixins.RetrieveModelMixin 这个类，这是一个显示详情的类
例如显示某个动物园的某个动物那样
/zoos/id
这样的url
同样这样写了 我们就直接只配置category的url就够了
就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类
这些问题他都帮我们解决了
这样处理我们后端就能看见了
但是这样处理了 前端对接时 会发现 无法显示
因为有一个跨域问题
这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法
就是修改服务端
在github上搜索django-cors-headers就可以找到这个信息
同样里面介绍如何使用
安装
pip install django-cors-headers
然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置
这里要注意 MIDDLEWARE配置中
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
这两个必须放在
'django.middleware.csrf.CsrfViewMiddleware',
这个的前面 不然会报错
同时还要配置
CORS_ORIGIN_ALLOW_ALL = True
允许跨域访问 它默认是False
这样前端就可以正常显示了
为什么会产生跨域访问
因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost
修改部分 host的链接
这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问
Web 前端开发怎么和后台进行相衔接
如果是前端做好了，那就是根据后端部分将数据填上了。
一种方式是后端程序员拿着你这个页面直接改，插入数据。这个适合一些模板类的工具例如PHP，，JSP，此外还有形式上相似的比如rhtml、django模板、Velocity等等。PHP中有一个也致力于此的库叫Smarty处理一些简单的情形还是非常不错的。
采用这种方式，前端做好页面后面就帮不上忙了，只能让后端去熟悉你前端的设计，让后你作为前端稍微解释一下一些细节。
一种方式是ajax取数据，也就是让后端暴露出数据，让前端取回来填充页面。除了XML格式，json格式也比较流行。这种情况下是前端完成剩余的部分，前端和后端需要约定好数据格式的细节。
这种方式的缺点是很依赖前后端的沟通，而且几乎没法实现测试驱动开发。
于是这种方式有各种变种，比如Ember.js，knockout.js，backbone.js这些工具使用的方式。很多时候需要给数据先设计一个schema，未必是前端或者后端写，可能是在项目前期约定好的，前端和后端就按照预先约定好的做正确的实现就可以了，这些库会帮你把数据在恰当的位置显示出来，并实现一些交互功能。
请使用手机"扫一扫"x
结语：以上就是首席CTO笔记为大家整理的关于django前端后台怎么对接的相关内容解答汇总了，希望对您有所帮助！如果解决了您的问题欢迎分享给更多关注此问题的朋友喔～