人事管理项目-前端实现

引入Element和Axios

前端UI使用Element，网络请求则使用Axios，因此首先安装Element和Axios依赖，代码如下：
依赖添加成功后，接下来在main.js中引入Element，代码如下：
引入Element之后，接下来就可以在项目中直接使用相关组件了。

对于网络请求，由于在每一次请求时都需要判断各种异常情况，然后提示用户，例如请求是否成功、失败的原因等，考虑到这些判断基本上都使用重复的代码，因此可以将网络请求封装，做成Vue的插件方便使用。由于封装的代码比较长，这里就不贴出来了，读者可以在GitHub上查看，地址为https://github.com/lenve/vhr/blob/master/vuehr/src/utils/api.js。配置完成后，在main.js中导入封装的方法，然后配置为Vue的prototype，代码如下：

配置完成后，接下来对于任何需要使用网络请求的地址，都可以使用this.XXX执行一个网络请求，例如要执行登录请求，就可以通过this.postRequest(url,param)执行。

开发Login页面

接下来在components目录下创建Login.vue页面进行登录页面开发，代码如下：


代码解释：
•　系统登录使用Element中的el-form来实现。同时使用了Element标签提供的校验规则。
•　当用户单击“登录”按钮时，通过this.postRequest方法发起一个登录请求，登录成功后，将登录的用户信息保存到store中，同时跳转到Home页，或者某个重定向页面。

配置路由

登录页面开发完成后，接下来在路由中配置登录页面，代码如下：
另外，由于main.js是入口JS，在main.js中导入了App组件，App组件默认有Vue的Logo，将Logo图片删除，只保留一个即可，修改后的App.vue如下：

配置请求转发

最后，由于前端项目和后端项目在不同的端口下启动，前端的网络请求无法直接发送到后端，因此需要配置请求转发。下面介绍配置方式。
修改config目录下的index.js文件，修改proxyTable，代码如下：
这里配置了两条规则，第一条是配置HTTP请求转发，第二条是配置WebSocket请求转发，WebSocket请求在本项目的即时通信模块中会用到。

启动前端项目

做完这些操作后，接下来打开CMD命令窗口，进入当前项目目录下，执行如下命令启动项目：
如果开发者使用WebStorm开发前端项目，也可以单击WebStorm右上角的下拉按钮（见图-6），然后单击＋，选择npm（见图16-7），配置Name和启动脚本

配置完成后，就可以直接通过单击WebStorm右上角的“启动”按钮启动项目了。当前端项目启动成功后，接下来在浏览器中输入http://localhost:8080，即可看到登录页