Vue实战狗尾草博客管理系统第二章

时间 2019-11-10

标签 vue 实战狗尾草博客管理系统第二繁體版

原文原文链接

伙伴们出来啦，探讨各问题，关于项目中大量的表单，你们是怎么处理的？css

本章主要内容以下：底层布局，路由配置，github仓库推送关联。前端

关联GitHub仓库

关联创建在github已建立帐号的基础上vue

登陆本身的Github帐号node
新建项目
而后根据本身的状况添加名称和描述
新建完成后，咱们只须要按照提示的信息一步一步完成便可
复制命令行到项目终端，回车便可实现推送。
为了验证推送的readme.md文件咱们刷新github，便可看到本身添加的readme文件已经才存在仓库之中，下来咱们就须要添加项目中的主要文件了git

依次执行如下命令github

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

推送成功后，再次刷新github，便可看到本身的项目被推送到了仓库之中。vue-router

这里须要注意的是，项目中会有一个.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的这种实现底层也是经过嵌套路由这一思路实现的。这里就很少作阐述。babel

实现的思路：

搭建layout布局模板。除了登陆，404，报错等其余页面都须要使用

搭建路由，layout布局模板为一级路由，首页，文章等大多页面都写在layout一级路由的二级中(children)，

登陆，404，报错路由则写在和layout布局同级。

这就是一个基本的流程啦。走你~

咱们在src文件夹下新建pages文件夹，主要存放咱们的主要组件。新建home文件夹，home文件夹下新建index.vue组件随便写点什么。
```
<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>

布局文件有了，但怎么使用嘞？继续走

打开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，可是咱们尚未建立，因此咱们须要跟进一下，建立一个登陆页面。

pages>login>index.vue

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

</style>

随后保存，这里咱们的底层的布局就算搞定了，随后的404和报错的页面都和登陆页面同样在路由中配置便可。

检测一下~

打开项目启动的地址，能够看到默认访问的是咱们的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。 *

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字段，因此认为没有登陆，他就会跳转到登陆页面，让咱们去登陆。

固然路由远比咱们想一想的拥有更多的功能，路由分为静态路由和动态路由，模式也有划分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页面。

总结

路由的使用有多重方式，嵌套路由也有不少种的实现，你们要思路活跃，敢于尝试新的方法。作一个威武的前端攻城狮！

vux状态管理
面包屑导航
菜单栏管理