學(xué)習(xí)vue.js,axios以及跨域

沒(méi)做過(guò)web開(kāi)發(fā)的,還是用一天時(shí)間學(xué)習(xí)一下vue.js,以便以后配合golang寫(xiě)些簡(jiǎn)單的web程序。

學(xué)習(xí)vue.js


vue.js的入門(mén)就不寫(xiě)筆記了實(shí)在是懶得寫(xiě),網(wǎng)上一堆文章直接搜索出來(lái)看看就好,同時(shí)可以配合element-ui做些測(cè)試。
本來(lái)看見(jiàn)web前端開(kāi)發(fā)就挺煩的,一大堆亂七八糟的東西,傳說(shuō)中簡(jiǎn)單的vue也動(dòng)不動(dòng)就一堆什么全家桶,動(dòng)手是最好的學(xué)習(xí)方法,稍微學(xué)習(xí)感覺(jué)vue確實(shí)挺簡(jiǎn)單方便,當(dāng)然真正使用時(shí)應(yīng)該還是挺多坑。

參考文章:
搭建vscode+vue環(huán)境
這可能是vue-cli最全的解析了……
Vue2全家桶之一:vue-cli(vue腳手架)超詳細(xì)教程
基于vue-cli快速構(gòu)建
以及:
Vue官網(wǎng)文檔
Vue CLI 官網(wǎng)文檔
Element UI官網(wǎng)文檔
源碼:
一個(gè)后臺(tái)管理demo
類(lèi)似餓了么官方客戶端
樓上客戶端的后臺(tái)管理器
Vue2 后臺(tái)管理系統(tǒng)解決方案
Vue Element Admi 這個(gè)star最多

附神圖一張(點(diǎn)擊后查看原圖):


vue.js

mpvue和微信原生小程序開(kāi)發(fā)

測(cè)試了一下mpvue開(kāi)發(fā)小程序,發(fā)覺(jué)對(duì)于vue新手和小程序新手還不如直接使用小程序原生開(kāi)發(fā)來(lái)的好,一個(gè)是還得去熟悉小程序開(kāi)發(fā)文檔,遇到坑更不容易解決,一個(gè)是mpvue下面編譯到真機(jī)測(cè)試速度遠(yuǎn)沒(méi)有原生的快,一個(gè)是我想以后原生的開(kāi)發(fā)會(huì)越來(lái)越強(qiáng)大怕mpvue跟不上。

安裝和使用axios


$ cnpm install axios
main.js文件:

import axios from 'axios'
Vue.prototype.$axios = axios

這樣就可以使用this.$axios來(lái)調(diào)用axios,使用例子參考下面跨域。

跨域


1. 本地服務(wù)器開(kāi)發(fā)環(huán)境,添加proxyTable代理:

修改config/index.js文件:

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //修改這里
      '/bd': {
        target: 'https://www.baidu.com',
        secure: true, //https必須添加這個(gè)設(shè)置
        changeOrigin: true,
        pathRewrite: {
          '^/bd': ''
        }
      }

    },

做了以上修改以后需要重啟服務(wù)器:npm run dev

調(diào)用
調(diào)用時(shí)可以直接使用'/bd',會(huì)被自動(dòng)替換為上面定義的target地址,調(diào)用例子:

App.vue文件:

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

2. 生產(chǎn)環(huán)境

因?yàn)樵陂_(kāi)發(fā)環(huán)境我們一般直接使用npm run dev啟動(dòng)內(nèi)置的服務(wù)器,而以上修改proxyTable的方法應(yīng)該就是修改這個(gè)本地服務(wù)器的配置讓其訪問(wèn)該代理地址時(shí)自動(dòng)加上跨域功能。

而生產(chǎn)環(huán)境則不然,服務(wù)器一般是另外的比如使用nginx,此時(shí)修改nginx的跨域配置就可以了?;蛘遟olang gin寫(xiě)的服務(wù)器,那么就在代碼中加上跨域支持?;蛘咭L問(wèn)第三方網(wǎng)站,那么直接使用后端編程語(yǔ)言比如go去跨域訪問(wèn),其實(shí)說(shuō)白了跨域跟客戶端沒(méi)什么關(guān)系都是服務(wù)器的事。

生產(chǎn)環(huán)境還沒(méi)測(cè)試,等以后驗(yàn)證再補(bǔ)充修改。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ## 框架和庫(kù)的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計(jì)架構(gòu)和**解決方案**。> > 庫(kù)(lib...
    Rui_bdad閱讀 3,151評(píng)論 1 4
  • 今天算是正式畢業(yè)第一天。 六月最繁忙的21,21兩天,開(kāi)會(huì),種樹(shù),領(lǐng)班級(jí)學(xué)士服,收教師資格證的材料,優(yōu)畢拍照,交就...
    ironthrone閱讀 250評(píng)論 0 0
  • 今天給大家推薦日本hap Inc.公司(據(jù)說(shuō)公司只有老板一人,估計(jì)是深宅)出的幾款腦洞系列游戲,骨骼清奇,畫(huà)風(fēng)異常...
    有朵閱讀 2,645評(píng)論 2 4
  • 越長(zhǎng)大越發(fā)現(xiàn),生活是自己的,與他人無(wú)關(guān),與客觀條件無(wú)關(guān)。到最后,你失去的是時(shí)間,你經(jīng)歷的是時(shí)間的考驗(yàn),你得到的是遇...
    Cherry小丸子咯閱讀 211評(píng)論 0 0
  • 你如果懂,我希望與你一起尋找《躍遷》的傳送門(mén),成功躍遷; 你如果不懂,我希望丘比特射中你掃文章末尾邀請(qǐng)碼,和我們一...
    Luella_Lin閱讀 2,354評(píng)論 6 24

友情鏈接更多精彩內(nèi)容