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!
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
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 . ...