前后端不分离的情况下,TP5的视图页面中如何使用vue来接受和传递数据?

在项目中遇到的一个情况,在做后台管理的时候,前后端没有做分离,如果做分离,成本太大,视图层使用了vuejs,请问如何在vuejs中接收和传递控制器传过来的数据?格式是怎么样的?请尽可能地提供一份控制器和视图层的样式代码,非常感谢!!!

回答:

方法1: 直接赋值

控制器:

$this->assign([            
     'name' =>'tp',           
     'email'=>'tp@example.com',
     'array' => json_encode(array('a', 'b'))
]);  

视图

var app = new Vue({
  el: "#app",
  data: {
    name: '{$siteName}',
    email: '{$email}',
    array: {$array}
  }
})

方法2: 使用ajax获取数据

完整视图test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id='app'></div>
</body>
<script>
var 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: 'tp@example.com',
            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();
  }
});
</script>
</html>

完整控制器Index.php:

<?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);
    }
}

文件位置自己调整一下,推荐使用第二种方法,将来去耦合的时候,改动没有那么大

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注