一、后端接口搭建
后端用的是php,自己只是个菜鸟,复习了下基础知识后搭建出来的,环境用的是phpstudy集成环境搭建的。代码如下:
<?php
header('content-type:application/json;charset=utf8');
function connect_mysql(){
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = 'test';
// 创建连接
$conn = new mysqli($servername, $username, $password,$dbname);
$conn->query("set character set 'utf8'");
$conn->query("set names 'utf8'");
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
return $conn;
}
function getAnswer(){
//查询数据
$sql = "SELECT * FROM table_question WHERE 1";
$con = connect_mysql();
$result = $con->query($sql);
$arr = array();
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
array_push($arr,$row);
}
}else {
echo '0 结果!';
}
$data = decodeUnicode(json_encode($arr));
echo $data;
$con->close();
}
function decodeUnicode($str)//解决json_encode中文乱码问题
{
return preg_replace_callback('/\\\\u([0-9a-f]{4})/i',
create_function(
'$matches',
'return mb_convert_encoding(pack("H*", $matches[1]), "UTF-8", "UCS-2BE");'
),
$str);
}
getAnswer();
?>
结果如下:
二、vue-cli反向代理设置
反向代理用来解决前端跨域问题,设置很简单,在vue-cli项目的config文件夹index.js文件下进行如下设置即可:
主要代码如下:
proxyTable: {
//本地调试
'/phpserver': { //这里是我配置的名字 可以随便写 写成 '/api' 也行,下面记得也要改
target: 'http://localhost:90', //这个路径是我代理到本地的php服务器,即你要请求的第三方接口
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/phpserver': '/phpserver'} //这里重写路径运行后就代理到对应地址
}
},
注意:这里配置的反向代理名字:phpserver,在后端提供的接口中也应该保持一致,后端应该在php本地服务器的phpserver文件夹下进行接口开发(例如我的接口为:http://localhost:90/phpserver/answer_question),所以这里就可以根据后端提供的接口来进行设置。
三、安装axios并进行接口请求
1、打开命令行,进入vue-cli项目中,输入:cnpm install axios --save,回车进行axios安装。
2、在src的main.js中引入axios,并挂载到Vue原型链上,如下:
代码如下:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
3、在需要获取数据的组件调用axios的方法:response响应回来的对象,它的data属性就是我们需要的数据,如下所示:
主要代码如下:
mounted:function(){
//console.log('llllddd');
this.$http.get('/phpserver/answer_question/index.php')
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
},
获取到的数据如下:
根据上面的描述: 自己联系的效果:
代码:
proxyTable: {
//本地调试
'/api': { //这里是我配置的名字
target: 'http://m.maoyan.com', //你要请求的第三方接口
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
/*
想请求接口是 http://m.maoyan.com/ajax/movieOnInfoList?token=
target 是 目标服务器地址 本地代理服务器请求数据的时候它会把我们本地的 http:localhost:8080 替换成 http://m.maoyan.com
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
如果不写这个.我们本请求的路径是 /api/ajax/movieOnInfoList?token= ,
本地代理服务器补全路径后 就是 http:localhost:8080/api/ajax/movieOnInfoList?token=
这和原 接口地址 比较 是 域名不一样(这个在target已经处理过了, 相当于一样了) , 还多了一个 /api,所
以我们要把他处理掉, 通过pathRewrite: {'^/api': '/'} ,意思是 把 '/api' 替换成 '/',
这样 本地代理服务器请求地址就变成 http:localhost:8080//ajax/movieOnInfoList?token=
(接口于接口之间多写/ 没事会自动处理掉,上面也可以写成 pathRewrite: {'^/api': ''} ),
但是这样写不好, 接口于接口之间放个空 语义不强, 所以建议放个 '/'
*/
}
},
axios 请求数据代码:
this.$http.get('/api/ajax/movieOnInfoList?token=').then(function (res) {
console.log(res);
}).catch(function () {
console.log('请求失败执行的函数');
});
请求成功后的数据效果: