《中小企业人事管理Web系统设计与实现》11000字（论文）

中小企业通用人事管理Web系统设计与实现摘要人事管理是数字办公系统的重要组成内容，本文利用Vue2、ElementUI、Mysql和Php等工具设计并实现了一套适用于中小型企业的完整的请销假系统。包含部门管理、部门人员分配管理、人员账户管理、通知公告管理、请假规则管理、请假流程管理、销假规则管理、销假流程管理、工作时长及人员薪资报表统计和分析等功能。使得中小型企业对于人事的管理变得非常的便利。该系统包含首页、系统管理、个人档案以及管理员审批四个模块。根据不同的权限，用户将看到不同的页面，在首页模块用户将看到发布的通知公告以及请销假的处理流程等；管理员可以系统管理模块对公司得部门职位以及所有用户进行维护管理；而个人档案也是该系统最重要的一个模块，请假销假的申请会在该模块完成操作；其次就是管理员审批模块，该模块供管理员用户对用户请假销假的申请进行审批。关键词：人事管理，中小企业，企业管理，人力资源管理目录TOC\o"1-3"\h\u18887第1章绪论 第1章绪论1.1课题研究的背景伴随着改革开放持续的深入发展，现代企业更加的注重人力资源[1]的管理工作，特别是其在企业的发展策略上的作用，人力资源[1]早已成为现代企业重要的战略上的资源，人力资源的管理角色也已从简单的职级管理渐渐的演变成综合管理，以前的人事管理主要任务就是做事，再具体一些的事情就是控制人，人被当作是一种成本和工具，更看重的是如何最大化的降低成本从而提高企业的收益。相反地，现代人力资源管理更关心的是人本身以及人于人之间的关系、人于组织的关系，更看重的是如何发挥人员的主观能动性，让员工不自觉地发挥出他的最大作用，从而进一步地推动企业的发展。除此之外，人力资源工作还在人力资源管理的活动实践中加入了以前并不具体的企业文化里的价值观[2]。而该课题就是为了制定一套适用于中小型企业的完整的请销假系统[3]，该系统将包含部门管理、部门人员分配管理、人员账户管理、通知公告管理、请假规则管理、请假流程管理、销假规则管理、销假流程管理、工作时长及人员薪资报表统计和分析等功能。使得中小型企业对于人事的管理[4]变得非常的便利。1.2课题研究的现状及发展趋势随着现代信息技术的飞速发展，信息资源越来越丰富。同时，它可以收集、集成、处理和存储这些数据和信息，并最终生成大量数据。公司人力资源部可以通过广泛的数据系统处理相关信息和数据，不断提高工作效率。然而，公司已经进入了一个快速发展的阶段：公司的人事管理对数据的要求越来越高，这不仅增加了相应的工作量，也给管理人员的需求增加带来了困难，工作量逐渐增加。幸运的是，互联网技术可以用来处理相关数据。最终，相关员工会使用这些数据，这可以为公司的一些重要决策提供强有力的信息支持。此外，大数据的使用也可以管理人力资源的动态，因此加强内部人力资源管理[5]应该标准化。在互联网[6]的背景下，企业的传统商业模式发生了重大变化，尤其是互联网技术的应用，为企业发展创造了新的方向。完善的人力资源管理将使公司的发展实现质的飞跃。在系统设计时，采用了BS[7]技术，队列端采用了Vue[8]等技术，并设计实现了数据库功能。Vue具有轻量级[9]框架、双向数据绑定、安装、数据和结构分离、虚拟DOM、高运行速度等优点。此外，Vue是一种单向应用程序[10]，可以在本地更新页面，而无需每次跳转到页面时使用所有DOM数据，从而大大提高了访问速度和用户体验。此外，第三方用户界面库节省了大量开发时间，因此最好将视图用作首页。PHP[11]也在后台使用。它是一种强大的CGI编程语言[12]。新语法结合了C、Java、Perl和PHP。该网站的启动速度比CGI、Perl和ASP快，后者是第一个主要功能。此外，PHP具有良好的透明度和可移植性。它属于自由软件，其源代码是完全开放的。任何程序员都可以轻松地扩展其他PHP函数。PHP支持各种主要和非主要数据库[13]，如adabasD、DBA、DBA、FilePro、Informix、InterBase、mqmysql[14]、Oracle。1.3课题研究的目的和意义而该课题就是为了制定一套适用于中小型企业[15]的完整的请销假系统，该系统将包含部门管理、部门人员分配管理、人员账户管理、通知公告管理、请假规则管理、请假流程管理、销假规则管理、销假流程管理、工作时长及人员薪资报表统计和分析等功能。使得中小型企业对于人事的管理变得非常的便利。这个话题对企业管理和企业管理都非常重要。公司治理的重要性[16]主要体现在以下几个方面：第一，它可以确保公司活动的顺利进行；第二，在降低各种成本和消耗的基础上实现利润最大化；第三：调动员工的工作积极性，能够主观地献身于工作。企业文化的重要性主要体现在以下几个方面：企业文化是企业发展的凝聚剂和催化剂，起着凝聚力、领导力和员工工具的作用。做好人事管理工作有助于建立和加强企业文化。良好的企业文化[17]可以增强公司员工之间的凝聚力，让员工感到快乐。它可以让员工进行自我管理，降低管理成本和运营风险，最终实现公司运营效益的最大化。1.4本课题对社会、环境和可持续发展的影响该课题是为了制定一套适用于中小型企业的完整的请销假系统，该系统利用Vue2[18]、ElementUI、Mysql[19]和Php等工具设计并实现。包含部门管理、部门人员分配管理、人员账户管理、通知公告管理、请假规则管理、请假流程管理、销假规则管理、销假流程管理、工作时长及人员薪资报表统计和分析等功能。使得中小型企业[20]对于人事的管理变得非常的便利。且该系统不会对环境造成直接或间接污染，更有利于社会的可持续发展，对现代社会的企业管理提供了非常便捷、有效的帮助。第2章需求分析2.1系统需求分析从总体上考虑，本项目会有以下几个模块：用户的登录模块。用户分为普通用户和管理员用户，普通用户的账号是通过管理员来添加与维护的，添加后的账户，默认密码为12345678，需要用户登录后自行在首页进行密码修改。账户即为用户的工号。输入账号密码后会先去数据库判断账号密码是否正确，若正确则会返回其一个随机token，根据token会再去数据库获取该用户的权限和基本用户信息，所以普通用户和管理员用户看到的页面是不一样的。首页模块。登录成功后的用户会自动跳转到首页，普通用户和管理员用户都会在首页看到通知公告的内容，该用户的请假天数和一些其他基本模块，以及修改密码的功能，而管理员用户会在首页多看到一个流程中心的模块，该模块用来查看请假销假的待办和已办事项。系统管理模块。该模块只有管理员用户能看到，有组织架构、账号管理、维护信息、查看考勤四个页面，其中组织架构为公司部门和职位的管理与维护。账号管理为公司所有员工账号的管理与维护，维护信息是用来对公司所有用户进行管理与维护，查看考勤可以查看所有用户的考勤情况和请假销假的一些详情。个人档案模块。该模块有我的信息、我的请假、我的销假、我的考勤、通知公告五个页面。其中我的信息为用户自己的个人信息的详情页，需要用户自己完善与维护。我的请假和我的销假页面是该系统核心的两个页面，用来发起请假销假请求的，可以看到请假销假审核的状态。我的考勤也是用户自己的出勤情况，可以看到自己出勤的情况。最后通知公告页面只有管理员用户可以看到，该页面供管理员用户发布公告，最终公告内容会在首页展示出来。审批模块。这个模块也是只有管理员能看到，用来对用户的请假销假请求进行审批与驳回操作。2.2业务需求分析2.2.1技术及开发方法可行性本系统在设计方面采用B/S模式，该课题前端页面使用Vue全家桶完成搭建与绘制。Vue具有轻量级框架、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优点，而且Vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和DOM，这样大大加快了访问速度和提升用户体验。而且他的第三方UI库ElementUI节省了大量的开发时间，所以前端页面使用Vue是再合适不过的了。后端也是采用到了PHP，它是一种强大的CGI脚本语言，语法混合了C、Java、Perl和PHP式的新语法，执行网页比CGI、Perl和ASP更快，这是它的第一个突出的特点，而且PHP具有很好的开放性和可扩展性，它属于自由软件，其源代码完全公开，任何程序员为PHP扩展附加功能非常容易，数据库支持也非常的好，PHP支持多种主流与非主流的数据库，如AdabasD、DBA、dBase、dbm、filePro、Informix、InterBase、mSQMySQL、oracle等。数据库采用的是MySQL数据库，目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，使得很多公司都采用MySQL数据库以降低成本。2.2.2社会可行性在互联网的背景下，公司的传统运营方式发生了重大变化，尤其是互联网技术的使用，这使得公司能够开创一种新的趋势。改进人力资源管理必将使公司的发展实现质的飞跃。2.3业务流程分析用户访问该系统首先看到的是登录页面，需要先进行登陆操作，若账号或密码输入错误，则会提示需要重新输入登录，如果刚入职的用户没有账号密码，则需要告知HR对新员工的账号进行添加维护，普通用户登录后可以看到首页模块和个人档案模块，而管理员用户除了可以看到首页模块外还可以看到系统管理模块和审批模块。普通用户业务流程如图2-1，管理员用户业务流程如图2-2。图2-1普通用户业务流程图2-2管理员用户业务流程第3章系统总体设计3.1系统总体架构设计本课题是为了制定一套适用于中小型企业的完整的请假销假OA系统，该系统包含首页模块，系统管理模块，个人档案模块与审批模块。具有部门管理、部门人员分配管理、人员账户管理、通知公告管理、请假规则管理、请假流程管理、销假规则管理、销假流程管理、工作时长及人员薪资报表统计和分析等功能。使得中小型企业对于人事的管理变得非常的便利。图3-1系统功能模块图用户的登录模块。用户分为普通用户和管理员用户，管理员是根据职位绑定的，默认管理员的职位是HR，HR可以为其他职位分配管理员权限。普通用户的账号是通过管理员来添加与维护的，添加后的账户，默认密码为12345678，需要用户登录后自行在首页进行密码修改，且密码必须是8到14个字符，英文、数字、特殊符号（!@#$%^&*）组成。账户即为用户的工号。输入账号密码后会先去数据库判断账号密码是否正确，若正确则会返回其一个随机token，根据token会再去数据库获取该用户的权限和基本用户信息，所以普通用户和管理员用户看到的页面是不一样的.首页模块。登录成功后的用户会自动跳转到首页，普通用户和管理员用户都会在首页看到通知公告的内容，该用户的请假天数和一些其他基本模块，以及修改密码的功能，而管理员用户会在首页多看到一个流程中心的模块，该模块用来查看请假销假的待办和已办事项。系统管理模块。该模块只有管理员用户能看到，有组织架构、账号管理、维护信息、查看考勤四个页面，其中组织架构为公司部门和职位的管理与维护页面，在该页面可以看到公司部门与职位的从属关系，以及每个职位的权限等信息；账号管理为公司所有员工账号的管理与维护的页面，在该页面可以看到所有用户的基本账户信息，看不到详细信息；维护信息是用来对公司所有用户进行管理与维护的页面，在该页面可以看到所有用户的详细信息；查看考勤可以查看所有用户的考勤情况和请假销假的一些详情。个人档案模块。该模块有我的信息、我的请假、我的销假、我的考勤、通知公告五个页面。其中我的信息为用户自己的个人信息的详情页，新创建的账户只会有一些用户的基本信息，所以需要用户自己完善与维护；我的请假和我的销假页面是该系统核心的两个页面，用来发起请假销假请求的，可以看到请假销假审核的状态以及审批或驳回的理由；我的考勤也是用户自己的出勤的详情页面，可以看到自己出勤的情况以及用户请假销假的基本信息描述；最后通知公告页面只有管理员用户可以看到，该页面供管理员用户发布公告，最终公告内容会在首页展示出来。审批模块。这个模块也是只有管理员能看到，用来对用户的请假销假请求进行审批与驳回操作，若驳回的话必须填写驳回理由。3.2数据库设计数据库设计是指对于一个给定的应用环境，构造优化的数据库逻辑模式和物理结构，并据此建立数据库以及应用程序，使之能够有效地存储和管理数据，满足各种用户的应用需求，包括信息管理要求和数据操作要求。3.2.1数据库需求分析通过上文对需求以及系统总体设计的分析，分析出此系统需要用户表，用户信息表，部门表，职位表，职位权限表，用户请假表，用户销假表，公告通知表以及休假表。3.2.2各个模块的E-R图设计实体-联系图（E-R图），是用来表示现实世界和概念模型之间关系的图。图3-2E-R图3.2.3关系模型根据上述E-R图可以得到以下的关系模型：A.普通用户（工号，用户名，密码，权限）B.管理员（工号，用户名，密码，权限）C.请假单（请假单号，请假时间，请假原因）D.销假单（销假单号，销假时间，销假原因）E.部门（编号，名称）F.职位（编号，名称，权限，部门）G.用户信息（基本信息）H.公告通知（编号，内容）3.2.4数据库表设计通过关系模型，可以转换为数据库表，如下所示：表3-1数据表及其用途ID数据表名称数据表用途1用户表保存用户的账户等基本信息2部门表保存公司部门的信息3职位表保存公司职位的信息456789请假表销假表公告通知表用户信息表职位权限表休假表保存用户请假的基本信息保存用户销假的基本信息保存管理员发布的公告通知信息保存公司所有员工的基本信息保存职位对应的权限信息保存公司的休假日期表3-2至表3-10给出了本项的9个数据表的具体描述，包括字段名称、数据类型、约束和说明。表3-2用户表字段名称数据类型约束说明uidint(11)主键自动递增usernamevarchar(255)工号passwordvarchar(255)密码rolevarchar(255)权限namepositionnamevarchar(255)varchar(255)用户名职位表3-3部门表字段名称数据类型约束说明Departmentiddepartmentnameint(11)varchar(255)主键自动递增部门名称表3-4职位表字段名称数据类型约束说明positionidint(11)主键自动增长positionamevarchar(255)职位名称departmerntidint(11)部门idadminflagvarchar(255)权限表3-5请假表字段名称数据类型约束说明leavenovarchar(255)主键自动增长typevarchar(255)NotNull请假类型starttimevarchar(255)NotNull开始时间endtimeLeavecauseTurnnameApplytimeNameUnoStatusFilenamePosttypeauditopinionvarchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)NotNull结束时间请假原因转办人申请时间申请人申请人工号当前审批状态文件名申请类型审批理由

