问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
jekkys
    5628

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

    phpvue.jsthinkphp5
    阅读 4.7k
    1 个回答
    得票最新
    头像
    程淇铭
      4.2k1318
      ✓ 已被采纳

      方法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);
    }
}

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题