說明

公司要做人臉識別考勤，需要收集頭像，又要對頭像合法性做校驗(yàn)，所以做了一個頭像審核系統(tǒng)，在這里把邏輯說一下，可謂是麻雀雖小五腑俱全。

初始化項(xiàng)目

1、初始化vue項(xiàng)目

項(xiàng)目名為applyfe，需要vue-router支持，同時安裝element-ui

vue init webpack applyfe //初始化
cd applyfe //進(jìn)入目錄
npm install //安裝依賴
npm install element-ui //安裝后臺組件樣式庫
npm install vue-resource  //安裝ajax請求庫
npm run dev //運(yùn)行

這時候就能看到如下頁面了

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="狀態(tài)" :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、頁面加載數(shù)據(jù)

要在生命周期函數(shù)mounted方法內(nèi)添加以下代碼（此是我公司邏輯，其他人員可以修改加載邏輯，無非一個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: '系統(tǒng)出錯了',
        message: '請刷新頁面重試'
      });
      this.loading = false;
    })

4、響應(yīng)頁面審批函數(shù)

//this.$http...

5、接口認(rèn)證相關(guān)

請求后端接口需要認(rèn)證，所以需要配置跨域代理，修改config/index.js的proxyTable如下：

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

未登錄情況或登錄超時情況下請求接口會返回401數(shù)據(jù)，沒有權(quán)限接口會返回403無權(quán)限數(shù)據(jù)，所以這里對http請求配置了統(tǒng)一的middware，代碼如下：

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

總結(jié)

Vue對中文用戶非常友好，簡單易上手，過去我用php寫業(yè)務(wù)邏輯，jquery處理頁面，現(xiàn)在改用vue也非常順手，狀態(tài)都在js的對象來管理了。