表3-6销假表字段名称数据类型约束说明leavenovarchar(255)主键自动增长typevarchar(255)NotNull请假类型starttimevarchar(255)NotNull开始时间endtimeLeavecauseTurnnameApplytimeNameUnoStatusFilenamePosttypeauditopinionvarchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)NotNull结束时间请假原因转办人申请时间申请人申请人工号当前审批状态文件名申请类型审批理由表3-7公告通知表字段名称数据类型约束说明Noticeidint(11)主键自动递增titlevarchar(255)公告标题contentvarchar(255)公告内容postervarchar(255)发布人posttimefilenamevarchar(255)varchar(255)发布时间文件名表3-8用户信息表字段名称数据类型约束说明uidint(11)主键自动递增Namevarchar(255)姓名SexphoneVarchar(255)varchar(255)性别手机号码addressBirthdayPositionnameDepartmentnameEmailAgeUnoRoleIdcardregisteredAddressungencyPeopleungencyPhonejobAddresstrytimeformalTimeentryDatetryEndleaveTimevarchar(255)varchar(255)varchar(255)varchar(255)varchar(255)int(11)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)varchar(255)DatetimeDatetimeDatetimedatetime住址生日职位部门邮箱年龄工号权限身份证号码户籍紧急联系人紧急联系电话工作地试用期时长转正日期实习开始日期实习结束日期离职日期表3-9职位权限表字段名称数据类型约束说明Roleidint(11)主键自动递增rolevarchar(255)权限名rolesvarchar(255)权限表3-10休假表字段名称数据类型约束说明Yearint(11)主键自动递增monthvarchar(255)月份weekdayvarchar(255)日期第四章系统详细设计与实现4.1系统功能模块设计通过上面对需求的分析以及对数据库的设计，整体上以及大致了解了此项目的内容设计，下面是对各功能模块详细的介绍。4.1.1登录模块登录新来的员工管理员会为其创建一个新的用户账号，该账号的账户就是该员工的工号，而密码则默认为12345678，需要用户登录后自行在首页进行密码修改。输入账号密码后会先去数据库判断账号密码是否正确，若正确则会返回其一个随机token，根据token会再去数据库获取该用户的权限和基本用户信息，所以普通用户和管理员用户看到的页面是不一样的。登录需输入正确的用账户及密码，登录成功后，会提示用户登录成功随后会进入到系统的首页，登录失败则会提示用户密码或账户输入错误，请重新登录，并且会清空账号和密码的输入框让用户重新输入登录，下图4-1为系统登录页面。图4-1系统登录界面4.1.2首页模块普通用户和管理员用户都会在首页看到通知公告的内容，该用户的请假天数和一些其他基本模块，以及修改密码的功能，而管理员用户会在首页多看到一个流程中心的模块，该模块用来查看请假销假的待办和已办事项。下图4-2为管理员首页页面，4-3为普通用户首页页面图4-2管理员首页页面图4-3普通用户首页页面下图4-4为密码修改页面，密码必须是8到14个字符，英文、数字、特殊符号（!@#$%^&*）组成。图4-4密码修改页面4.1.3系统管理模块该模块为管理员维护公司组织架构以及用户等信息的模块，所以只有管理员能看到，该模块又有组织架构，账号管理，维护信息，查看考勤四个页面。下图4-5为组织架构页面。可以看到该页面左侧为部门管理，可以供管理员对公司的部门进行增删改，也能非常清晰的看到每个部门下的职位有哪些。然后右侧为职位管理，和部门一样，可以对职位进行增删改，也可以对各职位的权限进行分配。当部门下有职位时，该部门则无法删除，当职位下有员工时，该职位也无法删除。所以当管理员进行删除操作时，若不满足删除需求会提示管理员需先删除部门下的职位或先删除职位下的员工。且进行所有操作前都会弹出一个提示框提示管理员，是否确认进行该操作，以免误操作。图4-5组织架构页面下图4-6为账号管理页面。在该页面管理员可以对用户进行分配账号操作，除此之外还可以分配的账号进行维护，以及删除和重置密码操作。也可以对分配的账户进行查询。图4-6账号管理页面下图4-7和4-8分别为分配账号和维护账号的两个弹窗。其中分配账号会需要填写该用户的一些基本信息，而其中的生日以及性别是无法输入的，其信息时身份证自动带出的，所以无需输入，而且用户的工号也是自动生成的，为10加上该用户的身份证后6位。当管理员需要维护账号时，用户的信息也会回显出来，除了工号无法修改，其他基本信息都可以进行修改维护。图4-7分配账户弹窗图4-8维护账号弹窗图4-9为维护信息页面。数据和账户管理页面一样，可以让管理员对所有的账号进行基本的信息维护，图4-10为信息维护界面。和个人档案里的我的信息页面不同的是，该页面可以对用户信息进行维护，而我的信息页面只是供员工自行查看的，无法进行修改，如若需要修改信息，则需要通知管理员帮其进行修改。图4-9维护信息页面图4-10信息维护页面图4-11为查看考勤页面。可以看到所有用户的考勤情况，以及请假的基本信息。作为管理员，可以看到所有用户的考勤情况。图4-12为用户考勤表，图4-13为请假条基本信息。图4-11查看考勤页面图4-12考勤表图4-13请假条4.1.4个人档案模块该模块普通用户和管理员用户都可以看到。有我的信息、我的请假、我的销假、我的考勤、通知公告五个页面。该模块也是这个系统的核心模块，供用户来进行请假销假操作。图4-14为我的信息页面。和管理员维护信息的页面一样，信息做一个回显处理，但是用户自己是无法修改信息的，只有管理员可以对用户的信息进行维护操作，普通用户只可以看到自己的个人信息，如有不对或又要修改的信息，则需通知管理员进行修改维护。图4-14我的信息页面图4-15为我的请假页面。该页面供用户进行请假申请，可以看到用户所有的请假记录以及当前的请假状态，如若未审批则显示未审批，审批过的会显示同意或驳回，用户也可以点击查看按钮，来查看审批的理由其中审批通过的，可以进行销假申请。如果是未审批的，还可以点击取消按钮来取消请假申请。图4-15我的请假页面图4-16和图4-17分别为请假弹窗以及审批为同意的弹窗。可以看到用户点击请假按钮后，会有一个申请人基本信息的回显，用户需要填写请假信息，其中，请假类型分为病假、事假、年假、婚嫁四种。其中如果选择了病假或婚嫁则必须上传病假附件或婚嫁附件。图4-16请假查看弹窗图4-17同意查看弹窗下图4-18为销假的弹窗。如果请假结束时间为当前时间之前，则提示用户请假时间已过期，无法销假。只能销当前时间到用户请假结束的这一段时间。可以看到进行销假操作时可以看到用户的销假时长。图4-18销假申请弹窗图4-19为我的销假页面。用户可以看到所有的销假记录以及销假状态，和请假不同的是，销假申请管理员只能确认，无法驳回，所以销假状态只有未审批和批准两种，也可以通过点击查看来查看销假的信息。图4-19我的销假页面下图4-20为我的考勤页面。和系统管理的考勤一样，只不过只能查看用户自己的考勤情况，以及请假条的基本信息。只要没请假则默认出勤。图4-20我的考勤页面图4-21为通知公告页面。该页面只有管理员能看到，为管理员发布公告的，普通员工可以在首页的公告看到发布的公告。图4-21通知公告页面图4-22为发布公告的弹窗。查看公告弹窗和该弹窗一样，数据会做一个回显。图4-22发布公告弹窗4.1.5管理员审批模块下图4-23为管理员审批页面，可以看到该页面有一个tab切换，一个是待办事项，一个是已办事项，对应首页的流程模块，当管理员点击首页的流程模块时，也会跳到相应的tab页面。在待办页面也可以看到，当前有请假和销假两条待审批数据，如果是请假则可以批准或驳回，而销假的数据只能确认批准，无法进行驳回操作。审批过的数据也会自动的来到已办页面。图4-23答管理员审批界面图4-24为请假审批弹窗。有批准和驳回两个按钮，如果是驳回则必须填写审核理由告知用户原因，如果同意则不必填。图4-24请假审批弹窗4.2后端核心代码后端采用php实现数据库的连接以及数据的增删改查操作，它是一种强大的CGI脚本语言，语法混合了C、Java、Perl和PHP式的新语法，执行网页比CGI、Perl和ASP更快，这是它的第一个突出的特点，而且php具有很好的开放性和可扩展性，它属于自由软件，其源代码完全公开，任何程序员为PHP扩展附加功能非常容易，数据库支持也非常的好，PHP支持多种主流与非主流的数据库，如AdabasD、DBA、dBase、dbm、filePro、Informix、InterBase、mSQMySQL、oracle等。接下来就对数据库的连接，登录操作和文件的上传等，各展示核心代码。4.2.1利用php实现与数据库的连接下面为php连接数据库的核心代码。可以看到利用php的mysqli就可以对数据库进行连接。php连接数据库的核心代码：$host="localhost";$name="host";$pwd="123456";

