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

基于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 注意先后顺序 --> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VUE项目</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.0/lib/index.js"></script>
</head>
<body>
  <div id="app">
　　<!-- 路由填充位 -->
    <router-view></router-view>
  </div>

  <script>
　　//将从数据库获取的数据JSON解析并赋值给usermenu
	var usermenu = <?php echo json_encode($userArr);?>
    // 主页
    const Home = {
    	data() {
        return {
　　　　　　//用来接收JSON数据的空数组
        　　menulist: []
        }
      },
      template:
      `<div style="height:100%;">
    <el-container class="home-con" style="height:100%">
      <el-header>
        <img src="http://style.wuliwu.top/LOGO" />
        <span>后台管理系统 单页版</span>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
　　　　　　　　//遍历接受的数据
            <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.username}}</span>
              </template>
              <el-menu-item index="1-1" @click="cliuser">用户列表</el-menu-item>
              <el-menu-item index="1-2" @click="clipic">上传图片</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
　　　　　　<!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>`,
  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
    })
  </script>

  <style>
    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;
    }
  </style>
</body>

</html>

　　

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

posted @ 2020-01-03 19:35  chalkbox  阅读(2274)  评论(0)  编辑  收藏  举报