创建一个web.php页面:
<?php
require_once("include/mysql.Open.php"); //打开数据库
require_once("public/conn.php"); //个人的配置文件
header('content-type:application/json;charset=utf8');
$sql ="select * from web_product order by Id"; //我自己的数据库
$value=$db->getList($sql);
foreach($value as $k=>$v){
// $new_arr[$k]=$v; //这语句将数据库全部执行出来了
$new_arr[$k]=array( //把想显示的数据通过数据方式渲染出来
"id"=>$v['Id'],
"pname"=>$v['p_name'],
"face"=>$v['p_face'],
"pic"=>$v['p_pic'],
"smallpic"=>$v['p_smallpic']
); //循环数据库得数据字段,按顺序执行
}
$result=array("status"=> 1,"data"=>$new_arr,"msg"=>"获取商品信息成功");
$json=json_encode($result);
echo $json; //输出JSON数据
?>
查看页面JSON数据:
前端VUE调用数据:
<template>
<div class="hello">
<table>
<tr>
<th>id</th>
<th>名字</th>
<th>图片地址</th>
<th>修改</th>
</tr>
<tr v-for="item in list.data" :key="item.id" >
<td>{{item.id}}</td>
<td>{{item.pname}}</td>
<td>{{item.smallpic}}</td>
<td><a href="#">编辑</a></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
list:[],
}
},
created(){
this.$axios
.get('/test') //调用接口
.then(res=>{
this.list=res.data;
console.log(this.list)
})
}
}
</script>