$link=mysqli_connect($host,$name,$pwd);

if(!$link){

echo"false";

}

mysqli_set_charset($link,"utf8");

mysqli_select_db($link,"leavesystem");4.2.2登录时的php核心代码下面为登录时php的核心代码。通过php的$POST来获取用户传的post参数，然后拼接出select语句，然后再次利用php的mysqli去对数据库进行select操作，来获取用户的数据，通过num来判断用户登录的是否正确，如若不正确，则获取不到数据，num为0。如果数据正确，则会在php这随机生成一个token一并返回给前端。登录时php的核心代码：$username=$_POST["username"];

$password=$_POST["password"];

$sql="SELECTrole,nameFROMuser_accountWHEREusername='$username'ANDpassword='$password'";

$result=mysqli_query($link,$sql);

$num=mysqli_num_rows($result);

if($num){

$v=1;

$key=mt_rand();

$token=md5($key.$v.mt_rand().time());

$arr=array();

array_push($arr,$token);

while($result_arr=mysqli_fetch_assoc($result)){

array_push($arr,$result_arr);

}

echojson_encode($arr);

}

else

echofalse;

mysqli_close($link);4.2.3文件上传主要代码下面为php文件上传核心代码。首先利用php的$files来判断文件有没有出错，如果没有出错，则先拼接出文件的路径，然后利用$file_exists来检查文件或目录是否已经存在，如果没有则利用php的move_uploaded_file将临时地址移动到指定的地址。最后利用insert语句将文件名插入到对应表里，最终前端访问文件时，直接通过获取文件名来读取指定路径下的文件。需要说明的是，前端通过window.open来打开文件会出现跨域的问题，所以文件上传的地址为nginx配置的服务器地址，开启nginx后可以直接在线访问。php文件上传核心代码：if($files){

$filesname=$files["name"];

//没有出错

if(!$files["error"]){

//文件的路径防止重名

$filename="E:/phpstudy_pro/WWW/fileLoad/".$filesname;

//检查文件或目录是否存在

if(!file_exists($filename))

//将临时地址移动到指定地址

move_uploaded_file($files["tmp_name"],$filename);

}

$sql="insertINTOnotice_all

(title,content,poster,posttime,filename)VALUES

('$title','$releaseContent','$releaseName','$releaseTime','$filesname')";

}else{

$sql="insertINTOnotice_all

(title,content,poster,posttime)VALUES

('$title','$releaseContent','$releaseName','$releaseTime')";

}4.2.4前端访问php前端通过vue的axios来访问php，下面为axios核心代码。将目标代理地址baseUrl赋于axios的默认基础地址，否则axois默认地址将会覆盖代理地址，会无法找到代理从而导致跨域。然后将axois用promise封装起来，让代码同步化，最后通过三元表达式通过对methods的判断来对axios传参进行动态赋值。axios核心代码：constservice=(data)=>{

axios.defaults.baseURL=baseURL

//console.log(data)

returnnewPromise((resolve,reject)=>{

axios({

url:data.url,

method:data.method,

params:data.params?data.params:{},

data:data.data?data.data:{}

})

.then((res)=>{

resolve(res)

})

.catch((err)=>{

reject(err)

})

})}需要说明的是，利用axios访问php时也会出现同样的跨域问题，所以可以通过配置vue.config.js里的devServer来解决跨域问题，下面为配置跨域核心代码。可以看到target则是我需要代理的服务器地址。配置跨域核心代码：

