连接前端vue项⽬和php后端,PHP+VUE实现前端和后端数据
互通（宝塔⾯板）
基于element和vue的⼀个简单的后台管理页⾯基础模型(这⾥我⽤了php从数据库获取数据然后在JS区域接收了获取的数据。PS：不会⽤axios)
直接附上所有代码：数据库：mywu ⽤户名：root 密码：root 数据表：test
header("Content-type:text/html;charset=utf-8");
$host = "localhost";
$username = 'root';
$password = 'root';
$db = 'mywu';
//1.连接数据库
$conn = mysqli_connect($host,$username,$password,$db);
if (!$conn) {
die('Could not connect: ' . mysqli_error($con));
}
//2.定义⼀个空数组⽤来接收数据
$usersArr = [];
mysqli_set_charset($conn,'utf8');
//3.获得数据表test的数据
$user_menu = "select * from test";
//4.发送sql语句
$res = mysqli_query($conn,$user_menu); //结果集的资源
//5.将结果集资源转换成数据
/
/ $row = $res->fetch_assoc();
//while判定条件是否为true是则循环
while($row = $res->fetch_assoc())
{
$userArr[] = $row;
}
>
VUE项⽬
//将从数据库获取的数据JSON解析并赋值给usermenu
var usermenu = <?php echo json_encode($userArr);?>
// 主页
const Home = {
data() {
return {
//⽤来接收JSON数据的空数组menulist: []
}
},
template:
`
后台管理系统 单页版
default-active="1"
background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b"
>
//遍历接受的数据
{{item.username}}
⽤户列表
上传图⽚
`,
created() {
},
methods: {
cliuser() {
this.$router.push('/user')
},
clipic() {
this.$router.push('/uppicture') },
getMenuList() {
//将解析后的JSON赋值给ulist = usermenu console.log(usermenu)
},
}
}
/
/ ⽤户
// 上传图⽚按钮
const router = new VueRouter({ routes: [
{ path: '/', component: Home } ]
})
new Vue({
el: '#app',
data: {},
methods: {},
router
})
html,
body,
#app {
php项目搭建height: 100%;
margin: 0;
padding: 0;
}
.el-header {
background-color: #373d41; padding-left: 0;
color: #fff;
display: flex;
font-size: 20px;
align-items: center;
}
.el-header img {
margin-right: 10px;
}
.el-aside {
background-color: #545c64;
}
.el-card {
margin-top: 10px;
}
.el-breadcrumb {
margin-bottom: 15px;
}
仅供参考，如有不解之处请在下⽅评论区留⾔，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。