Vue實戰狗尾草博客管理系統第二章

 

 

夥伴們出來啦，探討各問題，關於項目中大量的表單，你們是怎麼處理的？

本章主要內容以下：底層佈局，路由配置，github倉庫推送關聯。

關聯GitHub倉庫

關聯創建在github已建立帳號的基礎上

1. 登陸本身的Github帳號

2. 新建項目
3. 而後根據本身的狀況添加名稱和描述

    

4. 新建完成後，咱們只須要按照提示的信息一步一步完成便可
5.  複製命令行到項目終端，回車便可實現推送。

   爲了驗證推送的readme.md文件咱們刷新github，便可看到本身添加的readme文件已經才存在倉庫之中，下來咱們就須要添加項目中的主要文件了

   依次執行如下命令

git add .
git commit -m "first commit"
git push origin master

推送成功後，再次刷新github，便可看到本身的項目被推送到了倉庫之中。

這裏須要注意的是，項目中會有一個.gitignore的git配置文件，你們能夠在改該文件中進行推送文件的過濾設置，好比，咱們打包得到dist文件夾，及node_modules依賴包都是咱們須要過濾的。固然這裏默認配置已經作好了過濾，咱們再也不須要作過多處理，你們根據具體狀況使用便可。

 

至此git的關聯就配置完畢，以後你們只須要天天在項目作了更改後，使用如下命令進行提交推送

git add .
git commit -m "05-14完成某新功能開發"
git push origin master

底層佈局的配置

佈局思路，咱們須要實現的佈局爲header,aslide,main,footer部分，一個標準的管理平臺的底層佈局，可是咱們也須要考慮，404頁面，登陸頁面等。這些頁面都是單獨存在的頁面，是不須要底層佈局的支持的。若是小夥伴用過nuxt.js的話，應該會對Layout的這種思想會很是熟悉。經過改變不一樣的layout來實現總體大的佈局的change。其實nuxt.js的這種實現底層也是經過嵌套路由這一思路實現的。這裏就很少作闡述。

實現的思路：

1. 搭建layout佈局模板。除了登陸，404，報錯等其餘頁面都須要使用

2. 搭建路由，layout佈局模板爲一級路由，首頁，文章等大多頁面都寫在layout一級路由的二級中(children)，

3. 登陸，404，報錯路由則寫在和layout佈局同級。

這就是一個基本的流程啦。走你~

1. 咱們在src文件夾下新建pages文件夾，主要存放咱們的主要組件。新建home文件夾，home文件夾下新建index.vue組件隨便寫點什麼。

2. <template>
     <div>這裏是首頁</div>
   </template>
   <script>
   export default {
     
   }
   </script>
   <style lang="less" scoped>
   
   </style>

   1. 在components下新建commons文件夾 ，commons下新建Layout.vue文件。該文件做爲咱們的底層的佈局文件。這裏element有現成的佈局組件，咱們只須要'考皮'便可。不過仍是須要添加些許的樣式的。文件以下：

   Layout.vue:

<template>
  <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container class="loading-area">
      <el-main>
        <router-view></router-view>
          </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
</template>
<script>
export default {
  
}
</script>

<style lang="less" scoped>
  .el-container {
    width: 100%;
    height: 100%;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

佈局文件有了，但怎麼使用嘞？繼續走

3. 打開router下的index.js文件。讓咱們按照開始時所說的嵌套路由的寫法來實現

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

const _import = file => () => import('@/pages/' + file + '.vue');
const _import_ = file => () => import('@/components/' + file + '.vue');

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: _import('login/index')
    },
    {
      path: '/',
      name: 'home',
      component: _import_('commons/Layout'),
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'index',
          component: _import('home/index')
        }
      ]
    },
  ]
})

固然要使用這種的import引入文件，咱們就須要特定文件的支持。查看根目錄文件夾下是否含有.babelrc文件和.postcssec.js文件，若是沒有的話記得添加上便可。

路由中引入了login，可是咱們尚未建立，因此咱們須要跟進一下，建立一個登陸頁面。

4. pages>login>index.vue

<template>
  <div>登陸</div>
</template>
<script>
export default {
  
}
</script>
<style lang="less" scoped>

</style>

隨後保存，這裏咱們的底層的佈局就算搞定了，隨後的404和報錯的頁面都和登陸頁面同樣在路由中配置便可。

5. 檢測一下~

打開項目啓動的地址，能夠看到默認訪問的是咱們的index

 

然後更改路由地址爲login

便可看到登陸頁面是沒有底層layout支持的。其實現的關鍵就在嵌套路由的使用

固然，我還見過另外一種實現方式，定位~將404頁面登陸頁面採用窗口定位至全屏大小。可是這樣作有一個致命性的問題，很容易形成佈局混亂。定位是咱們通常要儘可能避開的使用元素，脫離文檔流，總會形成咱們沒法想象的bug。

 

