初步结合 Vue、axios、php、mysql ,写一个小Demo
程序员文章站
2022-07-04 16:26:13
...
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[email protected]_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;
}
?>上一篇： vue 绑定 class 和 内联样式（style）
下一篇： axios post请求小案例