人事管理系统的开发与设计
现如今，计算机网络技术已经渗透到社会主义经济建设和人类的生活中，其对人的影响力已经密不可分，人们对互联网的依赖也日益增生。互联网的自动化功能成为一种高效的处理问题的技术，旨在帮助人们实现信息的展示、交流和分享。新时代的发展逐步代替传统落后的管理方式。各类企业、工厂及单位更倾向于用高效率的机器取代低质量的人力，用最小的成本来获取更大的收益。利用互联网技术来实现公司的人事管理系统无疑是最好的选择。为内部人员工作提供更加方便，更加快捷的工作环境，让工作人员在用较少的时间来完成更多的工作。让我们从冗杂的书面工作跳出来。人事管理系统通过对员工信息的增删查改，考勤记录以及薪资的发放，省去了以往游走于不同部门信息确认的环节，轻轻松松登入网站，查询自己所需信息，既方便他人，也方便自己。简单的一个资料录入，便可为新进员工的信息完成初步的登记。运用查看、删掉或修正的操作对需要的内容实行更改。本论文对整个系统的操作及提供的资料有了周详的解说。运用vue.vuex,webpack，mock.js,vue.router，工具有webstorm git等方面的技术。本课题主要介绍了人事管理系统开发的构思和背景介绍，系统设计的思想和使用技术，对其功能的说明。
目录
一、 绪论 1
（一） 人事管理系统开发背景 1
（二） 人事管理系统开发意义 1
（三） 设计目标 1
（四） 开发软件 1
二、 系统分析与设计 3
（一） 系统功能分析 3
（二） Mock.js 3
（三） 开发及运行环境 3
三、概要设计 5
（一）基本设计和处理流程 5
（二）系统功能模块图 6
（三）系统功能结构 7
四、系统具体实现 8
（一） 登陆 8
（二） 首页 12
（三） 人力资源计划 14
（四） 薪资与福利 22
（五） 考勤记录 23
五、结束语 27
致谢 28
绪论
人事管理系统开发背景
互联网的不断普及，使全世界各种类型的使用者急剧增加，互联网产业已占领 *好棒文|www.hbsrm.com +Q: ^351916072#
经济发展举足轻重的地位，社会各界为了开展线上销售之路，建造出更加完整的系统。随着时代的发展，每个产业在使用网络技术的时候，选择好的东西借鉴，根据自身发展写出适合自己特色的管理体系。互联网人才巧妙运用求同存异方针，及实现有自己特色主义的管理体系，又不脱离整个互联网这个大家庭。
人事管理系统开发意义
企业的运行跟人们的劳作息息相关，但如果没有完善的管理系统，企业将犹如一盘散沙，无头苍蝇，群龙无首。如果坚持使用以往陈旧的管理方式，无疑会拖慢工作进程，我们将引进先进的互联网技术，利用网络实现企业上至中高层，下至低层人民，甚至是临时工，都登记在册，无疑省去了人力，节约了时间，让管理效率更加出成绩。
设计目标
本课题命名“人事管理系统的开发与设计”，系统分为登陆、首页、人力资源计划、薪资与福利、考勤记录等五大模块。主要负责员工通过输入用户名和密码登录网站，对于不存在的员工给予提示。 通过点选板块的形式展示的类别，选中之后明细模块自动变更成当前分类信息，根据自己的账户信息，查询相关的考勤信息。实现对员工信息资料的添加、删除去、查找、修正。实现对员工工资及其应享福利的查询。对于员工上下班考勤信息的查询。
开发软件
1.Vue.vuex
他可以由下到上逐层的运用，它主要在视图层进行观看操作，可以和第三方的项目搭建。可以和各类不同的库合作使用，更加方便、快速。
1.Webpack
WebPack根据不同的模块进行分析它的项目结构，使JavaScript模块在不兼容的网站网页内把其语言转换成适应的格式进行用。
2.Vue.router
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
3.WebStorm git
远程仓库类：git clone/remote/pull/push/rebase/fetch
分支类（包括tag）：git branch/tag/checkout/stash
信息查阅：git status/log/diff
本地常规操作：git add/commit/rm/merge/reset
系统分析与设计
系统功能分析
人事管理系统是公司对于员工信息及工作质量的考核结果的展示，其设计的板块及功能如下所示：
1.登录
通过输入正确的用户名及密码，来进入系统。假设用户名和密码任意一个输入错误，将被系统拒之门外。
2. 人事信息的调整
对于员工信息的查看，添加，除去，调整，尽可能的方便相关人员对工作的安排。
3.可行性分析
从技术上来谈，vue.vuex和webstorm git更加方便地构造人事管理系统，实现各模块间的交互。
从页面的美化程度说Element更能够吸引人的注意，页面简洁大方。
Mock.js
数据类型丰富
支持生成随机的色彩、布尔值、数值、文字、时间、邮箱、超链、图像等。
拦截 Ajax 请求
Mock.mock(url, type, data)
参数名
参数需求
参数描述
例子
url
可选: URL 字符串或 URL 正则
拦截请求的地址
/mock
type
可选
拦截Ajax类型
GET、POST
template
可选: 可以是对象或字符串
生成数据的模板
{data|110:[mock] }、@EMAIL
表1 Mock.mock(url, type, data)
开发及运行环境
1.开发环境
系统的技术支持:JavaScript、Vue.js
开发平台：SeStorm
操作系统：Window 10
2.运行环境
服务器：Node.js、Mock.js,本地运行
客户端：Chrome等浏览器
三、概要设计
（一）基本设计和处理流程
目录
一、 绪论 1
（一） 人事管理系统开发背景 1
（二） 人事管理系统开发意义 1
（三） 设计目标 1
（四） 开发软件 1
二、 系统分析与设计 3
（一） 系统功能分析 3
（二） Mock.js 3
（三） 开发及运行环境 3
三、概要设计 5
（一）基本设计和处理流程 5
（二）系统功能模块图 6
（三）系统功能结构 7
四、系统具体实现 8
（一） 登陆 8
（二） 首页 12
（三） 人力资源计划 14
（四） 薪资与福利 22
（五） 考勤记录 23
五、结束语 27
致谢 28
绪论
人事管理系统开发背景
互联网的不断普及，使全世界各种类型的使用者急剧增加，互联网产业已占领 *好棒文|www.hbsrm.com +Q: ^351916072#
经济发展举足轻重的地位，社会各界为了开展线上销售之路，建造出更加完整的系统。随着时代的发展，每个产业在使用网络技术的时候，选择好的东西借鉴，根据自身发展写出适合自己特色的管理体系。互联网人才巧妙运用求同存异方针，及实现有自己特色主义的管理体系，又不脱离整个互联网这个大家庭。
人事管理系统开发意义
企业的运行跟人们的劳作息息相关，但如果没有完善的管理系统，企业将犹如一盘散沙，无头苍蝇，群龙无首。如果坚持使用以往陈旧的管理方式，无疑会拖慢工作进程，我们将引进先进的互联网技术，利用网络实现企业上至中高层，下至低层人民，甚至是临时工，都登记在册，无疑省去了人力，节约了时间，让管理效率更加出成绩。
设计目标
本课题命名“人事管理系统的开发与设计”，系统分为登陆、首页、人力资源计划、薪资与福利、考勤记录等五大模块。主要负责员工通过输入用户名和密码登录网站，对于不存在的员工给予提示。 通过点选板块的形式展示的类别，选中之后明细模块自动变更成当前分类信息，根据自己的账户信息，查询相关的考勤信息。实现对员工信息资料的添加、删除去、查找、修正。实现对员工工资及其应享福利的查询。对于员工上下班考勤信息的查询。
开发软件
1.Vue.vuex
他可以由下到上逐层的运用，它主要在视图层进行观看操作，可以和第三方的项目搭建。可以和各类不同的库合作使用，更加方便、快速。
1.Webpack
WebPack根据不同的模块进行分析它的项目结构，使JavaScript模块在不兼容的网站网页内把其语言转换成适应的格式进行用。
2.Vue.router
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
3.WebStorm git
远程仓库类：git clone/remote/pull/push/rebase/fetch
分支类（包括tag）：git branch/tag/checkout/stash
信息查阅：git status/log/diff
本地常规操作：git add/commit/rm/merge/reset
系统分析与设计
系统功能分析
人事管理系统是公司对于员工信息及工作质量的考核结果的展示，其设计的板块及功能如下所示：
1.登录
通过输入正确的用户名及密码，来进入系统。假设用户名和密码任意一个输入错误，将被系统拒之门外。
2. 人事信息的调整
对于员工信息的查看，添加，除去，调整，尽可能的方便相关人员对工作的安排。
3.可行性分析
从技术上来谈，vue.vuex和webstorm git更加方便地构造人事管理系统，实现各模块间的交互。
从页面的美化程度说Element更能够吸引人的注意，页面简洁大方。
Mock.js
数据类型丰富
支持生成随机的色彩、布尔值、数值、文字、时间、邮箱、超链、图像等。
拦截 Ajax 请求
Mock.mock(url, type, data)
参数名
参数需求
参数描述
例子
url
可选: URL 字符串或 URL 正则
拦截请求的地址
/mock
type
可选
拦截Ajax类型
GET、POST
template
可选: 可以是对象或字符串
生成数据的模板
{data|110:[mock] }、@EMAIL
表1 Mock.mock(url, type, data)
开发及运行环境
1.开发环境
系统的技术支持:JavaScript、Vue.js
开发平台：SeStorm
操作系统：Window 10
2.运行环境
服务器：Node.js、Mock.js,本地运行
客户端：Chrome等浏览器
三、概要设计
（一）基本设计和处理流程
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wljs/261.html
