导读：很多朋友问到关于django如何运行前端代码的相关问题，本文首席CTO笔记就来为大家做个详细解答，供大家参考，希望对大家有所帮助！一起来看看吧！
[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 实现前端页面检索功能的代码
设我们的 django 博客应用有如下的文章模型：
blog/models.pyclass Post(models.Model):
# 标题
title = models.CharField(max_length=70)
# 正文
body = models.TextField()
# 其他属性
def __str__(self):
return self.title
先看到第 1 步，用户在搜索框输入搜索关键词，因此我们要在博客上为用户提供一个搜索表单，html 表单代码大概像这样：
form method="get" action="/search/"
{% csrf_token %} input type="search" placeholder="搜索" required
button type="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.pydef search(request):
q = request.GET.get('q')
error_msg = ''
if not q:
error_msg = '请输入关键词'
return render(request, 'blog/errors.html', {'error_msg': error_msg})
post_list = Post.objects.filter(title__icontains=q)
return render(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 是查询表达式（Field lookups），其用法是在模型需要筛选的属性后面跟上两个下划线。django 内置了很多查询表达式，建议过一遍 django 官方留个印象，了解每个表达式的作用，以后碰到相关的需求就可以快速定位到文档查询其用途：Field lookups
接下来就是渲染搜索结果页面，显示符合搜索条件的文章列表，下面是一个模板的简单示例：
results.html
{% if error_msg %} p{{ error_msg }}/p{% endif %}
{% for post in post_list %} div
在这里显示文章的相应信息 /div{% empty %} div class="no-post"
没有搜索到符合条件的文章 /div{% endfor %}
有了视图函数后记得把视图函数映射到相应了 URL，前面我们表单数据提交的 URL 为 /search/，因此将视图函数 search 绑定到该 URL 上。
blog/urls.pyurlpatterns = [
# 其他 url 配置
url(r'^search/$', views.search, name='search'),]
大功告成！
要调试一个用java写的后端，django写的前端的web应用应该怎么调试
在以前，你选择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('ProvideaWSGIapplicationobjectasmodule:callable')
app_path=sys.argv[1]
module,application=app_path.split(':')
module=__import__(module)
application=getattr(module,application)
httpd=make_server(SERVER_ADDRESS,application)
print('WSGIServer:ServingHTTPonport{port}...\n'.format(port=PORT))
httpd.serve_forever()
这比第一篇的代码长的多，但也足够短(只有150行)来让你理解而避免在细节里越陷越深。上面的服务器可以做更多——可以运行你钟爱web框架所写基本的web应用，Pyramid,Flask,Django,或其他PythonWSGI框架.
不相信我?你自己试试看。保存上面的代码为webserver2.py或者直接在Github下载。如果你不传入任何参数它会提醒然后推出。
$pythonwebserver2.py
ProvideaWSGIapplicationobjectasmodule:callable
结语：以上就是首席CTO笔记为大家整理的关于django如何运行前端代码的全部内容了，感谢您花时间阅读本站内容，希望对您有所帮助，更多关于django如何运行前端代码的相关内容别忘了在本站进行查找喔。