路由的配置

路由緩存

基本的路由配置也就是咱們上面的router/index.js文件，不過這裏我仍是要作一些添加的，由於，若是咱們要使用緩存呢？是否是keep-alive就派上用場了？

實現思路：咱們在每一個頁面對應的路由添加meta對象，該對象中添加自定義屬性isAlive屬性，咱們定義當他爲true時，咱們讓這個路由採用緩存，不然就不採用緩存。

好比說咱們要實現首頁路由的緩存，咱們就這樣整：

{
      path: '/',
      name: 'home',
      component: _import_('commons/Layout'),
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'index',
          component: _import('home/index'),
          meta: {
            isAlive: true
          }
        }
      ]
    },

而後修改Layout.vue文件：

<template>
  <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container class="loading-area">
      <el-main>
        <keep-alive>
          <router-view v-if="this.$route.meta.isAlive"></router-view>
        </keep-alive>
        <router-view v-if="!this.$route.meta.isAlive"></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
</template>

這樣keep-alive緩存的使用也就是這樣啦。好繼續走

路由攔截

使用情景，有些頁面是須要登陸後才能夠訪問，咱們就須要在路由即將跳轉的時候，進行判斷，查看user是否登陸，若是登陸後，就正常跳轉，不然就讓他去登陸

路由守衛分爲兩種前置守衛和後置守衛，這樣的叫法比較洋氣哈，其實也就是路由攔截器。

跳轉前和跳轉後的區別。這裏攔截咱們須要在跳轉前進行登陸的判斷。

由配置的順序對路由的加載也是有很大的影響，咱們後臺管理系統，須要先進行登陸處理，而後會默認訪問首頁，固然，咱們也要考慮到404頁面，404頁面包括哪些呢？

我對404的理解就是在路由的映射列表中，沒有找到對應的路由從而返回404；

這裏，咱們能夠採用」*」通配符來進行匹配，固然順序也是要注意的，login。首頁 》children。 404。 *

1. router文件夾下新建permission.js文件，內容以下：

import VueCookies from 'vue-cookies';
import router from './index';

// 全局鉤子函數
// to: Route: 即將要進入的目標 路由對象
// from: Route: 當前導航正要離開的路由
// next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
// next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
// next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了（多是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
// next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。
// 確保要調用 next 方法，不然鉤子就不會被 resolved。

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title ? to.meta.title : '狗尾草博客管理系統';
  }
  // 判斷是否須要登陸權限
  if (to.matched.some(res => res.meta.auth)) {
    // 判斷是否登陸
    if (VueCookies.isKey('isLogin')) {
      console.log('已登陸');
      next()
    } else {
      console.log('未登陸');
      next({
        name: 'Login',
      }) // 沒登陸則跳轉到登陸界面
    }
  } else {
    next()
  }
});

router.afterEach((to, from) => {
  //跳轉後你要作的事情
})

export default router

2.修改main.js中路由的引入：

import router from './router/permission';

而後重啓一下，咱們再訪問index頁面，由於cookie中並無存儲isLogin字段，因此認爲沒有登陸，他就會跳轉到登陸頁面，讓咱們去登陸。

3. 固然路由遠比咱們想一想的擁有更多的功能，路由分爲靜態路由和動態路由，模式也有劃分hash和history模式，這裏咱們對router/index.js文件進行一個優化

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

const _import = file => () => import('@/pages/' + file + '.vue');
const _import_ = file => () => import('@/components/' + file + '.vue');

const asyncRouterMap = [];

const constantRouterMap = [
  {
    path: '/login',
    name: 'login',
    component: _import('login/index'),
  },
  {
    path: '/',
    name: 'Home',
    component: _import_('commons/Layout'),
    redirect: '/index',
    children: [
      {
        path: '/index',
        name: 'Index',
        component: _import('home/index'),
        meta: {
          isAlive: true,
          auth: true,
        }
      }
    ]
  },
];

const router = new Router({
  mode: 'history',
  routes: constantRouterMap,
  linkActiveClass: "router-link-active",
});

export default router

mode: 爲路由設置模式 history模式和hash模式

routers選擇靜態資源路由仍是動態資源路由

linkActiveClass路由切換時的元素的類名

接下來，當咱們訪問index路由的時候，由於沒有存儲isLogin登陸信息，因此頁面訪問index，頁面會跳轉到login頁面。

總結

路由的使用有多重方式，嵌套路由也有不少種的實現，你們要思路活躍，敢於嘗試新的方法。作一個威武的前端攻城獅！

下一章

1. vux狀態管理

2. 麪包屑導航

3. 菜單欄管理