django如何运行前端代码(2023年最新解答)

导读：很多朋友问到关于django如何运行前端代码的相关问题，本文首席CTO笔记就来为大家做个详细解答，供大家参考，希望对大家有所帮助！一起来看看吧！

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上面使用下面一段模板语言，能够自动完成静态文件的注入。

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

字符型

字符型的数据相对好获取，前端传递的方法如下：

sendData={"exporttype":exporttype，

"bugids":bugids，

"test":JSON.stringify({"test":"test"})

};

在Django的后端只要使用exporttype=request.GET.get("exporttype")

就能正常的获取到这个数据了。

注意：在Python2.7中数据是unicode编码的，如果要使用，有时候需要进行转str

结果示例：

Excletype'unicode'

数组型

获取数组型的数据如果使用获取字符串的数据的方法，打出的结果是None。我们要使用这个方法：

bugids=request.GET.getlist("bugids[]")

这样获取的数据就是数组类型。

注意：获取的数组中的元素是unicode编码的，在某些时候使用需要转编码

结果示例：

?传递的url

[14/Jul/201611: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里面的一个方法。

defGET(self):

#TheWSGIspecsays'QUERY_STRING'maybeabsent.

raw_query_string=get_bytes_from_wsgi(self.environ，'QUERY_STRING'，'')

returnhttp.QueryDict(raw_query_string，encoding=self._encoding)

最终返回的是一个http.QueryDict(raw_query_string，encoding=self._encoding)http的原始数据，而QueryDict继承于MultiValueDict，所以我们直接看MultiValueDict就好了。

?MultiValueDict

其实源码看起来并不难。

defget(self，key，default=None):

"""

Returnsthelastdatavalueforthepassedkey.Ifkeydoesn'texist

orvalueisanemptylist，thendefaultisreturned.

"""

try:

val=self[key]

exceptKeyError:

returndefault

ifval==[]:

returndefault

returnval

defgetlist(self，key，default=None):

"""

Returnsthelistofvaluesforthepassedkey.Ifkeydoesn'texist，

thenadefaultvalueisreturned.

"""

try:

returnsuper(MultiValueDict，self).__getitem__(key)

exceptKeyError:

ifdefaultisNone:

return[]

returndefault

def__getitem__(self，key):

"""

Returnsthelastdatavalueforthiskey，or[]ifit'sanemptylist;

raisesKeyErrorifnotfound.

"""

try:

list_=super(MultiValueDict，self).__getitem__(key)

exceptKeyError:

raiseMultiValueDictKeyError(repr(key))

try:

returnlist_[-1]

exceptIndexError:

return[]

设我们的django博客应用有如下的文章模型：

blog/models.pyclassPost(models.Model):

#标题

title=models.CharField(max_length=70)

#正文

body=models.TextField()

#其他属性

def__str__(self):

returnself.title

先看到第1步，用户在搜索框输入搜索关键词，因此我们要在博客上为用户提供一个搜索表单，html表单代码大概像这样：

formmethod="get"action="/search/"

{%csrf_token%}inputtype="search"placeholder="搜索"required

buttontype="submit"搜索/button/form

特别注意在form标签下有一个{%csrf_token%}，这是django用来防御跨站请求伪造（CSRF）攻击的机制。如果不知道什么是CSRF的话也没有关系，只要记住在使用django时，前端的表单代码里一定要加上{%csrf_token%}。

用户输入了搜索关键词并点击了搜索按钮后，数据就被发送给了django后台服务器。表单的action属性的值为/search/，表明用户提交的结果将被发送给/search/这个URL。我们为这个URL绑定一个django视图函数，在这个视图函数里完成前面第2步提到的过程。假设我们把视图函数的代码写在blog/views.py里：

blog/views.pydefsearch(request):

q=request.GET.get('q')

error_msg=''

ifnotq:

error_msg='请输入关键词'

returnrender(request,'blog/errors.html',{'error_msg':error_msg})

post_list=Post.objects.filter(title__icontains=q)

returnrender(request,'blog/results.html',{'error_msg':error_msg,

'post_list':post_list})

首先我们使用request.GET.get('q')获取到用户提交的搜索关键词。用户通过表单提交的数据django为我们保存在request.GET里，这是一个类似于Python字典的对象，所以我们使用get方法从字典里取出键q对应的值，即用户的搜索关键词。这里字典的键之所以叫q是因为我们的表单中搜索框input的name属性的值是q，如果修改了name属性的值，那么这个键的名称也要相应修改。

接下来我们做了一个小小的校验，如果用户没有输入搜索关键词而提交了表单，我们就无需执行查询，而是渲染一个错误页面提示用户请输入关键词。

如果用户输入了搜索关键词，我们就通过filter方法从数据库里过滤出符合条件的所有文章。这里的过滤条件是title__icontains=q，即title中包含（contains）关键字q，前缀i表示不区分大小写。这里icontains是查询表达式（Fieldlookups），其用法是在模型需要筛选的属性后面跟上两个下划线。django内置了很多查询表达式，建议过一遍django官方留个印象，了解每个表达式的作用，以后碰到相关的需求就可以快速定位到文档查询其用途：Fieldlookups

接下来就是渲染搜索结果页面，显示符合搜索条件的文章列表，下面是一个模板的简单示例：

results.html

{%iferror_msg%}p{{error_msg}}/p{%endif%}

{%forpostinpost_list%}div

在这里显示文章的相应信息/div{%empty%}divclass="no-post"

没有搜索到符合条件的文章/div{%endfor%}

有了视图函数后记得把视图函数映射到相应了URL，前面我们表单数据提交的URL为/search/，因此将视图函数search绑定到该URL上。

blog/urls.pyurlpatterns=[

#其他url配置

url(r'^search/$',views.search,name='search'),]

大功告成！

在以前，你选择Pythonweb架构会受制于可用的web服务器，反之亦然。如果架构和服务器可以协同工作，那你就走运了：

但你有可能面对(或者曾有过)下面的问题，当要把一个服务器和一个架构结合起来是发现他们不是被设计成协同工作的：

基本上你只能用可以一起运行的而非你想要使用的。

那么，你怎么可以不修改服务器和架构代码而确保可以在多个架构下运行web服务器呢?答案就是PythonWebServerGatewayInterface(或简称WSGI，读作“wizgy”)。

WSGI允许开发者将选择web框架和web服务器分开。现在你可以混合匹配web服务器和web框架，选择一个适合你需要的配对。比如,你可以在Gunicorn或者Nginx/uWSGI或者Waitress上运行Django,Flask,或Pyramid。真正的混合匹配，得益于WSGI同时支持服务器和架构：

WSGI是第一篇和这篇开头又重复问道问题的答案。你的web服务器必须具备WSGI接口，所有的现代PythonWeb框架都已具备WSGI接口，它让你不对代码作修改就能使服务器和特点的web框架协同工作。

现在你知道WSGI由web服务器支持，而web框架允许你选择适合自己的配对，但它同样对于服务器和框架开发者提供便利使他们可以专注于自己偏爱的领域和专长而不至于相互牵制。其他语言也有类似接口：java有ServletAPI，Ruby有Rack。

说这么多了，你肯定在喊，给我看代码!好吧，看看这个极简的WSGI服务器实现：

#TestedwithPython2.7.9,LinuxMacOSX

importsocket

importStringIO

importsys

classWSGIServer(object):

address_family=socket.AF_INET

socket_type=socket.SOCK_STREAM

request_queue_size=1

def__init__(self,server_address):

#Createalisteningsocket

self.listen_socket=listen_socket=socket.socket(

self.address_family,

self.socket_type

)

#Allowtoreusethesameaddress

listen_socket.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)

