zoukankan      html  css  js  c++  java
  • 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>

      

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

  • 相关阅读:
    POJ 3140 Contestants Division (树dp)
    POJ 3107 Godfather (树重心)
    POJ 1655 Balancing Act (树的重心)
    HDU 3534 Tree (经典树形dp)
    HDU 1561 The more, The Better (树形dp)
    HDU 1011 Starship Troopers (树dp)
    Light oj 1085
    Light oj 1013
    Light oj 1134
    FZU 2224 An exciting GCD problem(GCD种类预处理+树状数组维护)同hdu5869
  • 原文地址:https://www.cnblogs.com/chalkbox/p/12146511.html
Copyright © 2011-2022 走看看