基于vue-cli的反向代理设置及axios获取json数据

 

点击查看原文

一、后端接口搭建

后端用的是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('请求失败执行的函数');
          });

 

请求成功后的数据效果：