在项目中遇到的一个情况,在做后台管理的时候,前后端没有做分离,如果做分离,成本太大,视图层使用了vuejs,请问如何在vuejs中接收和传递控制器传过来的数据?格式是怎么样的?请尽可能地提供一份控制器和视图层的样式代码,非常感谢!!!
回答
方法1: 直接赋值
控制器:
$this->assign([
'name' =>'tp',
'email'=>'[email protected]',
'array' => json_encode(array('a', 'b'))
]);
视图
var app = new Vue({
el: "#app",
data: {
name: '{$siteName}',
email: '{$email}',
array: {$array}
}
})
方法2: 使用ajax获取数据
完整视图test.html:
Documentvar app = new Vue({
el: "#app",
data: {
name: '',
email: '',
array: null
},
methods: {
getData: function() {
var vm = this;
axios.get('/index.php?s=index/index/getData',{
params:{
name: 'tp',
email: '[email protected]',
array: ['a', 'b']
}
})
.then(function (response) {
var data = response.data;
vm.name = data['name'];
vm.email = data['email'];
vm.array = data['array'];
})
.catch(function (error) {
console.log(error);
});
}
},
mounted: function() {
this.getData();
}
});
完整控制器Index.php:
namespace app\index\controller;
use think\Controller;
use think\Request;
class Index extends Controller
{
public function test()
{
return $this->fetch('test');
}
public function getData(Request $request)
{
$arr = [
'name' =>$_GET['name'],
'email'=>$_GET['email'],
'array' => $_GET['array']
];
return json($arr);
}
}
文件位置自己调整一下,推荐使用第二种方法,将来去耦合的时候,改动没有那么大