How can vue be used in the view page of TP5 to accept and transfer data without separating the front and back ends?

  ios, question

In a case encountered in the project, the front and back ends were not separated during the background management. If the separation was done, the cost would be too high. The view layer used vuejs. How can I receive and transfer the data from the controller in vuejs? What is the format? Please provide as much style code as possible for controller and view layer, thank you very much! ! !

Method 1: Direct Assignment

Controller:

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

View

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

Method 2: Use ajax to Get Data

Full viewtest.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']
 bracket
 })
 .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);
 });
 bracket
 },
 mounted: function() {
 this.getData();
 bracket
 });
 </script>
 </html>

Complete controllerIndex.php:

<?  Php
 namespace app\index\controller;
 use think\Controller;
 use think\Request;
 
 class Index extends Controller
 bracket
 public function test()
 bracket
 return $this->fetch('test');
 bracket
 
 public function getData(Request $request)
 bracket
 $arr = [
 'name' =>$_GET['name'],
 'email'=>$_GET['email'],
 'array' => $_GET['array']
 ];
 return json($arr);
 bracket
 bracket

The file location should be adjusted by itself. The second method is recommended. When decoupling in the future, the changes will not be so big.