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. 菜单栏管理