vue2.0獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式

vue 2.0 從接口中獲取數(shù)據(jù)

站在用戶的角度思考問題，與客戶深入溝通，找到湖北網(wǎng)站設(shè)計與湖北網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋湖北地區(qū)。

解決axios發(fā)起http請求遇到跨域的問題

修改 config/index.js

proxyTable: {
    '/api': {
    target: 'http://127.0.0.1:8080',//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add'即可
    }
   }
  },

配置router

new Router({
 mode:'history',
 base:__dirname,
 routes: [
  {
   path: '/HelloWorld',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/admins',
   name: 'admins',
   component: admins
  }
 ]
})

加載組件

import admins from '@/components/HelloWorld'
export default {
 name: 'App',
 data () {
  return {
   Msg: "there is nonthing",
   seen:false
  }
 },
 componets:{
  HelloWorld
 }
}

心得：vue相當(dāng)于 和可以自定義html中的標(biāo)簽 和 屬性。

在開發(fā)過程中，首先容易出現(xiàn)的是標(biāo)點符號問題，其次是缺少引用的js，或者組件。

感覺看視頻中的寫法和網(wǎng)絡(luò)上流傳的寫法有些地方差別很大，特別是調(diào)用http接口獲取數(shù)據(jù)，還是參考網(wǎng)上使用axios解決跨域問題，比較好，此外，官網(wǎng)視頻中使用的是在create里面發(fā)請求獲取數(shù)據(jù)，但是會報錯，使用mounted不會報錯。當(dāng)然使用npm進(jìn)行管理的話，首先要了解一下整個項目的目錄結(jié)構(gòu)。了解完之后再進(jìn)行開發(fā)，才會避免摸不著頭腦的情況

以上這篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。