Vue，Django前后端分离，开发Openstack（五）Django，Vue前后端交互方法

总之，使用Ajax技术可以实现无页面传递数据给后台，并且在InliJ IDEA中可以使用各种框架（如Spring MVC、Struts2等）进行后台接收和处理。需要注意数据传输格式、安全性等问题。

@csrf_exempt 这个必须要有，否则跨域不了

django 跨域 django跨域解决方案django 跨域 django跨域解决方案


django 跨域 django跨域解决方案


(1) 请求方法是以下三种方法之一：

编辑horizon/s.py加入

下一节内容：django调用openstack api（keystone）

ajax跨域问题(python版本)

在InliJ IDEA中，无页面传递数据给后台一般是指使用Ajax技术将数据传递给后台。以下是几个场景和相关的技术：

跨域问题来源于JaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。即JaScript只能访问和作自己域下的资源，不能访问和作其他域下的资源。

因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.

注意：localhost和127.0.0.1也属于跨域。

修改Django中的views.py文件修改views.py中对应API的实现函数，给返回值加上响应头Access-Control-Allow-Origin，允许其他域通过Ajax请求数据：

满足以下两个条件的请求。

(2) HTTP的头信息不超出以下几种字段：

非简单请求就是复杂请求。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

预检请求为OPTIONS请求，用于向请求权限信息的。

预检请求被成功响应后，才会发出真实请求，携带真实数据。

JSONP是JSON with Padding的略称。它是一个非的协议，它允许在端集成Script tags返回至客户端，通过jascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

JSONP的实现步骤大致如下(参考了来源中的文章)

这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)。

前面讲了JSONP的实现原理，现在我们可以自己写JS来实现JSONP功能。

一般情况下，我们希望这个script标签能够动态的调用，而不是像固定在html里面所以没等页面显示就执行了，很不灵活。

我们可以通过页面的触发作后，通过jascript动态的创建script标签，这样我们就可以灵活调用远程服务。实例如下：

为了更加灵活，上述我们将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。

如上，jQuery框架也当然支持JSONP，可以使用 $.getJSON(,[data],[callback]) 方法。

与js实现的方式相比，我们并不要自己生成一个script标签，客户端也并不需要自己定义一个回调函数.

上述这种方法，很方便，不需要我们自己定义回调函数和指定回调函数名，但是，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？

我们可以使用$.ajax方法来实现。如下例：

在上小节中jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名，server端接受callback键对应值后就可以在其中填充数据打包返回。

但是，jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。

如此，我们的跨域处理即完成，支持所有的请求。

django和vue初次接触

如果Origin指定的源不在许可范围内, 会返回一个不带有Access-Control-Allow-Origin字段的响应 . 浏览器解析时发现缺少了这个字段, 就会报错.

熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上

不同框架进行开发时,的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题

这样的话,我们就可以更方便的通过vue的启动方式来进行调试了

怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.

inlij+idea总结当前无页面传递数据给后台有哪些场景,所需要的技术有哪些？

在使用Ajax技术传递数据时，需要注意以下技术：

表单提交数据给后台：在前端页面中使用Ajax技术将表单数据提交给后台，后台使用Spring MVC等框架接收数据。需要使用jQuery等JS库实现Ajax请求发送。

JSONP使用注意

列表查询数据：在前端页面中使用Ajax技术将查询条件传递给后台，后台使用Spring MVC等框架接收参数并查询数据库返回数据。需要使用jQuery等JS库实现Ajax请求发送。

异步作数据：在前端页面中使用Ajax技术将作请求传递给后台，后台进行异步作处理（如导出Excel等）。需要使用jQuery等JS库实现Ajax请求发送。

Ajax请求发送：需要使用JS库（如jQuery）发送Ajax请求，将数据传递给后台。

后台接收数据：后台需要使用相应的框架（如Spring MVC）接收Ajax请求传递的数据。

数据格式：需要明确数据的格式，如JSON、XML等，并在前端和后台进行相应的格式转换。

安全性：由于Ajax请求是异步的，需要对数据传输过程中的安全性进行考虑，如防止跨站请求伪造（CSRF）等。