Vue學習小結(二)

　　接上一批，小結（二）。

三、導航內容（含左側導航及頂部面包屑導航）

　　其實導航條主要根據element-ui的教程進行編寫，官網：http://element-ui.cn/#/zh-CN/component。左側導航為NaveMenu導航菜單，地址：http://element-ui.cn/#/zh-CN/component/menu，頂部為面包屑導航，地址：http://element-ui.cn/#/zh-CN/component/breadcrumb。多掌握組件的寫法吧，簡單上手，但是真的精通還是需要下很多功夫研究的，根據示例寫好后，主要就是改樣式到符合要求的格式。這里可以選擇很多新的CSS預處理器，sass、less還有stylus這幾種，其實主要就是方便編寫CSS樣式，用最基礎的CSS也可。布局可以通過el-col的方式布局，完成后為響應式布局，根據窗口縮放。

　　左側導航如果完全根據ui組件來做，實際上不難。但是如果不根據ui組件來做，就需要自己采用v-for循環將導航內容全部顯示出來，上面可以定義二級菜單展開關閉及路由跳轉等事件，ui組件其實封裝了這一塊，所以如果導航菜單不是很多的時候建議可以采用ui組件來做的，代碼也顯得清楚易懂些。

　　面包屑導航，主要是el-breadcrumb-item，里面的內容第一條to表示可以點擊跳轉到該路由，第二條為面包屑導航的后面內容。第二個div中為頂部導航欄右側內容，根據實際需要情況改變，我這里主要是回到首頁和退出登錄兩個事件按鈕，還有一個是歡迎語。

<template>
  <div class="header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">INFO首頁</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin-right:20px">
      <span>Welcome, {{userName}}！</span>
      <el-button type="text" @click="home">[回到首頁]</el-button>
      <el-button type="text" @click="logout">[退出登錄]</el-button>
    </div>
  </div>
</template>

　　這里說到路由，路由就是單頁面應用的前面的主網址后面添加的不同名稱的地址即不同的頁面。直接上代碼：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const login = resolve => require(["@/page/login/login"], resolve);

const main = resolve => require(["@/page/main/main"], resolve);
const home = resolve => require(["@/page/home/home"], resolve);
const weather = resolve => require(["@/page/weather/weather"], resolve);
const tableOperation = resolve => require(["@/page/tableManager/tableOperation"], resolve);
const quillEditor = resolve => require(["@/page/tableManager/quillEditor"], resolve);
const starNews = resolve => require(["@/page/allNews/starNews"], resolve);
const explain = resolve => require(["@/page/explain/explain"], resolve);


export default new Router({
  routes: [
    {
      path: '/',
      component: login
    },
    {
      path: '/main',
      component: main,
      children: [{
        path: '',
        component: home,
        meta: [],
      }, {
        path: '/weather',
        component: weather,
        meta: ['天氣預報', '實時天氣'],
      },
      {
        path: '/tableOperation',
        component: tableOperation,
        meta: ['數據管理', '表格操作'],
      },
      {
        path: '/quillEditor',
        component: quillEditor,
        meta: ['數據管理', '文本編輯'],
      },
      {
        path: '/starNews',
        component: starNews,
        meta: ['新聞資訊', '明星八卦'],
      },
      {
        path: '/explain',
        component: explain,
        meta: ['說明', '說明'],
      },
    
    ]
    }
  ]
})

　　要引入並使用vue-router模塊，然后是根據路徑來定義路徑的組件名const main = resolve => require(["@/page/main/main"], resolve)，最后在routes里面添加組件名，其中meta為面包屑導航需要的字段，代表了一種層級關系，children為在主視圖下的二級路由視圖，這點其實蠻有用的，路由視圖就是<router-view></router-view>標簽代表的內容。第一個路由視圖在APP.vue里面，代表后面所有的內容，第二個在主文件里再次二次視圖，代表左側導航和頂部導航都不用重新加載。

四、其他。

　　其實寫了這些有點不知道些什么下去了，過程中遇到的問題肯定是很多，學習是一個痛苦和快樂的過程，查不到解決方法時候的痛苦，做出來之后的喜悅。項目里難度最大的應該屬於表格操作頁了，增刪改查，提交更改上傳文件等等功能都有實現，借助了很多ui組件封裝好的功能，部分也需要自己寫邏輯。最困難的地方就是多條件查詢了吧，實在是琢磨了好久，在網上找了好久，最后是用filter方法進行過濾表格數據完成的，需要弄清楚的是filter方法返回的是參數里值為真的數據，抓住這個重點就好了。

    search(searchForm) {
      this.results = this.list.filter(item => {
        let MatchBusiness = true;
        let MatchDep = true;
        let MatchMajor = true;
        let MatchSystemType = true;
        let MatchStatus = true;

        if (searchForm.depName) {
          MatchDep = item.depName == searchForm.depName;
        }
        if (searchForm.majorName) {
          MatchMajor = item.majorName == searchForm.majorName;
        }
        if (searchForm.status) {
          MatchStatus = item.status == searchForm.status;
        }

        if (searchForm.busiSystem) {
          // 模糊搜索;
          let key = searchForm.busiSystem.trim();
          MatchBusiness = item.busiSystem.indexOf(key.trim()) != -1;
        }
        if (searchForm.systemType) {
          // 模糊搜索;
          let key = searchForm.systemType.trim();
          MatchSystemType = item.systemType.indexOf(key.trim()) != -1;
        }
        return (
          MatchBusiness &&
          MatchDep &&
          MatchMajor &&
          MatchSystemType &&
          MatchStatus
        );
      });
    },

　　然后其他增刪改就簡單很多，利用js的push和splice方法完成，splice可刪可改，刪除就是講當前索引下的數據替換為無this.tableData.splice(i, 1)，修改則是新的數據替換

this.tableData.splice(index, 1, data)。

　　其他文件的上傳、提交、表單驗證等方法在ui組件的教程里都能找到就不多說什么了。

　　

　　其他主要注意基本格式根據需求或者設計圖來吧，其實后台管理系統類的項目對樣式需求不大，畢竟是管理系統，需要一種干凈清爽的風格，所以一般的格式也就是背景色、字體大小、圖標顏色、邊框色等，再就是自適應、響應式這些了。這些都需要多去學習，還有就是CSS預處理器的使用，可以提高效率。

 

　　好了，就總結到這里了，還是需要不斷學習才行的。