Vue.js是一个渐进式 MVVM 框架,目前被广泛使用,也成为前端中最火爆的框架
Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能
动力节点老杜的Vue2+3全家桶教程已经上线咯!
学习地址:https://www.bilibili.com/video/BV17h41137i4/
视频将从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。
每一个Vue的知识点讲解的非常通透,不但举例告诉你怎么用,还会告诉你底层实现原理。
4 Vue与AJAX
4.1 回顾发送AJAX异步请求的方式
发送AJAX异步请求的常见方式包括:
- 原生方式,使用浏览器内置的JS对象XMLHttpRequest
- const xhr = new XMLHttpRequest()
- xhr.onreadystatechange = function(){}
- xhr.open()
- xhr.send()
- 原生方式,使用浏览器内置的JS函数fetch
- fetch(‘url’, {method : ‘GET’}).then().then()
- 第三方库方式,JS库jQuery(对XMLHttpRequest进行的封装)
- $.get()
- $.post()
- 第三方库方式,基于Promise的HTTP库:axios (对XMLHttpRequest进行的封装)
- axios.get().then()
axios是Vue官方推荐使用的。
4.2 回顾AJAX跨域
- 什么是跨域访问?
- 在a页面中想获取b页面中的资源,如果a页面和b页面所处的协议、域名、端口不同(只要有一个不同),所进行的访问行动都是跨域的。
- 哪些跨域行为是允许的?
- 直接在浏览器地址栏上输入地址进行访问
- 超链接
同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略的。
4.3 演示跨域问题
Vue脚手架内置服务器的地址:http://localhost:8080
我们可以额外再开启一个其它的服务器,这个服务器随意,例如:node server、Apache服务器、JBOSS服务器、WebLogic服务器、WebSphere服务器、jetty服务器、tomcat服务器…我这里选择的是基于Java语言的一个服务器Tomcat,这个web服务器开启了一个8000端口,提供了以下的一个服务,可以帮助我们获取到一个Bug列表:
http://localhost:8000/bugs/
打开BugList案例的代码,在mounted钩子函数中发送ajax请求,获取bug列表。
vue-cli安装axios库:npm i axios。使用时:import导入axios