一步步踏著坑過來

要點總結

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）不同）ps:原理：我們不能在vue前端請求到其他的IP地址介面，所以我要在本地啟動一個代理伺服器，dev中的的proxy就是伺服器的代理配置項，這樣代理伺服器會攔截前端頁面的非同步請求，從本地伺服器轉發到遠端伺服器，得到的response後再返回給前端頁面

index.js中新增

proxyTable: {
      '/api':{        //如果遇到/api則攔截地址跳轉
        target:'http://localhost:8080',     //將/api 替換成設定的跨域轉換地址（需要訪問後臺地址）
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }

      }

    }

最後檢視成功讀取到後臺資料！！