一个Vue头像审核页面

说明

公司要做人脸识别考勤，需要收集头像，又要对头像合法性做校验，所以做了一个头像审核系统，在这里把逻辑说一下，可谓是麻雀虽小五腑俱全。

初始化项目

1、初始化vue项目

项目名为applyfe，需要vue-router支持，同时安装element-ui

vue init webpack applyfe //初始化
cd applyfe //进入目录
npm install //安装依赖
npm install element-ui //安装后台组件样式库
npm install vue-resource  //安装ajax请求库
npm run dev //运行

这时候就能看到如下页面了

Paste_Image.png

2、页面使用element-ui组件和resource库

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueResource from 'vue-resource'
Vue.use(Element)
Vue.use(VueResource)

3、增加路由表

修改原来的router.js文件如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Apply from '@/components/Apply'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/apply',
      name: 'apply',
      component: Apply
    }
  ]
})

2、编写自己的审批列表table页面

编写一个apply.vue审核页面，先把样式和布局搞上，代码如下：

<template>
  <div class="page-operation">
    <h2>待审核头像列表</h2>
    <el-table :data="applies" stripe style="width: 100%; margin-bottom: 20px;">
      <el-table-column property="id" label="记录ID" :sortable="true" align='left' width="200">
      </el-table-column>
      <el-table-column property="name" label="申请人" :show-tooltip-when-overflow="true" width="180" align='left'>
      </el-table-column>
      <el-table-column property="description" label="头像" :show-tooltip-when-overflow="true" align='left'>
      </el-table-column>
      <el-table-column property="status" label="状态" :show-tooltip-when-overflow="true" align='left'>
      </el-table-column>
      <el-table-column label="审批" inline-template align='center' width="250">
        <span class='wrapper-right'>
          <el-button @click.native="approve(row, 3)" size="small" type="danger" icon="delete">不通过</el-button>
          <el-button @click.native="approve(row, 2)" size="small" icon="edit">通过</el-button>
        </span>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.page-operation {
  border: 1px solid #eaeefb;
  padding: 0 20px;
}
</style>

<script>
export default {
  name: 'apply',
  data () {
    return {
      applies: []
    }
  },
  method: {
    approve: function(apply, status) {

    }
  },
  mounted: function() {
  }
}
</script>

3、页面加载数据

要在生命周期函数mounted方法内添加以下代码（此是我公司逻辑，其他人员可以修改加载逻辑，无非一个ajax）：

    this.$http.get('/attendance/apply/applies').then((response) => {
      if(response.body.code == 200){
        this.applies = response.body.data;
      }else if(response.body.code == 403){
      }else{
        this.$notify.error({
          title: '获取待审核头像失败，请刷新',
          message: response.body.msg
        });
      }
      this.loading = false;
    }, (response) => {
      this.$notify.warning({
        title: '系统出错了',
        message: '请刷新页面重试'
      });
      this.loading = false;
    })

4、响应页面审批函数

//this.$http...

5、接口认证相关

请求后端接口需要认证，所以需要配置跨域代理，修改config/index.js的proxyTable如下：

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

未登录情况或登录超时情况下请求接口会返回401数据，没有权限接口会返回403无权限数据，所以这里对http请求配置了统一的middware，代码如下：

Vue.http.interceptors.push((request, next) => {
  next((response) => {
    if(response.body.code == 403){
      Notification.warning({
        title: '您没有权限',
        message: response.body.msg
      });
    }
    if(response.body.code == 401){
      window.location = 'http://passport.domain.com:8080/login';
    }
    return response;
  });
});

总结

Vue对中文用户非常友好，简单易上手，过去我用php写业务逻辑，jquery处理页面，现在改用vue也非常顺手，状态都在js的对象来管理了。