1. 安装依赖
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。所以我们先来追加依赖包axios,以及ps这两个包。另外,作为login登录,调用cookie,追加js-cookie依赖包
npm i -D axios ps js-cookie
2.建立模拟API数据
这里我们先做最简单的API数据模拟,在public目录下创建user.json文件,代码如下:
{
“username“:"admin",
“password“:"222222"
}
我们启动npm服务,在地址栏里输入http://localhost/user.json,如下图所示,模拟API接口就算是完成了。
3.使用axios调用接口数据
第一步:我们首先需要在main.js中加载axios模块
// step1:引入 axios
import Axios from 'axios'
// step2:把axios挂载到vue的原型中,在vue中每个组件都可以使用axios发送请求,
// 不需要每次都 import一下 axios了,直接使用 $axios 即可
Vue.prototype.$axios = Axios
// step3:使每次请求都会带一个 /api 前缀,本地访问的时候注释掉,跨域的时候再开启
// Axios.defaults.baseURL = '/api'
第二步:我们在login.vue中调用axios,我们在handleLogin函数中,增加一段axios请求的代码,如下:
handleLogin: function() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$axios.get('/user.html')
.then(response => {
if (response.data) {
console.log(response.data)
alert(response.data);
}
}).catch(err => {
alert('请求失败')
})
// this.$router.push({ path: this.redirect || '/' })
} else {
console.log('error submit!!')
return false
}
})
},
我们验证一下,在chorme浏览器中可以看到,已经成功取到了user.json的数据
4.axios进行跨域访问配置
第一步:创建vue.config.js文件,vue.config.js文件是和package.json同目录的文件,在vue.config.js中,追加代理服务器配置。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost', // 你请求的第三方接口,注意结尾不要带 '/'
changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
// ws: true,
pathRewrite: { // 路径重写,
'^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求 http://localhost/api 这个地址的时候直接写成 /api 即可。
}
}
}
}
}
第二步:创建跨域的接口,你可以在本地安装一个apache或nginx服务,或者干脆用npm指令另外在启动一个服务,只要确保是不同的域名或者端口,都会被认为是跨域访问。在另外的地址中,user.html中的数据,我们可以略作更改,以区分取到的数据是跨域访问的数据。我这里在本地启动了apache服务器,调用的是80端口,接口访问的路径是http://localhost/api/user.html,这里apache相关的安装,部署就做说明,这不是我们的重点,如果不懂,请自查资料。
注意:这里api的路径中,有api这个二级目录存在,所以在main.js文件中,开启Axios.defaults.baseURL=‘/api’的设定
第三步:重启npm服务,访问login地址,http://localhost:8080/#/login ,来确认是否已经切换到新的接口数据。
可以看到数据中password的值都换为111111了,说明已经调用的是跨域数据了,这里需要注意的是,有时候没有跳转过去,也可能是缓存问题,npm服务一定要重启!!!!
注意:
虽然,已经成功进行了跨域访问,但是在调试过程中,曾经想要通过注释vue.config.js中的配置,来进行自主切换跨域和非跨域之前的访问,但是总是出现问题,初步估计是npm后台服务中有缓存,会默认从缓存数据中,曾经已经把apache服务器停止,都还能继续获取到跨域数据,另外,哪怕跨域访问都配置正确了,但是本地访问也可以的情况下,始终不去进行跨域访问,只有当我更改了本地访问的文件名,导致本地访问失败了,才正确显示跨域访问的路径,所以建议本地访问和跨域访问在路径中要有所区别,以便可以正确显示跨域访问数据。
4.获取数据处理
从后台获取了数据之后,我们这里做一个数据处理尝试,为了方便直观,我们把数据反过来再赋值给input框,整个login表单绑定的是loginForm这个Json对象,为了更方便处理,我们改造一下接口数据,让数据输出也直接为Json对象,这里我用php代码来实现。上面的接口路径改为:http://localhost/api/user.php
<?php
// user.php
header('content-type:application/json');
echo json_encode([
'username'=>'editor',
'password' => '123456'
]);
?>
接下来改造login.vue的script脚本
methods: {
handleLogin: function() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.$axios.get('/user.php') // 从user.html改为user.php
.then(response => {
if (response.data) {
// 确认绑定的数据源是否和输入框内的数据一致
console.log('输入框内值:'+ JSON.stringify(this.loginForm))
// 给绑定的数据源从新赋值
this.loginForm = response.data
// 查看赋值是否成功
console.log('后台数据赋值后:'+JSON.stringify(this.loginForm))
// 确认返回的接口数据内容
console.log(response.data)
}
}).catch(err => {
alert('请求失败')
console.log(err)
})
// this.$router.push({ path: this.redirect || '/' })
} else {
console.log('error submit!!')
return false
}
})
},
},
开始启动serve,验证改造效果,从chrome的调试模式中,可以看到控制台的输出记录变更,以及页面上输入框的数据变化。可以确认数据更新成功。
注意:刚开始的时候,我打算使用this.loginForm = JSON.parse(response.data)的方式,将返回的字符串转为json对象,再赋值给绑定的数据源,但是,总是提示错误Unexpected token u in JSON at position 4,表示json数据格式错误。最终干脆用php直接输出json格式来解决。