说明
公司要做人脸识别考勤，需要收集头像，又要对头像合法性做校验，所以做了一个头像审核系统，在这里把逻辑说一下，可谓是麻雀虽小五腑俱全。
初始化项目
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的对象来管理了。
