连接前端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() {

this.getMenuList()

},

methods: {

cliuser() {

this.$router.push('/user')

},

clipic() {

this.$router.push('/uppicture')

},

getMenuList() {

//将解析后的JSON赋值给menulist

this.menulist = usermenu

console.log(usermenu)

},

}

}

// 用户

// 上传图片按钮

const router = new VueRouter({

routes: [

{ path: '/', component: Home }

]

})

new Vue({

el: '#app',

data: {},

methods: {},

router

})

html,

body,

#app {

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;

}

仅供参考，如有不解之处请在下方评论区留言，谢谢！