vue入门：用axios跨域连接PHP+MySQL后台

一步步踏着坑过来

---

要点总结

1. 搭建PHP+MySQL+apache，生成服务器，生成简单数据库表
2. 写后台PHP文件，供给前端引用接口（返回一个数组）
3. 搭建vue项目，安装在项目中安装axios插件
4. 写vue前端代码，引用后端接口，显示数据库表。

开发环境：wampserver（后台）、webstorm（前台）

• 在生成的Apache服务器上编写后台接口文件axiosphp.php文件，设置默认端口为8080

• <?php
header("Content-type: text/html; charset=utf-8");
$conn = mysql_connect('localhost','root','123456');//连接数据库，根据自己的数据库填写
$select = mysql_select_db('bianquan');//选着数据库表
$sql="select * from user";//操作数据库
$result=mysql_query($sql); //执行操作
$row=mysql_fetch_row($result); // 从结果集中取得一行作为枚举数组，存入row数组中
echo(json_encode($row)); //返回相应数组，不是用return
echo mysql_error();
mysql_close($conn);
?>

• 在vue项目上安装axios组件（略多坑）

• 在npm中输入（–save意思是安装时保存依赖到打包目录下）

npm install axios --save

• vue项目中引用axios，在项目的配置文件main.js中添加代码（巨坑，引用axios是一直有下滑线错误提示，找了好久才发现根本没有问题可以直接用）
  import axios from 'axios' //引入axios组件
Vue.prototype.$axios = axios //使用axios

• 引用完成后，编写前台axios连接文件

<script>
export default {
  data() {
    return {
         users: []    //接受后台返回的数组，在vue页面直接显示
    }
  },
created() {            //使用axios的get请求，es6语法的箭头函数
    axios.get('/api/test01/axiosphp.php').then(res => {
    //  /api/test01/axiosphp.php是后台文件URL，api代表本
    //机Apache端口：http://localhost:8080，需要在index.js设置
        this.users = res.data;    //将PHP返回数组的值付给users
      console.log('success');      //打印结果
      console.log(this.users);
    })

  }

}
</script>

- 在写axios的连接URL时，不能直接写跨域地址，只能设置跳转，需要在config中的index.js文件中设置地址跳转才能实现跨域连接！！巨巨坑！！！在Chrome的sources中可以查看地址跳转是否正确（我的vue项目端口设置为8087，在index.js可以更换，一定要与Apache端口（我的8080）不同）

index.js中添加

proxyTable: {
      '/api':{        //如果遇到/api则拦截地址跳转
        target:'http://localhost:8080',     //将/api 替换成设置的跨域转换地址（需要访问后台地址）
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }

      }

    }

最后查看成功读取到后台数据！！