1、前端发送get请求到 php服务器端 ./index.php?a=lists
let app = new Vue({
el:"#todoapp",
data:{
title:"Todo-MVC",
arr:[],
},
mounted:function(){
axios.get("./index.php?a=lists")
.then(response=> {
this.arr= response.data;
console.log(response.data);
})
.catch(function(error) {
console.log(error);
})
}
});
2、服务器接收gte请求并通过 echo json_encode() 返回数据
$dsn= "mysql: host=localhost; port=3306; dbname=test; charset=utf8";
$pdo= new PDO($dsn,'root','root');
function lists(){
global $pdo;
$stmt= $pdo->query("select * from news");
$rs= $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rs);
}
if(!empty($_GET["a"])){
$action= strtolower($_GET["a"]);
$action();
}
3、vue通过v-for进行页面渲染
<ul id="todoapp">
<li v-for="(item,index) in arr">
{{item.content}}
</li>
</ul>
数据库数据
页面渲染