Vue中的Ajax请求
现在比较流行的开发方式为异步调用,前后台以异步Ajax请求的方式进行交换数据,传输的数据使用的是JSON
- Ajax请求发送后,当浏览器接收到服务器的响应内容后不会重新加载整个页面,只会更新网页的部分实现局部刷新的效果
发送AJAX异步请求的常见方式包括
- 使用浏览器内置的JS对象
XMLHttpRequest - 使用浏览器内置的JS函数fetch如
fetch(‘url’, {method : ‘GET’}).then().then() - 第三方库方式: 对XMLHttpRequest进行封装,如jQuery提供的
$.get()/post()方法,基于Promise的HTTP库axios提供的axios.get().then()
axios
使用vue-cli安装axios库npm i axios,然后在组件中使用import导入axios import axios from 'axios'
使用vue.js提供的axios方法发起Ajax请求,方法的参数是一个配置对象
method: 指定请求的方式url: 指定请求的路径params和data: 指定请求的参数,参数是一个对象
params和data属性的区别
- 使用params属性时无论发送GET还是POST请求,请求参数都是以
name=value&..的格式拼接到请求地址后,获取请求参数时通过requset对象的API - 使用data属性时,只能发送POST请求,且参数是以
json格式存储到请求报文的请求体中,获取请求参数时需要相关的jar包将请求体中的json数据转成Java对象
使用axios({配置对象}).then(回调函数)方法发起Ajax请求
- 使用
params属性将请求参数以name=value&name=value的格式拼接到请求地址后
// 导入axios
import axios from 'axios'
testAjax:function (event) {
axios({
method:"post",
url:event.target.href,
params:{
username:"admin",
password:"123456"
}
}).then(function (response) {
//服务器处理Ajax请求成功后执行的回调函数
// 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中
alert(response.data);
});
使用axios.post(url,[data]).then(回调函数)方法和axios.get(url).then(回调函数)方法发起Ajax请求
- 使用
data属性将请求参数以json的格式存储到请求报文的请求体中
testAjax(){
axios.post(
"/SpringMVC/test/ajax",
{
username:"admin",password:"123456"}
).then(response=>{
console.log(response.data);
});
},
vue-resource插件
安装vue-resource插件npm i vue-resource,然后在main.js文件中导入插件并使用,此时项目中所有的vm和vc实例上都添加了$http属性
import Vue from 'vue'
import App from './App.vue'
// 导入插件vue-resource
import vueResource from 'vue-resource'
Vue.config.productionTip = false
// 使用插件,此时项目中所有的vm和vc实例上都添加了$http属性
Vue.use(vueResource)
new Vue({
el : '#app',
render : h => h(App)
})
使用vue-resource插件发送请求的用法和axios相同this.$http.get(‘’).then()
export default {
name : 'App',
data() {
return {
bugList : []
}
},
// 在mounted钩子中发送ajax请求将响应的数据保存到bugList数组当中
mounted() {
// 使用vue-resource插件来发送AJAX请求
this.$http.get('/api/vue/bugs').then(
response => {
console.log('响应数据：', response.data)
this.bugList = response.data
},
error => {
console.log('错误信息为：', error.message)
}
)
},
Ajax跨域问题
参考文章Ajax跨域问题及其解决方案
启用Vue脚手架内置服务器
Vue脚手架内置了一个服务器端口号是8080,默认是没有开启代理功能的
我们需要在vue.config.js文件中添加配置开启vue-cli的代理机制,修改完配置文件需要重启服务器, 此时Vue会在服务器内部生成一个小程序
// 简单配置不支持配置多个代理
devServer: {
// Vue脚手架内置的8080服务器负责代理访问8000服务器,到时候将资源直接拼接到端口后面
proxy: 'http://localhost:8000'
}
高级配置: 支持配置多个代理
devServer: {
proxy: {
// 只代理以'/api'开始的资源(请求路径)
'/api': {
target: 'http://localhost:8000',
// URL重写,将路径中的'/api'以''代替,然后再将重写后的请求路径拼接到目标服务器的端口号后面
pathRewrite: {
'^/api' : ''},
ws: true,
changeOrigin: true
},
// 只代理以'/abc'开始的资源(请求路径)
'/abc': {
target: 'http://localhost:8001',
pathRewrite: {
'^/abc' : ''},
// 默认值true,开启对websockt的支持(一种实时推送技术),
ws: true,
// 默认值true,改变起源让目标服务器不知道我们真正的起源在哪里,此时目标服务器获取到的是自己端口的起源
changeOrigin: true
}
// 代替以'/'开始的资源即所有资源
'/': {
}
}
}
发送AJAX请求的时候会优先从自己的服务器当中找/vue/bugs资源(资源可能是静态的或动态的Java程序),如果找不到才去代理服务器上找对应的资源
<script>
import axios from 'axios'
export default {
name : 'Bugs',
methods: {
getBugs(){
// http://localhost:8080/vue/bugs-->http://localhost:8000/vue/bugs
/* axios.get('/vue/bugs').then(
response => {
console.log('服务器响应回来的数据：', response.data)
},
error => {
console.log('错误信息：', error.message)
}
) */
// 当前按钮这个页面就是在8080服务器上，所以访问当前服务器上的资源时http://localhost:8080可以省略
// 先访问本地资源http://localhost:8080/api/vue/bugs---->重写URL删除'/api'(以空字符串代替)-->http://localhost:8000/vue/bugs
axios.get('/api/vue/bugs').then(
response => {
console.log('服务器响应回来的数据：', response.data)
},
error => {
console.log('错误信息：', error.message)
}
)
}
// http://localhost:8080/api/user/bugs-->重写URL删除'/abc'(以空字符串代替)-->http://localhost:8000/vue/users
getUsers(){
axios.get('/abc/vue/users').then(
response => {
console.log('服务器响应回来的数据：', response.data)
},
error => {
console.log('错误信息：', error.message)
}
)
},
},
}
</script>