一个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的对象来管理了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一日不见如三秋, 度日如年似蜗牛, 三日打鱼两日网, 隔日趁早赴前行。
    A把时间当做朋友阅读 194评论 0 2
  • “欢迎回来,麦克先生。想必您已经体会过烈火灼烧的痛楚,试图毁坏1408的一切行为都是无效的。现在,您仍有权选择继续...
    少衍阅读 1,518评论 0 0
  • 趣味折纸写到双三角形那里就想起了我们童年时玩过的可以跳的青蛙。并以此为主题创作了一幅作品。 先来讲解制作步骤吧! ...
    桃子的小站阅读 1,229评论 2 1
  • 我是克隆人,今天是我的审判日,前些日子我蓄意谋杀了自己的主人,这在当今的世界是不可饶恕的罪行。 01 对克隆人而言...
    等风的叶阅读 1,043评论 7 7
  • 明日计划: 9:30-11:00 加同事微信100 11:00-12:00 打责任盘业主电话 14:00--15:...
    Aileen___琳阅读 225评论 0 0