初步结合 Vue、axios、php、mysql ,写一个小Demo

最新推荐文章于 2024-06-20 12:30:47 发布

dq_095

最新推荐文章于 2024-06-20 12:30:47 发布

阅读量1.6k

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_37968920/article/details/81583876

版权

Vue.js 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

html部分：

<template>
  <div class="myself">
      <table class="table" v-show="toggleTable" cellspacing="0" border="1">  
        <tr class="tr">  
          <th class="th">id</th>  
          <th class="th">name</th>  
          <th class="th">age</th>  
          <th class="th">intro</th>  
        </tr>  
        <tr class="tr" v-for="(user,index) in users" :key="index">  
          <td>{{user.id}}</td>  
          <td>{{user.name}}</td>  
          <td>{{user.age}}</td>  
          <td class="intro">{{user.intro}}</td>  
        </tr>  
      </table>  
      <div class="showwait" v-show="phpShow">
        <div class="text" style="width:140px;height:80px;background:rgba(7,17,27,0.2);text-align:center;color:#fff;line-height:80px;font-size:16px">正在加载中...</div>
      </div>
  </div>
</template>

js部分：

<script>
import axios from 'axios'
export default {
    data(){  
      return{  
        users: [],//预先创建一个数组，用于存放请求得到的数据  
        phpShow:false,
        toggleTable:false
      }  
    },  
    created(){ //此处用created相当于对前端页面数据进行初始化  
      this.getPhpData() 
    },
    methods:{
      getPhpData(){
          this.phpShow=true;
          axios.get("http://120.78.191.175/ele-data/good.php").then(res=>{  //这里是ES6的写法，get请求的地址 
            this.users=res.data;//获取数据  
            console.log('success');  
            console.log(this.users);  
            this.phpShow=false;
            this.toggleTable=true;
        }) 
      }
    }  
}
</script>

stylus部分：

<style  lang="stylus" rel="stylesheet/stylus">
  .myself
    position relative
    width 100%
    height 100%
    .table
      z-index 40
      width 100%
      .tr
        .intro
          font-size 10px
    .showwait
      position absolute
      z-index 50
      top 0
      left 0
      bottom 0
      width 100%
      height 100%
      display flex
      justify-content center

      .text
        width 100px
        color red
        height 40px
        background-image #4de44d
        font-size 14px
        margin-top 100px
        line-height 40px
</style>

后台PHP部分：


<?php
        header("Access-Control-Allow-Origin: *");//这个必写，允许请求的IP,*:所有IP  

        //1.建立连接
        $connect=mysqli_connect('localhost','root','root','vuephp','3306');
        //2.定义sql语句
        $sql='select * from student';
        mysqli_query($connect,'set names utf8');
        //3.发送SQL语句
        $result=mysqli_query($connect,$sql);
        $arr=array();//定义空数组
        while($row =mysqli_fetch_array($result)){
            //var_dump($row);
                //array_push(要存入的数组，要存的值)
            //array_push($arr,$row);
            $arr[]=$row;
        }
        //var_dump($arr);
        //4.关闭连接
        mysqli_close($connect);

        echo(json_encode($arr));//这里用echo而不是return  

 ?>

另外我的一个项目的PHP部分代码：
起参考作用：

<?php
/*
**********************************************
    usage:
            weibo.php?act=add&content=xxx   添加一条
                返回：{error:0, id: 新添加内容的ID, time: 添加时间}

            weibo.php?act=get_page_count    获取页数
                返回：{count:页数}

            weibo.php?act=get&page=1        获取一页数据
                返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]

            weibo.php?act=acc&id=12         顶某一条数据
                返回：{error:0}

            weibo.php?act=ref&id=12         踩某一条数据
                返回：{error:0}

    注意： 服务器所返回的时间戳都是秒（JS是毫秒）
**********************************************
*/

// header('Access-Control-Allow-Origin:http://192.168.43.124:8081');
//http://192.168.1.3:8081
// header('Access-Control-Allow-Origin:http://192.168.1.3:8081');
header('Access-Control-Allow-Origin:*');
//header('Access-Control-Allow-Origin:http://localhost:8080');

