Vue之三与后端交互

零:与后端交互 – ajax

 

 

 

 

这里可以看出:前端向后端成功发送了请求,后端也成功响应了,但是前端却报错了

这是因为:跨域问题的存在,浏览器检测到前端和后端不是来自同一个,所以认为这是不安全的,所以就拦截了该资源的传递

想要解决这个问题,就要实现:CORS,也就是 跨域资源共享

 

 

 

 

 

 

 

 

一:fetch

 

 

提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应

 

 

 

 

二:Axios

 

 

 

 

 

{ "data":{ "films":[ { "actors":[ { "avatarAddress":"https://pic.maizuo.com/usr/movie/45deca0f886633f1a8902f7eece4248a.jpg", "name":"林超贤", "role":"导演" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/ff8f5bfd455e660298452c0546bb23d5.jpg", "name":"辛芷蕾", "role":"方宇凌" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/f27b94579d10d3131b476ec6c63a2722.jpg", "name":"蓝盈莹", "role":"演员" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/0a30de65731f3ddc5ce5d5915c8d9d49.jpg", "name":"彭于晏", "role":"高谦" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/728944e292dc6e8161acd7d5344d361c.jpg", "name":"王彦霖", "role":"赵呈" } ], "category":"剧情|灾难", "director":"林超贤", "filmId":4836, "filmType":{ "name":"2D", "value":1 }, "grade":"7.8", "isPresale":true, "isSale":false, "item":{ "name":"2D", "type":1 }, "language":"汉语普通话", "name":"紧急救援", "nation":"中国大陆", "poster":"https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg", "premiereAt":1579910400, "runtime":100, "synopsis":"《紧急救援》是由林超贤导演,彭于晏、王彦霖、辛芷蕾、蓝盈莹出演的中国首部海上救援打捞题材的作品。筹备过程中,导演林超贤带领团队实地勘察选址,力求打造更劲爆,更震撼的场景设置,本次与奥斯卡最佳摄影鲍德熹,《泰坦尼克号》美术指导Martin Laing等国际顶级制作团队的强强联合,预示着电影将成为首部打开国际市场的华语救援题材作品,也势必会成为又一部华语电影的标杆之作。", "timeType":3, "videoId":"XNDIyODM2NjE4OA==" }, { "actors":[ { "avatarAddress":"https://pic.maizuo.com/usr/movie/c8722df42d08942db01c2a262f576950.jpg", "name":"易小星", "role":"导演" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/9627d1ebac2b4b12a06fd1623a62af99.jpg", "name":"彭昱畅", "role":"肖翔" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/4b6da2deabe5dc7883321bb17372c25b.jpg", "name":"乔杉", "role":"周东海" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/7efe813dd79280f236b8d1286cdc313c.jpg", "name":"卜冠今", "role":"周希希" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/f244a95cdcd64625a50069bd64db49c2.jpg", "name":"苇青", "role":"王素芬" } ], "category":"喜剧|动作", "director":"易小星", "filmId":5266, "filmType":{ "name":"2D", "value":1 }, "grade":"7.2", "isPresale":true, "isSale":false, "item":{ "name":"2D", "type":1 }, "language":"", "name":"沐浴之王", "nation":"中国大陆", "poster":"https://pic.maizuo.com/usr/movie/e6aabffd040bda24f483bcc95ed79e62.jpg", "premiereAt":1607644800, "runtime":102, "synopsis":"在一次搓澡服务中,富二代肖翔(彭昱畅 饰)和搓澡工周东海(乔杉 饰)发生矛盾,让周东海面临生活困境。肖翔因跳伞事故被送到医院记忆全失,周东海恰巧撞见,心生一计,骗肖翔是自己的弟弟并骗回周家澡堂当搓澡工,于是一个富二代开始了一段终身难忘的搓澡生涯……", "timeType":3, "videoId":"" }, { "actors":[ { "avatarAddress":"https://pic.maizuo.com/usr/movie/168e82b3c4ec676ca577cb99e5a9ee06.jpg", "name":"派蒂·杰金斯", "role":"导演" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/c4cfadaaab8f81ebaf3bdc7aa30fac49.jpg", "name":"盖尔·加朵", "role":"戴安娜·普林斯 / 神奇女侠 Diana Prince / Wonder Woman" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/6e0a82c6efac00bfb6b7c1b4bb46eaa9.jpg", "name":"克里斯·派恩", "role":"史蒂夫·特雷弗 Steve Trevor" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/79a97235ee2f33741b63eafc2f34658e.jpg", "name":"克里斯汀·韦格", "role":"芭芭拉·密涅瓦 Cheetah" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/13c53574fc0c4b13b99e966af5af7e9d.jpg", "name":"佩德罗·帕斯卡", "role":"马克斯维尔·劳德 Max Lord" } ], "category":"动作|奇幻|冒险", "director":"派蒂·杰金斯", "filmId":5287, "filmType":{ "name":"3D", "value":2 }, "isPresale":true, "isSale":false, "item":{ "name":"3D", "type":2 }, "language":"", "name":"神奇女侠1984", "nation":"美国", "poster":"https://pic.maizuo.com/usr/movie/4f84f5a48560f5b14b0fac7768da4e05.jpg", "premiereAt":1608249600, "runtime":151, "synopsis":"神奇女侠的全新大银幕冒险来到了1980年代。神奇女侠戴安娜在华盛顿的自然历史博物馆过着与普通人无异的生活,然而在阻止了一场看似平常的劫案后,身边的一切都发生了变化。在强大的神力诱惑下,两位全新劲敌悄然出现——与神奇女侠“相爱相杀”的顶级掠食者豹女,以及掌控着能改变世界力量的麦克斯·洛德,一场惊天大战在所难免。另外一边,旧爱史蒂夫突然“死而复生”,与戴安娜再续前缘,然而浪漫感动之余,史蒂夫的回归也疑窦丛生。", "timeType":3, "videoId":"" }, { "actors":[ { "avatarAddress":"https://pic.maizuo.com/usr/movie/6735332cb677645542c2f136eb37e561.jpg", "name":"邱礼涛", "role":"导演" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/ca47cd961fe0be0c91149f6bcca2f13d.jpg", "name":"刘德华", "role":"潘乘风" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/82a5d97e318c447133cd6c8262cee846.jpg", "name":"刘青云", "role":"董卓文" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/e776871fe75f0367aa60957457a6f96c.jpg", "name":"倪妮", "role":"庞玲" }, { "avatarAddress":"https://pic.maizuo.com/usr/movie/dd120eb1f6bda9f3b9c9e4c49785d0ce.jpg", "name":"谢君豪", "role":"演员" } ], "category":"动作|犯罪", "director":"邱礼涛", "filmId":5257, "filmType":{ "name":"2D", "value":1 }, "isPresale":true, "isSale":false, "item":{ "name":"2D", "type":1 }, "language":"", "name":"拆弹专家2", "nation":"中国大陆,中国香港", "poster":"https://pic.maizuo.com/usr/movie/4a2bec5290b94f7eb597913727b21df6.jpg", "premiereAt":1608768000, "runtime":0, "synopsis":"香港某处发生爆炸案,前拆弹专家潘乘风(刘德华 饰)因昏迷于现场,被警方怀疑牵涉其中。苏醒后的潘乘风只能一边逃亡一边查明真相,然而,他的好友董卓文(刘青云 饰)和他的前女友庞玲(倪妮 饰)却给他讲述了两段截然不同的经历。有计划的爆炸案接二连三发生,真相却越来越扑朔迷离……", "timeType":3, "videoId":"" } ], "total":47 }, "msg":"ok", "status":0 }

 

 

 

 

三:计算属性

计算属性是基于它们的依赖进行缓存的

计算属性只有在它的相关依赖发生改变时才会重新求值

计算属性就像Python中的property,可以把方法/函数伪装成属性

 

 

 

 

 

四:虚拟DOM 与diff算法 key的作用

 

其实呢不只是vue,react中在执行列表渲染时也会要求给每个组件添加key这个属性

key简单点来说就是唯一标识,就像ID一样唯一性

要知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素只操作数据便可以重新渲染页面

而隐藏在背后的原理便是其高效的Diff算法

  • 分层级比较:只做同层级的对比
  • 通过key值比较:出现新的key就插入同组(循环中,尽量加key,让key值唯一)
  • 通过组件/标签进行比较:然后进行替换

 

 

虚拟DOM数据渲染图示

 

 

 

 

 

 

 

 

五、组件的概念与基本应用

组件是什么:

扩展的HTML元素,封装可重用的代码,目的是复用

-例如:有一个轮播图,可以在很多页面使用,一个轮播图有js,css,html

-组件把js,css,html放到一起,有逻辑,有样式,有html

2、组件分类

-全局组件

-局部组件

3、工程化以后

一个组件就是一个 xx.vue

4、element  ui 其实就是写了很多组件,以后直接拿过来用就可以了

 

5.1定义组件并使用

 

原文链接:https://www.cnblogs.com/ltyc/p/14145554.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/4208

(0)
上一篇 2022年7月30日
下一篇 2022年7月30日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml