坐在电脑面前思考了四个小时,找了很多方法,最后还是自己琢磨找出来的问题。
小白就是笨笨的多健忘~
还是记录一下这些问题,因为映象深刻,是很长一段时间里不会忘记的。
vue和php交互和响应
我用的是axios,因为是基于 Promise 的 HTTP 库。传值用的是json数据。
在html里面写个vue实例:
<div id="app">
<P style="font-size: 25px;width: 350px;" >{{ things[0].name }}</p>
<button @click="search" class="sbtn">查询</button>
</div>
<script type="text/javascript">
var msg='1',code='2'; //因为老有bug,就设值。
var vm=new Vue({
el:'#app',
data:{
things:[{
name:'11',
type:'n'
}]
},
methods:{
search:function(){
axios.post('./index.php',{ //用post和get目前是差不多的
params:{
"code":"1", //传值给php
}
})
.then(function(res){ //从php返回的json对象=res
var result=res.data; //json数据
msg=result.msg;
code=result.code;
Vue.set(vm.things,0,{name:msg,type:code}); //更新响应
})
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
})
</script>
index.php:
<?php
session_start();
$code = isset($_POST['code'])? trim($_POST['code']):"";//接收前端传来的数据
$raw_success = array('code' => 1, 'msg' => '苹果'); //自定义数组
$res_success = json_encode($raw_success);//把数组编码成json
header('Content-Type:application/json');//这个类型声明非常关键,告诉前台我是json格式了
echo "$res_success";//传参
?>
小白撞墙点:
1.cdn别忘记了!
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
2.有人说:header("Access-Control-Allow-Origin: *");
这个必写,否则报错。
然后我写了一直报错:内部服务器错误,不明白删了就没事了。以后遇到跨域问题还会回头看的。
跨域看这里:https://blog.csdn.net/csdn_yudong/article/details/79668655
这里谢谢大佬!第一个方法很好用!!!!
3.Vue.set(vm.things,0,{name:msg,type:code});
要用vm不是this,不然报错。
4.things
可以写成是对象也可以是数组。数组要序号0,对象写key。
有大神说:data里的对象用set是不能直接修改更新的,而data的对象的对象是可以的。
5.习惯把php放在<html></htnml>
里了,然后报错,undefined
。
alert
检查一看,返回的还包含了<html>
标签里的html代码,所以弹bug的notice
和undefined
。同样输出echo
掺杂非json数据,也会报错。
PS:刚刚开始学习实践vue.js,如有不足,多多包涵。