django怎么和前端交互(2023年最新整理)

导读：今天首席CTO笔记来给各位分享关于django怎么和前端交互的相关内容，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

[Django] 如何在Django中使用前端工具链

Django最大的不足在于其落后的前端工具链。现在前端开发几乎必备的包管理器（例如npm,yarn）以及工程化必备的webpack工具链，Django却不支持。Django开发的工作流中，后端的包管理可以用pip，而前端的包只能手动管理。所以，我最近的工程项目中，已不再使用Django提供的前端模块，仅仅把它当作API服务器。这的确很遗憾，因为Django的template引擎也有一些易用的特性，如此抛弃，真的有点不舍。那么有没有可能结合二者的优点呢？

经过一番探索，网上给出最靠谱的答案就是利用 django-webpack-loader 和 webpack-bundle-tracker 这两个插件。其原理是 webpack-bundle-tracker 能够输出webpack的编译过程以及结果。 django-webpack-loader 插件则是Django和webpack之间的桥梁，利用上面的编译结果，自动加载webpack打包后的静态文件。

需要用webpack生成的静态文件时，就在template上面使用下面一段模板语言，能够自动完成静态文件的注入。

简单的试了试，应该能够达到我想要的效果，明天有时间再研究。

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-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端口 导致了跨域访问

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

结语：以上就是首席CTO笔记为大家整理的关于django怎么和前端交互的相关内容解答汇总了，希望对您有所帮助！如果解决了您的问题欢迎分享给更多关注此问题的朋友喔～

以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的互联网后端知识。希望您喜欢！