PHP+VUE实现前端和后端数据互通（宝塔面板）

最新推荐文章于 2025-12-18 10:37:20 发布

原创

最新推荐文章于 2025-12-18 10:37:20 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #php #vue.js #开发语言 #javascript

本文介绍了一种使用PHP从数据库获取数据，然后通过JavaScript在Vue.js前端展示的方法。通过宝塔面板进行操作，创建了一个基于Element UI的后台管理页面基础模型。示例代码中展示了数据连接和传递的过程，适用于初学者了解前后端数据通信。

基于element和vue的一个简单的后台管理页面基础模型(这里我用了php从数据库获取数据然后在JS区域接收了获取的数据。PS：不会用axios)

直接附上所有代码：数据库：mywu 用户名：root 密码：root 数据表：test

<?php
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;
}
?>
<!DOCTYPE html>
<html>
<!-- head区域引入了element-ui.css,vue.js,vue-router.js,element-ui.js的CDN 注