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中。

相關教學：vue影片教學

二、關於資料來源

　　專案中的資料從哪裡來呢，這是我最開始最常糾結的問題。其實對於前端來說，專案的數據應該都來自於配套的後端程序，前後端分離後，後端處理好從專案業主提供的原始數據，提供給前端對外的數據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 = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+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(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,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 = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+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(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,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學習之安裝依賴與資料來源的詳細內容。更多資訊請關注PHP中文網其他相關文章！