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预处理器的使用，可以提高效率。

 

　　好了，就总结到这里了，还是需要不断学习才行的。