Vue學習之安裝依賴與數(shù)據(jù)源的案例分析-創(chuàng)新互聯(lián)

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

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網站建設服務10余年為成都公路鉆孔機小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網站制作營銷網站建設商城網站建設手機網站建設小程序網站建設網站改版，從內容策劃、視覺設計、底層架構、網頁布局、功能開發(fā)迭代于一體的高端網站建設服務。

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

一、構建項目與安裝依賴

構建項目采用vue-cli腳手架搭建，npm、cnpm、vue-cli這些知識的基礎，網上一大片一大片的，就不過多的描述了。難理解的是里面的配置文件，初學的時候確實費了很多勁，先不用去管太多的配置文件，這些主要是以后上線打包的一些配置問題。這里主要關注一下如何安裝依賴，依賴就是一個項目運行需要的模塊，比如使用axios來獲取數(shù)據(jù)，就需要安裝相應模塊。項目依賴在根目錄下的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是項目初始化后就存在的，其他的如果做項目時確定需要用到的依賴包，比如獲取數(shù)據(jù)需要的axios、UI設計框架element-ui這樣的可以直接在該處寫上名字和版本，其中^表示匹配該符號后面第一個數(shù)字開頭的版本的最新版；這里寫成后在終端中npm install或者npm i可以安裝這些依賴，然后在根目錄下會出現(xiàn)node_modules文件夾，這個文件夾都是依賴包文件，不需要我們修改任何東西，當然也不要刪除，如果不小心刪除了，再次npm i就可以了。

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

二、關于數(shù)據(jù)源

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

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

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

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，上述代碼在數(shù)據(jù)請求時訪問“l(fā)ogin”地址，對外提供1個nickname，在后面的數(shù)組中隨機生成。如果需要其他隨機生成的內容，另外自己去模擬。相關教程：js視頻教程

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

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

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

3.使用vuex數(shù)據(jù)管理倉庫，這個一般在大型的項目數(shù)據(jù)比較復雜的時候使用，我GitHub上面的那個項目沒使用，但是在最開始學習的時候也在一個小頁面中使用過，學習地址https://vuex.vuejs.org/zh/。主要是State、Getter、Action、Mutations、Module這5個大塊，也有其輔助函數(shù)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

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

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

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

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

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

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

線上的跨域其實如果是有后端系統(tǒng)的項目，一般有后端服務器端設置，上線后其實都在同一域，不存在跨域，如果需要跨域，一般由后端來解決也方便些。但是如果實在沒辦法，那網上找了也有很多其他方法，我主要采用的是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學習之安裝依賴與數(shù)據(jù)源的案例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網站制作公司行業(yè)資訊頻道！

當前文章：Vue學習之安裝依賴與數(shù)據(jù)源的案例分析-創(chuàng)新互聯(lián)
文章地址：http://redsoil1982.com.cn/article42/dgjehc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、全網營銷推廣、網站導航、關鍵詞優(yōu)化、搜索引擎優(yōu)化、網站收錄

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容