vue-resource发送请求
安装
npm i vue-resource -S
这等价于：
npm install vue-resource --save
数据来源
见JSONPlaceholder。这个网站上有很多JSON数据可以请求，比如请求这上面主页上推荐的users数据。这些数据可以用来测试（当后端还没写好的时候用这个测试很方便）。
Home.vue
<template>
<div id="home">
<app-header></app-header>
<users v-bind:users="users"></users>
<app-footer></app-footer>
</div>
</template>
<script>
import Users from './Users'
import Header from './Header'
import Footer from './Footer'
export default {
name: 'Home',
components: {
"users": Users,
"app-header": Header,
"app-footer": Footer
},
data() {
return {
users: []//这里设置为空,从请求中获取
}
},
methods: {},
//在页面加载之前就获取到users数据,这里在这个钩子函数里实现
created() {
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then(//请求成功时,数据传给data
(data) => {//回调函数
// console.log(data);
this.users = data.body;
}
);
}
}
</script>
<style scoped>
h2 {
color: purple;
}
</style>
在Users.vue中稍作修改，让它直接展示得到的user的email。
运行结果
proxyTable实现跨域(fetch/axios)
简述
这几天做的CET6Cat项目中，使用的是后端设置CROS的方式来实现跨域，具体的是在Django中的设置文件中添加MIDDLEWARE：
'corsheaders.middleware.CorsMiddleware'
一般是添加到SessionMiddleware和CommonMiddleware的中间。然后在下面开启一下CROS：
CORS_ORIGIN_ALLOW_ALL = True
这是一种方式，但会允许所有的跨域请求，现在学习一下如何在Vue中通过设置proxyTable实现跨域，所以先将上面那句注释掉。
配置proxyTable
因为我项目的Django后端的端口是8000，这里在Vue的config/index.js中找到proxyTable的位置，做如下配置：
proxyTable: {
//匹配到/api时使用代理
'/api': {
//接口域名
target: 'http://localhost:8000',
//是否跨域
changeOrigin: true,
//因为后端接口中实际上没有/api,这里将其转为空串,即去掉
pathRewrite: {
'^/api': ''
}
}
},
这里的意思是，当在请求URL中匹配到/api时，使用target所指示的域名，并允许了跨域请求，此时URL也就相当于http://localhost:8000/api/xxxx，但是，如果后端实际上没有/api这个接口，这里的/api也就仅仅起到了一个指示何时使用代理的作用，这时就需要pathRewrite将这部分转换成空，URL也就变成了http://localhost:8000/xxxx，可以正常请求后端的xxxx资源。
Fetch
以下都在App.vue根组件的created()钩子里实现。
fetch("/api/um/get_users", {
method: "post",
}).then(result => {
//对result(也就是Response)中的body:ReadableStream进行JSON解析
return result.json()
}).then(data => {
//输出解析后的数据看一下
console.log(data)
});
要传递信息时，用视频里的JSON.stringify转成字符串的话在后端根本获取不到，用那种方式似乎要自己解析传过去的字符串。
这里用FormData，感觉有点不方便，可能使用时候结合Vue的data里存的数据会好一些。
let user = new FormData();
user.append("user_name", "Flora");
user.append("password", "123123");
fetch("/api/um/add_user", {
method: "post",
//添加请求体,将要传递的user信息放进去
body: user
}).then(result => {
return result.json()
}).then(data => {
console.log(data)
});
Axios
安装，似乎不用写进dependencies，这里为了以防万一还是加个-S吧。
npm i axios -S
在main.js中配置一下Axios：
不知道为什么这里WebStorm没法识别
$axios为高亮。
import Axios from 'axios'
Vue.prototype.$axios = Axios;
在App.vue根组件的created()钩子里实现一下：
let user = new FormData();
user.append("user_name", "Flora");
user.append("password", "123123");
this.$axios.post("/api/um/add_user", user
).then(res => {
console.log(res.data)
});
课程视频里还讲了token有关的内容，但他使用的thenewstep已经崩溃了，而且现在还不懂token，这个以后再说。
参考
[1]vue2.0 proxyTable配置，解决跨域
[2]Ajax, Axios, Fetch区别
[3]Fetch发送POST请求的坑与解决方案