开发环境:
PHP:PhpStorm
vue:WebStorm
要点:
- 用PHP+mysql+apache生成服务器,创建一个简单的user表
- 写后台php接口,获取user表里的信息,返回一个数组
- 用vuecli 3 创建vue项目,安装axios(npm install axios --save)
- 配置vue.config.js(vuelic3脚手架创建的项目里是没有这个配置的,得自己在根目录中手动创建:项目-》new-》JavaScript)
- 写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项目的端口号