Element
前端数据的展示使用Element中的表格来实现。在components目录下创建emp文件夹,然后在emp文件夹下创建EmpBasic.vue用来展示前端数据。注意,这里之所以将页面放在emp目录下,是为了配合16.5节提到的菜单数据格式化(在数据格式化时,设置员工资料相关的页面都放在emp目录下)。
EmpBasic.vue核心代码如下:
代码解释:
• 首先在data中定义emps用来存放所有员工的JSON数据,然后定义keywords用来存放查询的关键字。
• 在加载该页面时,在mounted中调用loadEmps初始化员工数据。
另外注意,表格中的日期使用formatDate过滤器实现日期的格式化,formatDate是一个全局过滤器。
formatDate过滤器定义如下:
经过以上几步配置后,读者就可以看到如图
员工资料中的基本资料一项,接口设计规则为“/employee/basic/**”,这是为了和数据库保持一致,防止没有权限的用户拿到请求接口后直接去请求数据。