#Bind

listen_socket.bind(server_address)

#Activate

listen_socket.listen(self.request_queue_size)

#Getserverhostnameandport

host,port=self.listen_socket.getsockname()[:2]

self.server_name=socket.getfqdn(host)

self.server_port=port

#ReturnheaderssetbyWebframework/Webapplication

self.headers_set=[]

defset_app(self,application):

self.application=application

defserve_forever(self):

listen_socket=self.listen_socket

whileTrue:

#Newclientconnection

self.client_connection,client_address=listen_socket.accept()

#Handleonerequestandclosetheclientconnection.Then

#loopovertowaitforanotherclientconnection

self.handle_one_request()

defhandle_one_request(self):

self.request_data=request_data=self.client_connection.recv(1024)

#Printformattedrequestdataala'curl-v'

print(''.join(

'{line}\n'.format(line=line)

forlineinrequest_data.splitlines()

))

self.parse_request(request_data)

#Constructenvironmentdictionaryusingrequestdata

env=self.get_environ()

#It'stimetocallourapplicationcallableandget

#backaresultthatwillbecomeHTTPresponsebody

result=self.application(env,self.start_response)

#Constructaresponseandsenditbacktotheclient

self.finish_response(result)

defparse_request(self,text):

request_line=text.splitlines()[0]

request_line=request_line.rstrip('\r\n')

#Breakdowntherequestlineintocomponents

(self.request_method,#GET

self.path,#/hello

self.request_version#HTTP/1.1

)=request_line.split()

defget_environ(self):

env={}

#ThefollowingcodesnippetdoesnotfollowPEP8conventions

#butit'sformattedthewayitisfordemonstrationpurposes

#toemphasizetherequiredvariablesandtheirvalues

#

#RequiredWSGIvariables

env['wsgi.version']=(1,0)

env['wsgi.url_scheme']='http'

env['wsgi.input']=StringIO.StringIO(self.request_data)

env['wsgi.errors']=sys.stderr

env['wsgi.multithread']=False

env['wsgi.multiprocess']=False

env['wsgi.run_once']=False

#RequiredCGIvariables

env['REQUEST_METHOD']=self.request_method#GET

env['PATH_INFO']=self.path#/hello

env['SERVER_NAME']=self.server_name#localhost

env['SERVER_PORT']=str(self.server_port)#8888

returnenv

defstart_response(self,status,response_headers,exc_info=None):

#Addnecessaryserverheaders

server_headers=[

('Date','Tue,31Mar201512:54:48GMT'),

('Server','WSGIServer0.2'),

]

self.headers_set=[status,response_headers+server_headers]

#ToadheretoWSGIspecificationthestart_responsemustreturn

#a'write'callable.Wesimplicity'ssakewe'llignorethatdetail

#fornow.

#returnself.finish_response

deffinish_response(self,result):

try:

status,response_headers=self.headers_set

response='HTTP/1.1{status}\r\n'.format(status=status)

forheaderinresponse_headers:

response+='{0}:{1}\r\n'.format(*header)

response+='\r\n'

fordatainresult:

response+=data

#Printformattedresponsedataala'curl-v'

print(''.join(

'{line}\n'.format(line=line)

forlineinresponse.splitlines()

))

self.client_connection.sendall(response)

finally:

self.client_connection.close()

SERVER_ADDRESS=(HOST,PORT)='',8888

defmake_server(server_address,application):

server=WSGIServer(server_address)

server.set_app(application)

returnserver

if__name__=='__main__':

iflen(sys.argv)2:

sys.exit('ProvideaWSGIapplicationobje