vue中的请求（前后台交互）
1：请求依赖
在vue中请求依赖于vue-resource.js
2：vue的get请求实例
<html>
<head>
<title>title>
<script src="vue.js">script>
<script src="vue-resource.js">script>
head>
<body>
<div id="app">
div>
<script>
var app = new VUE({
el:'#app',
data:{
list:[
{id:1,name="123"},
{id:2,name="123"}
]
},
methods:{
add(){
this.$http.get('请求地址',参数).then(function (result){
console.log(result);
});
}
}
});
script>
body>
html>
3：vue的post请求实例
<html>
<head>
<title>title>
<script src="vue.js">script>
head>
<body>
<div id="app">
div>
<script>
var app = new VUE({
el:'#app',
data:{
list:[
{id:1,name="123"},
{id:2,name="123"}
]
},
methods:{
add(){
//手动发起的post请求，默认没有表单格式，
//所以设置 emulateJSON:true 为表单格式
this.$http.post('请求地址',参数,{emulateJSON:true} ).then(
function (result){
console.log(result.boby);
});
}
}
});
script>
body>
html>
4：初始化请求数据
<html>
<head>
<title>title>
<script src="vue.js">script>
head>
<body>
<div id="app">
div>
<script>
var app = new VUE({
el:'#app',
data:{
list:[
{id:1,name="123"},
{id:2,name="123"}
]
},
created(){//在页面加载的时候的初始化方法
this.query();
},
methods:{
query(){
//手动发起的post请求，默认没有表单格式，
//所以设置 emulateJSON:true 为表单格式
this.$http.post('请求地址',参数,{emulateJSON:true} ).then(
function (result){
console.log(result.boby);
});
}
}
});
script>
body>
html>
5：vue中上传文件
<html>
<head>
<title>title>
<script src="vue.js">script>
<script src="vue-resource.js">script>
head>
<body>
<div id="app">
div>
<script>
var app = new VUE({
el:'#app',
data:{
},
methods:{
query(){
var upload = new FormData();
upload.append("upfile",文件对象);
upload.append("name",文件名称);
this.$http.post('路径'，upload).then(function(result){
console.log(result);
});
}
}
});
script>
body>
html>
6：以对象的形式传递参数
<html>
<head>
<title>title>
<script src="vue.js">script>
<script src="vue-resource.js">script>
head>
<body>
<div id="app">
div>
<script>
var app = new VUE({
el:'#app',
data:{
order:{
oid:'',
oname:''
},
orderService:{
osid:'',
osname:''
}
},
methods:{
query(){
var _this = this;
var json = { //将对个对象封装成一个对象
this.order,
this.orderService
}
//将对象数据转换为JSON串
var data = JSON.stringify(json);
this.$http.post(
"地址",
//发送JSON串数据
{"data":data},
//所以设置 emulateJSON:true 为表单格式
{emulateJSON:true}
).then(result=>{
//返回值操作
});
}
}
});
script>
body>
html>