Django怎么取消cors(2023年最新分享)

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就可以找到这个信息

同样里面介绍如何使用

安装

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

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

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

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

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

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

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

1.为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pipinstalldjango-cors-headers

2.vuex的工作流程？

①在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

②然后再通过actions的commit来出发mutations来修改数据。

③mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④最后由store触发每一个调用它的组件更新。

3.vuex是什么？怎么使用？

vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,moles详细使用写法请见：

4.vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为

6.深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7.vue的生命周期？

beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedactiveddeactived（keep-alive）组件是否激活调用

8.keep-alive:组件缓存

router.js中:

meta:{keepAlive:true}//需要被缓存

钩子执行顺序：created-mounted-actived

include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更改，则组件不会被缓存。

应用场景：用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页，我们希望列表页可以保留用户的筛选状态。

9.vue传值方式？

props$emit()$on()$parent$children$listener$attr

10.$on兄弟组件传值

$emit分发

$on监听

$off取消监听

$once一次性监听一个事件

在js文件中定义一个*事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录”-①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值

$attrsa-b-c

$listeners监听

12.vue事件修饰符有哪些？

.stop.prevent.self.once.passive.sync

13.箭头函数中的this？

不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数？

如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16.v-if和v-show区别？

v-if是对标签的创建与销毁，v-show则仅在初始化时加载一次，v-if开销相对来说比v-show大；

v-if是惰性的；v-show做的仅是简单的css切换。

17.v-text与v-html区别？

v-text用于普通文本，不能解析html；

v-html反之。

18.v-forkey的作用？

使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？

npm下载loader（sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展）Vscode中可在扩展中下载;

特性：可以用变量，可以用混合器，可以嵌套等。

20.vue获取dom？

ref

21.vue初始化页面闪动问题？

webpack、vue-router

v-cloakcss:[v-cloak]:display:none

22.什么是vue-router？

vuerouter是官方路由管理器。

主要功能：路由嵌套，模块化基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23.vue路由传参，接收？

传：this.$router.push({path:'',query(params):{}})

接：this.$router.query.xxx

24.防抖和节流？

节流是一定时间内执行一次函数，多用在scroll事件上；

防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25.如何让scss只在当前组件中起作用？

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