vue.js+axios以及跨域

沒做過web開發的，還是用一天時間學習一下vue.js，以便以後配合golang寫些簡單的web程式。

學習vue.js

vue.js的入門就不寫筆記了實在是懶得寫，網上一堆文章直接搜尋出來看看就好，同時可以配合element-ui做些測試。
本來看見web前端開發就挺煩的，一大堆亂七八糟的東西，傳說中簡單的vue也動不動就一堆什麼全家桶，動手是最好的學習方法，稍微學習感覺vue確實挺簡單方便，當然真正使用時應該還是挺多坑。

參考文章：
搭建vscode+vue環境
這可能是vue-cli最全的解析了……
Vue2全家桶之一：vue-cli（vue腳手架）超詳細教程
基於vue-cli快速構建
以及：
Vue官網文檔
Vue CLI 官網文檔
Element UI官網文檔

附神圖一張（點擊後查看原圖）：

vue.js

安裝和使用axios

$ cnpm install axios

main.js檔案：import axios from 'axios'Vue.prototype.$axios = axios

這樣就可以使用this.$axios來調用axios，使用例子參考下面跨域。

跨域

1. 本機伺服器開發環境，添加proxyTable代理：

修改config/index.js檔案：dev: {    // Paths    assetsSubDirectory: 'static',    assetsPublicPath: '/',    proxyTable: { //修改這裡      '/bd': {        target: 'https://www.baidu.com',        secure: true, //https必須添加這個設定        changeOrigin: true,        pathRewrite: {          '^/bd': ''        }      }    },

做了以上修改以後需要重啟伺服器：npm run dev

調用
調用時可以直接使用'/bd'，會被自動替換為上面定義的target地址，調用例子：

App.vue檔案：methods: {    getBd (event) {      this.$axios.get('/bd')        .then(function (response) {          console.log(response)        })        .catch(function (error) {          console.log(error)        })    }  }

2. 生產環境

因為在開發環境我們一般直接使用npm run dev啟動內建的伺服器，而以上修改proxyTable的方法應該就是修改這個本機伺服器的配置讓其訪問該Proxy 位址時自動加上跨域功能。

而生產環境則不然，伺服器一般是另外的比如使用nginx，此時修改nginx的跨網域設定就可以了。或者golang gin寫的伺服器，那麼就在代碼中加上跨域支援。或者要訪問第三方網站，那麼直接使用後端程式設計語言比如go去跨域訪問，其實說白了跨域跟用戶端沒什麼關係都是伺服器的事。

生產環境還沒測試，等以後驗證再補充修改。