人事管理项目-员工资料模块前端实现

Element

前端数据的展示使用Element中的表格来实现。在components目录下创建emp文件夹，然后在emp文件夹下创建EmpBasic.vue用来展示前端数据。注意，这里之所以将页面放在emp目录下，是为了配合16.5节提到的菜单数据格式化（在数据格式化时，设置员工资料相关的页面都放在emp目录下）。
EmpBasic.vue核心代码如下：


代码解释：
•　首先在data中定义emps用来存放所有员工的JSON数据，然后定义keywords用来存放查询的关键字。
•　在加载该页面时，在mounted中调用loadEmps初始化员工数据。
另外注意，表格中的日期使用formatDate过滤器实现日期的格式化，formatDate是一个全局过滤器。
formatDate过滤器定义如下：
经过以上几步配置后，读者就可以看到如图
员工资料中的基本资料一项，接口设计规则为“/employee/basic/**”，这是为了和数据库保持一致，防止没有权限的用户拿到请求接口后直接去请求数据。