vue+php實現先後端分離:axios跨域鏈接php+mysql

開發環境:
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(根據本身端口號以及項目位置查找)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文件加這個
vue

$mysqli->set_charset("utf8");
複製代碼
  • 8080是個人vue項目的端口號

相關文章
相關標籤/搜索