业务后台商业组件ViewUI（iView）入门

1 安装View UI组件

1.1 什么是View UI

后台管理信息系统（MIS）是软件开发的一个重要领域，如OA、ERP、商城后台等等都属于MIS系统。业务人员需要在MIS系统中操作大量的表单和数据，传统的服务器（同步）页面伴随着大量刷新，用户体验很差，所以开发界喜欢选择以vue为代表的新一代前后端分离技术以实现流程的操作。

在MIS系统开发中，需要大量的表单、表格、日历、选项卡等复杂组件来完成业务功能，这些组件实现起来都比较复杂，作为普通程序员，一般会选择现成的商业组件。

业界比较成熟的后台商业组件主要有：Element UI、View UI 和 Ant Design，这些组件的功能和使用方式都大同小异，这里介绍View UI给大家使用。

官网：iView - A high quality UI Toolkit based on Vue.js

View UI的前身是iView，至今已经是4.0版，由于最新版引入了商业模式，因此代码更新较快。

1.2 安装View UI

官方的安装教程：https://www.iviewui.com/docs/guide/install

为vue项目安装View UI组件有很多方式，这里使用最简便得方法，就是直接使用vue-cli得ui向导来完成安装。新版得vue-cli不仅可以通过命令行来完成项目创建，还可以通过web可视化方式创建，View UI可以作为vue-cli的插件添加到项目中。

（1）使用vue-cli可视化项目管理器

在命令行中输入以下指令：

vue ui

（2）添加插件：axios 和 view-ui

 

 完成上述操作后，一个包含view-ui插件库的vue工程就创建好了，正常进入项目目录执行：

npm run serve

2 项目布局：

2.1 栅格系统

类似BootStrap中的12栅格系统，View UI通用把页面分为行（Row）和列（Col），使用24栅格进行布局。

官方的栅格教程：https://www.iviewui.com/components/grid

2.2 设置路由：

（1）分层次创建组件

（2）设置父子级别路由： 

const routes = [
2
    {
3
      path: '/',
4
      name: 'home', 
5
      component: Home,
6
      children:[
7
        {
8
          path:'/',
9
          name:'default',
10
          component:Default,
11
          meta:{
12
            title: '后台首页'
13
          }
14
        },
15
        {
16
          path:'/categories',
17
          name:'categories',
18
          component:Categories,
19
          meta:{
20
            title: '分类管理'
21
          }
22
        },
23
        {
24
          path:'/products',
25
          name:'products',
26
          component:Products,
27
          meta:{
28
            title: '商品管理'
29
          }
30
        },
31
      ]
32
    },
33
    {
34
      path:'/login',
35
      name:'login',
36
      component:Login
37
    }
38
  ]

2.3 布局

业务系统通常由比较严谨的布局，View UI为我们准备好了多种布局风格，这里使用“顶部-侧边布局”作为示例：

​​​​​​https://www.iviewui.com/components/layout#DB-CBBJ

11

78

3 常见组件的使用：

3.1 Table - 数据表格

表格组件通过columns属性绑定列，通过data属性绑定行数据。以分类管理组件（Categories.vue）为例：

  
2
      
6
    

背后绑定的数据：

export default {
2
  name:'categories',
3
  data(){
4
    return {
5
      columns:[
6
        {title:'分类ID', key:'id'},
7
        {title:'分类名称', key:'name'},
8
        {title:'操作', slot:'operation', align: 'center'}
9
      ],
10
      categories:[]
11
    }
12
  },

其中 coloumns中每一个对象代表一个列，title是列标题，key是该列绑定的对象属性名。

如果列中由其它组件组成，则可以定义为插槽（slot），让后再通过Table组件中的模板（template）去定制slot中的结构。

template中的slot属性需要和columns中对用列的slot属性向对应，template中的slot-scope则用于定义Table向slot中传入的上下文数据。

3.2  Form - 表单组件

表单组件可以绑定数据和数据校验。以登录组件（Login.vue）为例：

（1）Form的 :model="user" 用于设置绑定对象，:rules="ruleValidate" 用于设置绑定验证；

（2）其中FormItem的 prop="username" 用于指定当前项需要验证的属性名，即ruleValidate中的属性名；

（3）为了方便调用验证，我们使用 ref="loginForm" 为表单对象设置了引用名，于是下面的代码可以通过 “this.$refs['loginForm'].validate( (valid)=>{...} )” 来显式调用表单验证。

3.3 Modal - 模态框

模态框可以通过简单的布尔属性绑定实现显示和隐藏。继续实现分类管理（Categories.vue）中的分类信息编辑功能：

4
      

5
          
6
          
7
              
8
          
9
      
10
      

11
          取消
12
          保存
13
      
14
     

以下是分类编辑的代码，值得注意的是：

vue是支持双向绑定的，如果编辑对象是既显示在Table中，又可以被Form元素修改，则会产生联动问题，即使最终放弃了Form中的变更，也会导致Table中的数据发生变化，因此需要克隆一份数据副本进行修改。

export default {
2
  name:'categories',
3
  data(){
4
    return {
5
      ......
6
      showModal: false,
7
      editCategory:{},
8
      editValidate:{
9
        name:[{required:true, message:'请填写分类名称', trigger:'blur'}],
10
      }
11
    }
12
  },
13
  methods:{
14
    ......
15
    saveCategory(){     //保存编辑信息
16
      this.$refs['categoryForm'].validate( valid=>{
17
        if(valid){
18
          this.axios.post('/api/admin/categories', this.editCategory).then(()=>{
19
            this.editCategory = {};
20
            this.showModal = false;
21
            this.loadCategories();
22
          });
23
        }
24
      });
25
    },
26
    showEdit(item){ //弹出编辑框并传入编辑数据
27
      if(item){
28
        this.editCategory = JSON.parse(JSON.stringify(item)); //克隆副本再做绑定
29
      }else{
30
        this.editCategory = {};
31
      }
32
      this.showModal = true;
33
    }
34
  }
35
}

4 客户端权限：为路由设置拦截器

为了避免未登陆用户能访问后台页面，我们需要为后台路由设置守卫（拦截器）。利用router中的beforeEach事件钩子，我们可以添加守卫。

（1）在程序入口router/index.js中添加路由钩子

import UserInfo from '@/js/UserInfo.js'
2
const userInfo = new UserInfo()
3
......
4
//设置路由拦截
5
router.beforeEach((to, from, next) => {
6
  if (to.meta.anonymous) {  // 判断该路由是否允许匿名访问
7
    next();
8
  }
9
  else {
10
    if (userInfo.isLogin()) {  // 检查是否已登录，已登录继续
11
      next();
12
    }
13
    else {
14
      next({
15
          path: '/login',
16
          query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，保留被拦截路径URL
17
      })
18
    }      
19
  }
20
});

（2）在路由设置router.js中，允许匿名访问的路由项（比如 "/login"），添加meta自定义属性标识（比如"anonymous:true"）

 const routes = [
2
    ......
3
    {
4
      path:'/login',
5
      name:'login',
6
      component:Login,
7
      meta:{
8
        anonymous:true      //添加标识符，允许匿名
9
      }
10
    }
11
  ]

附：解决eslint语法报错“Parsing error: x-invalid-end-tag”问题。

问题原因：vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。

解决办法：在“.eslintrc.js” 配置文件的rules配置节中添加“'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]”

module.exports = {
2
  ......
3
  rules: {
4
    ......
5
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }] 
6
  },
7
}
8