Vue學習之安裝依賴與數據源的案例分析

小編給大家分享一下Vue學習之安裝依賴與數據源的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

                                                           今天，給大家分享一個小型的后臺管理系統，感興趣的朋友了解一下，希望能對你有所啟發。

一、構建項目與安裝依賴

　　構建項目采用vue-cli腳手架搭建，npm、cnpm、vue-cli這些知識的基礎，網上一大片一大片的，就不過多的描述了。難理解的是里面的配置文件，初學的時候確實費了很多勁，先不用去管太多的配置文件，這些主要是以后上線打包的一些配置問題。這里主要關注一下如何安裝依賴，依賴就是一個項目運行需要的模塊，比如使用axios來獲取數據，就需要安裝相應模塊。項目依賴在根目錄下的package.json文件中，如下是我項目使用的依賴包：

"dependencies": {
"axios": "^0.18.0",
"echarts": "^4.2.1",
"element-ui": "^2.7.2",
"mockjs": "^1.0.1-beta3",
"vue": "^2.5.2",
"vue-awesome": "^3.5.1",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1"
},

　　在最開始項目構建后，有部分依賴包，如vue、vue-router是項目初始化后就存在的，其他的如果做項目時確定需要用到的依賴包，比如獲取數據需要的axios、UI設計框架element-ui這樣的可以直接在該處寫上名字和版本，其中^表示匹配該符號后面第一個數字開頭的版本的最新版；這里寫成后在終端中npm install或者npm i可以安裝這些依賴，然后在根目錄下會出現node_modules文件夾，這個文件夾都是依賴包文件，不需要我們修改任何東西，當然也不要刪除，如果不小心刪除了，再次npm i就可以了。

　　如果其他的一些模塊不能確定需要使用的，在你做網頁時想到或者網上搜索到需要使用，再考慮單獨引入，引入的時候在終端中使用npm install **（模塊名字）的方法進行安裝，安裝后的模塊名稱會自動出現在package.json文件的dependencies中。

二、關于數據源

　　項目中的數據從哪里來呢，這是我最開始最常糾結的問題。其實對于前端來說，項目的數據應該都來自于配套的后端程序，前后端分離后，后端處理好從項目業主提供的原始數據，提供給前端對外的數據API接口，這個接口是雙方約定好的，比如一些返回狀態，錯誤碼，一些格式或者名稱等。但是開發的時候實際是同時開發的，也就是前端在開發過程中要使用的數據需要自己先根據需求進行模擬，看其實際在網頁的表現是否滿足需求。當然，另外也有一些網絡API接口，這相當于別人處理好的數據，你根據其使用規則來使用。

　　數據的獲取在vue里有很多種方法，比如vue-resource的this.$http.get/post、jQuery的$.ajax、axios的this.$axios.get/post、fetch方法等。這些每一種方法都是可行的，需要掌握的基礎還是post/get請求方法，只是我自己對這塊都停留在會簡單的使用上面，這里就不深入探討這個了，這里只是說一些數據的來源。

　　1.vue腳手架項目可以使用mock數據，mock.js是隨機生成模擬數據，官網地址http://mockjs.com/。我在項目里只使用了少量的mock數據，如下：

1   Mock.mock(/login/, {
2     data: {
3       userId: "@integer(1,10)",
4       "nickname|1": ["Amy", "Michael", "Jack", "John", "Albert","Norton"],
5     },
6   });

　　這里要在main.js中導入mock.js，上述代碼在數據請求時訪問“login”地址，對外提供1個nickname，在后面的數組中隨機生成。如果需要其他隨機生成的內容，另外自己去模擬。相關教程：js視頻教程

