微型人事管理项目前端总结

本项目参考本文参考自江南一点雨的Spring Boot+Vue系列视频教程第 16 章，详情参加【Spring Boot+Vue系列视频教程】，本项目仓库地址：hr-web

一、前端技术点

Vue

本项目前端基于vue3.0构建，教程基于vue2.x构建，在vue3.0中某些地方与vue2.x存在差异，将在前端问题解决中呈现。本项目主要用了vue的基础功能，可参考官方文档Vue.js，也可参考b站尚硅谷教程。

ElementUI-Plus

Element Plus配合Vue3.0使用，使用中的注意事项：
1、设置语言
Element Plus 组件 默认 使用英语，设置成中文的方式如下。
在main.js头部引入

import zhCn from 'element-plus/es/locale/lang/zh-cn'

将ElementPlus的挂载方式由

app.use(ElementPlus)

改为

app.use(ElementPlus, {
    locale: zhCn,
})

2、Icon使用
npm安装：

npm install @element-plus/icons

在main.js中引入，将所有Icons注册为组件

import * as Icons from '@element-plus/icons'

Object.keys(Icons).forEach(key => {
    app.component(key, Icons[key])
})

在ElementPlus上，图表方案从Font变为SVG，两者的差异：Font 变为 SVG？
使用上的变化：
以Home.vue页面为例，右上角的铃铛图标：

Font引用方式为：

<el-button icon="el-icon-bell" type="text" style="margin-right: 8px;color: #000000;" size="normal" @click="goChat">
</el-button>

SVG引用方式为：

<el-button type="text" style="margin-right: 8px;color: white;" @clck="goChat">
	<el-icon  size="16px" >
		<bell/>
	</el-icon>
</el-button>

基于SVG方式得用el-icon标签将图表标签包裹起来，更多标标签可以访问：Icon Collection

axios

本项目前端利用axios发送和响应请求，定义在src/utils/api.js中，参考教程将请求方法挂到Vue上，以及Vue.js 插件 第四项，在设计中可以把axios请求挂载到Vue上面，方便今后调用，在vue3中用config.globalProperties来添加全局实例方法。
在main.js中用

app.config.globalProperties.postRequest=postRequest
app.config.globalProperties.postKeyValueRequest=postKeyValueRequest
app.config.globalProperties.putRequest=putRequest
app.config.globalProperties.deleteRequest=deleteRequest
app.config.globalProperties.getRequest=getRequest

代替

Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;

VueRoter

VueRoter用于在前端项目中管理路由，相关设置在src/router/index.js中定义，本项目中主要使用VueRoter的导航守卫以及动态路由功能。引入VueRoter4，出现了新的问题，相关现象以及解决措施可以访问：微人事 vue-roter4实现动态加载路由…，VueRouter更多功能，访问VueRouter官网。

Vuex

Vuex用于管理前端项目中的全局变量，方便在前端共享状态，相关设置在src/store/index.js中定义，在本项目中Vuex主要用于保存导航菜单、用户session、用户聊天信息需要注意的是注销当前用户后需将Vuex中的信息置空，Vuex相关使用说明，访问 Vuex官网。

WebSocket

本项目提供一个Hr之间相互聊天的功能，基于WebSocket收发消息，前端需要引入sockjs.js和stomp.js：

npm install sockjs-client
npm install stompjs

在src/store/index.js中引入

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

前端发送WebSocket信息核心代码（位于usertext.vue中）：

//参数一消息接受地址(后端接口) 参数二：消息优先级信息，此处忽略 参数三：消息内容
this.$store.state.stomp.send('/ws/chat',{},JSON.stringify(msgObj));

前端接收WebSocket信息核心代码

    actions:{
        //该方法做websocket连接 (收消息）
        connect(context) {
            //初始化 stomp 对应后台registerStompEndpoints中的...paths
            context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
            //对成功和失败进行处理
            context.state.stomp.connect({},success=>{
                context.state.stomp.subscribe('/user/queue/chat',msg=>{
                   //...详细代码从仓库中获取
            },error=>{
                console.log("发送失败！");
            })//发起连接 ，连接成功的回掉
        }

二、前端问题解决

vue3 v-for中使用ref失效

在页面系统管理/基础信息设置/权限组页面，该页面提供动态修改角色访问资源功能。角色用element-plus的折叠面板展示，内部嵌套访问资源，访问资源用element-plus的树形控件展示，修改角色与资源的关系实质上是更新menu_role表，需要前端向后台发送角色的rid和访问资源的mid。
教程中获取mid是在树形控件中添加ref=“tree”：

<el-tree
        show-checkbox
        node-key="id"
        ref="tree"
        :key="index"
        :default-checked-keys="selectedMenus"
        :data="allmenus" :props="defaultProps">
</el-tree>

通过：

let tree = this.$refs.tree;

获取当前树形控件选中的节点，不过在vue3.0中，使用了v-for渲染，就不能使用ref来获取，查看 迁移策略 v-for 中的 Ref 数组，改进方式如下：
在data中新建treeNode数组：

  data() {
    return {
      treeNode:[],
      ...

methods中加入函数getTree用来向treeNode数组添加元素

    getTree(el) {
      this.treeNode.push(el);
    },

将树形控件与getTree绑定：

:ref="getTree"

视图更新之前将之前的treeNode置空

  beforeUpdate() {
    this.treeNode = []
  }

完整代码访问前端仓库中的src/components/sys/basic/PermissMana.vue

vue.router 4 通配符 * 失效

vue2项目中router.js中为了禁止用户访问指令路径外的页面，使用

 {
  path: '*',
  redirect: '/home'
}

匹配所有路径，重定向至home页面。在vue3项目中router/index.js若这样设置，页面会无法显示，控制台报错：

Catch all routes ("*") must now be defined using a param with a custom regexp.

参考 删除了 *（星标或通配符）路由 修改为：

 {
  path: '/:pathMatch(.*)',
  redirect: '/home'
}

三、新增模块

操作日志管理模块

页面展示：

前端页面提供分页展示、时间区间查询、excel导出，操作日志是后台通过注解+AOP+反射方式获取，具体实现方式可以参考后台代码。此处主要说明前端事项：
一：向后台请求excel文件：
excel导出按钮点击事件调用exportData方法：这里给出两种简单的调用方式，实测均能成功。

    exportData(){
      // window.open('/oplog/export','_parent')
      location.href='/oplog/export'
    }

二：用户操作参数处理：
用户输入的操作参数种类繁杂，为了统一显示效果，在前端定义了substring方法将参数屏蔽，若需查看参数，可以导出excel文件查看。

    substring(data) {
      let da = data.data;
      for (let i = 0; i < da.length; i++) {
        let index = da[i].operate.indexOf('[');
        if(index == -1)  continue;
        // console.log("index:"+index)
        da[i].operate = da[i].operate.substring(0,index);
      }
      this.logData = da;
    }

三：日期时间选择器时间格式处理
日期时间选择器默认返回的是一个Date数组，考虑到员工资料/基本资料中的高级搜索功能涉及到入职日期的范围查询，那里的时间精确到天即可，而操作日期需要的时间较为精确，为了在后台方便对时间格式进行处理，此处在日期时间选择器中通过value-format="YYYY-MM-DD HH:mm:ss"将时间数据设置成精确到秒后两位小数的字符串数组。在后台DateConverter类中进行转换。