//创建数据库之类的
$db=@mysql_connect('localhost', 'root', 'root') or @mysql_connect('localhost', 'root', 'root');

mysql_query("set names 'utf8'");
mysql_query('CREATE DATABASE zns_ajax');

mysql_select_db('zns_ajax');

//正式开始

//header('Content-type:zns/json');

$act=$_GET['act'];

$PAGE_SIZE=6;

// echo $act;
switch($act)
{
    // 添加一条留言
    case 'add':
        $content=urldecode($_GET['content']);
        $time=time();
        // $data= date('Y-m-d H:i:s');
        // $time= strtotime($data);

        $content=str_replace("\n", "", $content);

        $sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)";

        mysql_query($sql);

        $res=mysql_query('SELECT LAST_INSERT_ID()');

        $row=mysql_fetch_array($res);

        $id=(int)$row[0];

        echo "{\"error\": 0, \"id\": {$id}, \"time\": {$time}}";
        break;
    case 'get_page_count':
        $sql="SELECT COUNT(*)/{$PAGE_SIZE}+1 FROM weibo";

        mysql_query($sql);

        $res=mysql_query($sql);

        $row=mysql_fetch_array($res);

        $count=(int)$row[0];

        echo "{\"count\": {$count}}";
        break;
    //得到所有数据 
    case 'get':
        $page=(int)$_GET['page'];
        if($page<1)$page=1;

        $s=($page-1)*$PAGE_SIZE;

        $sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}";

        $res=mysql_query($sql);

        $aResult=array();
        while($row=mysql_fetch_array($res))
        {
            $arr=array();
            array_push($arr, '"id":'.$row[0]);
            array_push($arr, '"content":"'.$row[1].'"');
            array_push($arr, '"time":'.$row[2]);
            array_push($arr, '"acc":'.$row[3]);
            array_push($arr, '"ref":'.$row[4]);

            array_push($aResult, implode(',', $arr));
        }
        if(count($aResult)>0)
        {
            echo '[{'.implode('},{', $aResult).'}]';
        }
        else
        {
            echo '[]';
        }
        break;
    //得到一条数据 
    case 'getOne':

        $sql="SELECT `id`, `title`, `content`, `author`, `imgContent`,`readNum`,`motto` FROM `article` ";
        $res=mysql_query($sql);

        $aResult=array();
        while($row=mysql_fetch_array($res))
        {
            $arr=array();
            array_push($arr, '"id":'.$row[0]);
            array_push($arr, '"title":"'.$row[1].'"');
            array_push($arr, '"content":"'.$row[2].'"');
            array_push($arr, '"author":"'.$row[3].'"');
            array_push($arr, '"imgContent":"'.$row[4].'"');
            array_push($arr, '"readNum":"'.$row[5].'"');
            array_push($arr, '"motto":"'.$row[6].'"');

            array_push($aResult, implode(',', $arr));
        }
        if(count($aResult)>0)
        {
            echo '[{'.implode('},{', $aResult).'}]';
        }
        else
        {
            echo '[]';
        }
        break;
    case 'acc':
        $id=(int)$_GET['id'];

        $res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}");

        $row=mysql_fetch_array($res);

        $old=(int)$row[0]+1;

        $sql="UPDATE weibo SET acc={$old} WHERE ID={$id}";

        mysql_query($sql);

        echo '{"error":0}';
        break;
    case 'ref':
        $id=(int)$_GET['id'];

        $res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}");

        $row=mysql_fetch_array($res);

        $old=(int)$row[0]+1;

        $sql="UPDATE weibo SET ref={$old} WHERE ID={$id}";

        mysql_query($sql);

        echo '{"error":0}';
        break;
    case 'del':
        $id=(int)$_GET['id'];
        $sql="DELETE FROM weibo WHERE ID={$id}";
        //echo $sql;exit;
        mysql_query($sql);
        echo '{"error":0}';
        break;
}
?>