When the front and rear ends are not separated, how can vue be used in the view page of TP5 to accept and transmit data?

in a situation encountered in the project, when doing background management, the front and rear ends are not separated. If the separation is done, the cost is too high. How to receive and transfer the data sent by the controller in vuejs using vuejs, in the view layer? What"s the format? Please provide a copy of the controller and view layer style code as much as possible, thank you very much!

Thinkphp5 vue.js php

Feb.23,2022

method 1: assign values directly

Controller:

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

View

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

method 2: use ajax to get data

full view 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: "-sharpapp",
  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>

complete controller 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);
    }
}

adjust the location of the file by yourself. The second method is recommended. When it is decoupled in the future, the change will not be so big

Previous: Js setting cursor position problem

Next: I want to jump to a page and set up the information in header and pass it to the new page together. Is there such an operation? If so, how to achieve it?

ThinkPHP5 verification code cross-domain
background administrator login is the login information stored by Session. The interface is not used to separate the management system to provide interface data to the APP Mini Program and the PC side. One interface provides data to multiple clients . ...

Session thinkphp5 vue.js php

Mar.28,2021