vue+php实现前后端分离:axios跨域连接php+mysql

4,559 阅读1分钟
开发环境:
PHP:PhpStorm
vue:WebStorm


要点:

  1. 用PHP+mysql+apache生成服务器,创建一个简单的user表
  2. 写后台php接口,获取user表里的信息,返回一个数组
  3. 用vuecli 3 创建vue项目,安装axios(npm install axios --save)
  4. 配置vue.config.js(vuelic3脚手架创建的项目里是没有这个配置的,得自己在根目录中手动创建:项目-》new-》JavaScript)
  5. 写vue前端代码


  • 写php文件(创建myBlog项目-》axios.php)


在浏览器上查看php是否有返回数组数据:localhost:80/myBlog/axios.php(根据自己端口号以及项目位置查找)

  • 引入axios,并且加到原型链中。在main.js中写入
    import axios from 'axios'
    Vue.prototype.$axios = axios;
    
    //在之后用到axios时直接this.$axios就可以了。
  • vue.config.js:axios不能直接写跨域地址,需要先做代理跨域proxy。如下:

  • 在vue中写入:/api也就是上面的http://localhost:80

npm run serve运行项目就ok了。

但是发现请求到的数据中文都???显示,忘记在axios.php文件加这个

$mysqli->set_charset("utf8");
  • 8080是我的vue项目的端口号