　　2.直接在組件的data中定義數據，這是最簡單的方式了，如下：

  data() {
    return {
      introduction: [
        "登錄頁有粒子動態效果，采用VueParticles，各項參數設置可參看https://www.jianshu.com/p/53199b842d25；",
        "登錄后的昵稱是用mock數據做的，mock.js需要在main.js中導入；",
        "左側導航欄是根據element-ui的導航寫的，直接可用index跳轉，頂部導航為ui的面包屑導航；",
        "天氣預報采用的echarts，需要導入使用，樣式應該可以更美觀，此處只做了基礎的改變，數據為網上找的一個接口，部分城市可能無數據；",
        "文本編輯vue-quill-editor需要在main.js中導入，僅在編輯頁做了變化示例，后期可考慮傳值到父組件，可插入圖片；",
        "表格操作是根據某后臺管理系統的網頁仿寫的，有增刪改查等功能，選擇管理員和一般用戶按鈕可以看到不同的菜單，使用watch監測數據變化；",
        "新聞資訊也是網上找的數據接口，設置自動獲取時間改變接口的時間參數每天自動刷新，開發時設置proxyTable代理進行跨域；",
      ]
    };
  },

　　主要注意數據要用return返回，不使用return包裹的數據會在項目的全局可見，會造成變量污染；使用return包裹后數據中變量只在當前組件中生效，不會影響其他組件，就類似于一個函數里的每個不同的實例這個概念。

　　3.使用vuex數據管理倉庫，這個一般在大型的項目數據比較復雜的時候使用，我GitHub上面的那個項目沒使用，但是在最開始學習的時候也在一個小頁面中使用過，學習地址https://vuex.vuejs.org/zh/。主要是State、Getter、Action、Mutations、Module這5個大塊，也有其輔助函數map開頭的幾個，自己學習的不算很深入，還需要加強學習。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '張三',
        age: '23',
        sex: '男',
        likes: '籃球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '馬六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李麗',
        age: '21',
        sex: '女',
        likes: '看書',
        introuce: ''
      },
      {
        name: '付蘭',
        age: '21',
        sex: '女',
        likes: '看電影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {
      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {
      addPerson({commit},data){
        commit('add',data)
      },
      delPerson({commit},data){
        commit('del',data)
      },
      editPerson({commit},data){
        commit('edit',data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '張三',
        age: '23',
        sex: '男',
        likes: '籃球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '馬六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李麗',
        age: '21',
        sex: '女',
        likes: '看書',
        introuce: ''
      },
      {
        name: '付蘭',
        age: '21',
        sex: '女',
        likes: '看電影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {      addPerson({commit},data){
        commit('add',data)
      },
      delPerson({commit},data){
        commit('del',data)
      },
      editPerson({commit},data){
        commit('edit',data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

View Code

　　上述代碼是一個很簡單的狀態管理，單獨定義一個倉庫store，State里定義數據，Getter獲取State數據相當于計算屬性，Mutations方法函數、Action執行Mutations。最后在組件里可以使用這個store里的數據，使用方法this.$store.dispatch("addPerson", data)，主要是dispatch方法。

　　這種方法在上線時如果數據復雜也建議使用這種方法，將State里數據的通過相關axios等方法獲取。

　　4.網絡API數據，網絡上有很多開源的API，也有一些收費的API，這些API一般以json或者jsonp的格式存在。收費的主要需要注意一般都有跨域問題存在。

　　開發時的跨域在根目錄下的config文件夾下的index.js中配置，找到proxyTable配置，在module.exports的dev里面

    proxyTable: {
      '/api': {  //代理地址  
        target: 'http://api01.idataapi.cn:8000/article',  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            '^/api': ''   //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉  
        },
    }
    },

　　這樣在獲取數據時api就是代表了http://api01.idataapi.cn:8000/article這個網站，然后通過拼接得到正確的數據接口。this.$axios.get('api’ + url)，這個url是接口后一部分的網址，注意與api之間的'/'，如果前面有后面則不要加，如果沒有后面開始就要加。這樣開發狀態下代理跨域就完成了。

　　線上的跨域其實如果是有后端系統的項目，一般有后端服務器端設置，上線后其實都在同一域，不存在跨域，如果需要跨域，一般由后端來解決也方便些。但是如果實在沒辦法，那網上找了也有很多其他方法，我主要采用的是nginx反向代理的方法。將前端代碼打包后放到nginx服務器，在nginx配置里設置代理即可。如下：

        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://api01.idataapi.cn:8000/article/;
        }

　　這個配置在nginx安裝后的目錄下的config文件夾nginx.conf文件里下，在 server里添加上述代碼，即表示了用api代理http://api01.idataapi.cn:8000/article/地址。

以上是“Vue學習之安裝依賴與數據源的案例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！