使用axios +vue php 实现前后端分离数据交互

128 阅读 0 评论 85 点赞

我是靠谱客的博主美丽奇异果，这篇文章主要介绍使用axios +vue php 实现前后端分离数据交互，现在分享给大家，希望可以做个参考。

使用axios +vue php 实现前后端分离数据交互

环境配置：

PhpStorm（php环境） vue（webstorm）

axios是个啥有啥作用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF
(*简单的来说就是在该项目种请求和交互前后端数据的工具*)

axios中文网

好了废话说完了，接下来上干货
一 vue部分

1安装axios指令

npm install axios

2导入安装的axios在要axios的页面导入

复制代码

1
2
import axios from 'axios'

3 使用axios 请求数据（这使用post方式请求数据，get方式看axios文档）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

       axios.post("http://localhost:63342/untitled12/src/php/ewr.php",{//后端要调用的接口 后面php部分会写（php运行起来的浏览器地址）
           userName:'520',//php部分可接受的数据
           password:'快乐',
       }
       ,{
               headers:{
                   'Content-Type': 'application/json;charset=UTF-8'
               }
           }

       ).then(res=> {
               this.test=res.data//res.data 请求后端php获取的数据
       }
          
     );

        } ,

二 php部分

1创建一个php

复制代码

<?php

error_reporting(0);
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');
header("Content-Type: text/html; charset=utf-8");
$conn = mysqli_connect('localhost', 'root', '', 'test');
$conn->query("set names 'utf8'");//转码
//修改成绩
//echo "参数";
$params=json_decode(file_get_contents("php://input"),true);
//php://input 是个可以访问请求的原始数据的只读流。不添加后端可能接受不到前端的post请求
//接受前端的值
$password=$params['password'];
$userName=$params['userName'];
var_dump($password);//查看获取数据类型 因为有时候前端给的数据类型和数据库定义的类型不同导致sql语句执行不成功
var_dump($userName);
$sql = "update trainingscore set Employeenumber=$userName  where  Studentid=$password ";
$result = mysqli_query($conn, $sql);
//查询成绩
$sql="select * from trainingscore";
$resultl = mysqli_query($conn, $sql);
$arr = array();
$datacout = mysqli_num_rows($resultl);//查询数据条数
for ($i = 0; $i < $datacout; $i++) {
    $arr[] = mysqli_fetch_assoc($resultl);
}
//print_r($arr);
$resultl->free();
//关闭连接
$conn->close();
echo(json_encode($arr));//这里用echo而不是return

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php

error_reporting(0);
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');
header("Content-Type: text/html; charset=utf-8");
$conn = mysqli_connect('localhost', 'root', '', 'test');
$conn->query("set names 'utf8'");//转码
//修改成绩
//echo "参数";
$params=json_decode(file_get_contents("php://input"),true);
//php://input 是个可以访问请求的原始数据的只读流。不添加后端可能接受不到前端的post请求
//接受前端的值
$password=$params['password'];
$userName=$params['userName'];
var_dump($password);//查看获取数据类型 因为有时候前端给的数据类型和数据库定义的类型不同导致sql语句执行不成功
var_dump($userName);
$sql = "update trainingscore set Employeenumber=$userName  where  Studentid=$password ";
$result = mysqli_query($conn, $sql);
//查询成绩
$sql="select * from trainingscore";
$resultl = mysqli_query($conn, $sql);
$arr = array();
$datacout = mysqli_num_rows($resultl);//查询数据条数
for ($i = 0; $i < $datacout; $i++) {
    $arr[] = mysqli_fetch_assoc($resultl);
}
//print_r($arr);
$resultl->free();
//关闭连接
$conn->close();
echo(json_encode($arr));//这里用echo而不是return