devServer:{

port:port,

open:true,

overlay:{

warnings:false,

errors:true

},

proxy:{

'/dev-api':{

/*目标代理服务器地址*/

target:'/',

/*允许跨域*/

ws:true,

changeOrigin:true,

pathRewrite:{

'^/dev-api':''

}

}

}

},4.2.5路由守卫根据权限动态添加路由下面为路由守卫判断权限动态添加路由的核心代码。通过路由的导航守卫，在路由跳转时进行数据处理，所有的数据判断都在vuex里完成，通过用户的权限对路由进行遍历，最终匹配出有相应权限的路由，生成可访问的路由，然后利用vue的addRoutes来动态添加路由，达到不用权限看到不同页面的效果。动态添加路由的核心代码：//给路由挂载路由导航守卫：router.beforeEach(async(to,from,next)=>{

//startprogressbar

NProgress.start()

if(store.getters.token){

//判断是否有token

if(to.path==='/login'){

next({path:'/'})

NProgress.done()

}else{

if(store.getters.roles.length===0){

//判断当前用户是否已拉取完user路由权限信息

try{

awaitstore.dispatch('user/getInfo')

console.log('用户路由权限:',store.getters.roles)

constaccessRoutes=awaitstore.dispatch(

'GenerateRoutes',

store.getters.roles

)

console.log('可访问的路由表：',accessRoutes)

router.addRoutes(accessRoutes)

next({...to,replace:true})//hack方法确保addRoutes已完成

}catch(error){

awaitstore.dispatch('user/resetToken')

//Message.error(error||'HasError')

next(`/login?redirect=${to.path}`)

NProgress.done()

}

}else{

next()

}

}

}else{

if(whiteList.indexOf(to.path)!==-1){

//在免登录白名单，直接进入

next()

}else{

next('/login')//否则全部重定向到登录页

}

}})Vuex路由权限匹配核心代码：functionhasPermission(roles,route){

if(route.meta&&route.meta.role){

returnroles.some((role)=>route.meta.role.indexOf(role)>=0)

}else{

returntrue

}}exportfunctionfilterAsyncRoutes(routes,roles){

constres=[]

routes.forEach((route)=>{

consttmp={

...route

}

if(hasPermission(roles,tmp)){

if(tmp.children){

tmp.children=filterAsyncRoutes(tmp.children,roles)

}

res.push(tmp)

}

})

returnres}总结至此，中小型人事web管理系统已基本完成，本系统在设计方面采用B/S模式，前端使用vue等技术进行基本页面的设计与功能实现，后端也是采用到了php，作为一种强大的CGI脚本语言，对于轻量级的项目使用起来还是非常的方便有效率的。通过这一次的毕设的完成，让我学到了很多之前没有学到过的东西，知道了跨域该如何解决，知道了php文件上传该