Java EE（ SSM + Spring Boot + Vue.js 3 ）框架整合開發(fā) 課件 第16章 人事管理系統(tǒng)的設(shè)計與實現(xiàn)（Spring Boot + Vue3 + MyBatis）

第十六章人事管理系統(tǒng)的設(shè)計與實現(xiàn)（SpringBoot+Vue3+MyBatis）授課教師：陳恒大連外國語大學(xué)本章目標(biāo)理解人事管理的業(yè)務(wù)流程掌握SpringBoot、MyBatis等后端框架技術(shù)掌握Vue.js3表現(xiàn)層框架技術(shù)掌握基于Vue.js3+MyBatis+SpringBoot的前后端分離開發(fā)的流程、方法以及技術(shù)1本章內(nèi)容216.1系統(tǒng)設(shè)計16.2數(shù)據(jù)庫設(shè)計16.3后臺應(yīng)用的實現(xiàn)16.4前端項目的實現(xiàn)16.5測試運行16.1系統(tǒng)設(shè)計16.1.1系統(tǒng)功能需求16.1.2系統(tǒng)模塊劃分316.1.1系統(tǒng)功能需求本章將使用SpringBoot+MyBatis實現(xiàn)后端系統(tǒng)的開發(fā)，使用Vue.js3實現(xiàn)前端系統(tǒng)的開發(fā)，數(shù)據(jù)庫采用的是MySQL5.x，后端集成開發(fā)環(huán)境為IntelliJIDEA，前端集成開發(fā)環(huán)境為VSCode。4？請思考

前后端分離開發(fā)的核心思想是？16.1.1系統(tǒng)功能需求1、部門管理：主要用于描述組織的部門信息，以及部門的上下級關(guān)系。包括新建部門、修改部門、查詢部門下的員工等功能。2、崗位管理：主要用于對組織內(nèi)各崗位進(jìn)行管理，包括增加、修改、刪除崗位，以及查詢崗位下的在職人員等功能。3、員工管理：主要用于員工基本信息錄入與修改，包括員工部門、崗位、試用期及其他信息的錄入。4、試用期管理：主要對試用期員工管理，包括試用期轉(zhuǎn)正、試用期延期、試用期不通過、已轉(zhuǎn)正員工信息查詢等功能。516.1.1系統(tǒng)功能需求5、崗位調(diào)動管理：主要對員工崗位調(diào)動管理，包括部門內(nèi)崗位調(diào)動、部門間崗位調(diào)動、調(diào)動員工查詢等功能。6、員工離職管理：主要對員工離職管理，包括確定離職員工、已離職員工信息查詢等功能。離職的類型包括主動辭職、辭退、退休、開除、試用期未通過。7、報表管理：功能包括給定時間段新聘員工報表、給定時間段離職員工報表、給定時間段崗位調(diào)動員工報表、人事月報等報表查詢。616.1系統(tǒng)設(shè)計16.1.1系統(tǒng)功能需求16.1.2系統(tǒng)模塊劃分716.1.2系統(tǒng)模塊劃分系統(tǒng)包括部門管理、崗位管理、員工管理、試用期管理、崗位調(diào)動管理、員工離職管理、報表管理等功能模塊。8本章內(nèi)容916.1系統(tǒng)設(shè)計16.2數(shù)據(jù)庫設(shè)計16.3后臺應(yīng)用的實現(xiàn)16.4前端項目的實現(xiàn)16.5測試運行16.2數(shù)據(jù)庫設(shè)計16.2.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計16.2.2數(shù)據(jù)邏輯結(jié)構(gòu)設(shè)計16.2.3創(chuàng)建數(shù)據(jù)表1016.2.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計1．管理員包括ID、用戶名和密碼。管理員的用戶名和密碼由數(shù)據(jù)庫管理員預(yù)設(shè)，不需要注冊。2．部門包括部門ID、名稱、類型、電話、傳真、描述、上級部門以及成立日期。3．崗位包括崗位ID、崗位名稱、崗位類型以及編制數(shù)。4．員工包括員工ID（編號）、姓名、性別、出生日期、身份證號、所在部門、所在崗位、入職日期、參加工作日期、用工形式、人員來源、政治面貌、民族、籍貫、聯(lián)系電話、電子郵件、身高、血型、婚姻狀況、戶口所在地、最高學(xué)歷、最高學(xué)位、畢業(yè)院校、所學(xué)專業(yè)、畢業(yè)日期、試用期開始日期、試用期結(jié)束日期、狀態(tài)等信息。其中，編號唯一，所在部門與“2．部門ID”關(guān)聯(lián)；所在崗位與“3．崗位ID”關(guān)聯(lián)。1116.2.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計5．離職記錄包括ID、員工編號、員工名稱、離職類型、離職日期、記錄日期。其中，ID唯一，員工編號與“4．員工ID”關(guān)聯(lián)。6．崗位調(diào)動記錄包括ID、員工編號、員工名稱、調(diào)動前崗位、調(diào)動后崗位、調(diào)動類型、調(diào)動日期、記錄日期。其中，ID唯一，員工編號與“4．員工ID”關(guān)聯(lián)；調(diào)動前崗位和調(diào)動后崗位與“3．崗位ID”關(guān)聯(lián)。1216.2數(shù)據(jù)庫設(shè)計16.2.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計16.2.2數(shù)據(jù)邏輯結(jié)構(gòu)設(shè)計16.2.3創(chuàng)建數(shù)據(jù)表1316.2.2數(shù)據(jù)邏輯結(jié)構(gòu)設(shè)計將數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計轉(zhuǎn)換為MySQL數(shù)據(jù)庫所支持的實際數(shù)據(jù)模型，即數(shù)據(jù)庫的邏輯結(jié)構(gòu)。14管理員信息表15字

段含義類

型長度是否為空id管理員ID（PK自增）int11noaname用戶名varchar50noapwd密碼varchar50no部門信息表16字

段含義類

型長度是否為空id部門ID（PK自增）int11nodname部門名稱varchar50nodtype部門類型varchar50nodtel電話varchar50

dfax傳真varchar50

description描述varchar500

supdepartment上級部門int11

establishmentdate創(chuàng)建日期date

崗位信息表17字

段含義類

型長度是否為空id崗位ID（PK自增）int11nopname崗位名稱varchar50noptype部門類型varchar50noorganization崗位預(yù)設(shè)人數(shù)int11

員工離職信息表18字

段含義類

型長度是否為空idID（PK自增）int11nostaff_id員工IDvarchar50nosname員工姓名varchar50noqtype離職類型varchar50noqdate離職日期date50noopdate操作日期date

no員工信息表19字

段含義類型長度是否為空id員工ID（PK自增）int11nosname姓名varchar50nosex性別varchar10nobirthday生日date

sid身份證號varchar50

depart_id部門int11

post_id崗位int11

entrydate入職日期date

joinworkdate工作日期date

workform用工形式varchar50

staffsource來源varchar50

politicalstatus政治面貌varchar50

nation國籍varchar50

nativeplace民族varchar50

stel電話varchar50

semail郵箱varchar100

sheight身高decimal12,2

bloodtype血型varchar50

maritalstatus婚姻狀況varchar50

registeredresidence籍貫varchar50

education學(xué)歷varchar50

degree學(xué)位varchar50

university畢業(yè)院校varchar50

major專業(yè)varchar50

graduationdate畢業(yè)時間date

startdate試用期開始時間date

enddate試用期結(jié)束時間date

status狀態(tài)varchar50

peroidopdate操作日期date

崗位調(diào)動信息表20字

段含義類

型長度是否為空idID（PK自增）int11nostaff_id員工IDint11nosname員工姓名varchar50nobeforepost_id調(diào)動前部門int11

afterpost_id調(diào)動后部門int11

ttype調(diào)動類型varchar10

tdate調(diào)動日期date

opdate操作日期date

16.2數(shù)據(jù)庫設(shè)計16.2.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計16.2.2數(shù)據(jù)邏輯結(jié)構(gòu)設(shè)計16.2.3創(chuàng)建數(shù)據(jù)表2116.2.3創(chuàng)建數(shù)據(jù)表根據(jù)16.2.2節(jié)的邏輯結(jié)構(gòu)，創(chuàng)建數(shù)據(jù)表。篇幅有限，創(chuàng)建數(shù)據(jù)表代碼請讀者參考本書提供的源代碼personmis.sql。22本章內(nèi)容2316.1系統(tǒng)設(shè)計16.2數(shù)據(jù)庫設(shè)計16.3后臺應(yīng)用的實現(xiàn)16.4前端項目的實現(xiàn)16.5測試運行16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)2416.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用參考5.2.4節(jié)使用IntelliJIDEA構(gòu)建基于SpringWeb和MyBatisFramework依賴的人事管理系統(tǒng)后臺應(yīng)用personmis。2516.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)2616.3.2修改pom.xml修改人事管理系統(tǒng)personmis的pom.xml文件，添加MySQL連接依賴。27<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.45</version></dependency>16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)2816.3.3配置數(shù)據(jù)源等信息29server.port=8443server.servlet.context-path=/personmisspring.datasource.url=jdbc:mysql://localhost:3306/personmis?characterEncoding=utf8#數(shù)據(jù)庫用戶名spring.datasource.username=root#數(shù)據(jù)庫密碼spring.datasource.password=root#數(shù)據(jù)庫驅(qū)動spring.datasource.driver-class-name=com.mysql.jdbc.Driver#設(shè)置包別名（在Mapper映射文件中直接使用實體類名）mybatis.type-aliases-package=com.ch.personmis.entity#告訴系統(tǒng)在哪里去找mapper.xml文件（映射文件）mybatis.mapperLocations=classpath:mappers/*.xml#在控制臺輸出SQL語句日志.ch.personmis.repository=debug#讓控制器輸出的JSON字符串格式更美觀spring.jackson.serialization.indent-output=true16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)3016.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問在PersonmisApplication主類中，創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問。31privateCorsConfigurationcorsConfig(){CorsConfigurationcorsConfiguration=newCorsConfiguration();//允許跨域請求的域名corsConfiguration.addAllowedOrigin("*");//允許發(fā)送的內(nèi)容類型corsConfiguration.addAllowedHeader("*");//跨域請求允許的請求方式corsConfiguration.addAllowedMethod("*");corsConfiguration.setMaxAge(3600L);returncorsConfiguration;}@BeanpublicCorsFiltercorsFilter(){UrlBasedCorsConfigurationSourcesource=newUrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",corsConfig());returnnewCorsFilter(source);}16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)3216.3.5管理員登錄后臺實現(xiàn)每個功能模塊的后臺實現(xiàn)共有5塊內(nèi)容：控制器層（com.ch.personmis.controller）、業(yè)務(wù)層（com.ch.personmis.service）、數(shù)據(jù)訪問層（com.ch.personmis.repository）、實體層（com.ch.personmis.entity）以及SQL映射文件（resources/mappers）。331．控制器層34@RestControllerpublicclassAdminController{@ResourceprivateAdminServiceadminService;@PostMapping(value="/login")//前端訪提交的是JSON數(shù)據(jù)對象時，后端使用@RequestBody解析publicStringlogin(@RequestBodyUserEntityuserEntity,HttpSessionsession){returnadminService.login(userEntity,session);}}？請思考

控制器方法返回的是視圖名稱還是字符串值？2．業(yè)務(wù)層35@ServicepublicclassAdminServiceImplimplementsAdminService{ @Resource privateAdminRepositoryadminRepository; @Override publicStringlogin(UserEntityuserEntity,HttpSessionsession){ UserEntityuser=adminRepository.login(userEntity); if(user!=null){ session.setAttribute("auser",user); return"ok"; }else{ return"no"; } }}數(shù)據(jù)訪問層與SQL映射文件363．?dāng)?shù)據(jù)訪問層

與管理員登錄相關(guān)的數(shù)據(jù)訪問層是AdminRepository接口，該接口代碼略。4．SQL映射文件

與管理員登錄相關(guān)的SQL映射文件是AdminMapper.xml，該文件的核心內(nèi)容是：

<selectid="login"resultType="UserEntity"parameterType="UserEntity"> select*fromausertablewhereaname=#{uname}andapwd=#{upwd} </select>16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)3716.3.6部門管理后臺實現(xiàn)部門管理功能模塊包括增、刪、改、查部門。381．控制器層與部門管理相關(guān)的控制器是DepartController。2．業(yè)務(wù)層與部門管理相關(guān)的業(yè)務(wù)層包括DepartService接口和DepartServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與部門管理相關(guān)的數(shù)據(jù)訪問層是DepartRepository接口4．實體層與部門管理相關(guān)的實體層有Depart（部門實體）和DepartByCon（條件查詢實體）5．SQL映射文件與部門管理相關(guān)的SQL映射文件是DepartMapper.xml。16.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)3916.3.7崗位管理后臺實現(xiàn)崗位管理功能模塊包括增、刪、改、查崗位。1．控制器層與崗位管理相關(guān)的控制器是PostController。2．業(yè)務(wù)層與崗位管理相關(guān)的業(yè)務(wù)層包括PostService接口和PostServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與崗位管理相關(guān)的數(shù)據(jù)訪問層是PostRepository接口。4．實體層與崗位管理相關(guān)的實體層有Post（崗位實體）和PostByCon（條件查詢實體）。5．SQL映射文件與崗位管理相關(guān)的SQL映射文件是PostMapper.xml。4016.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)4116.3.8員工管理與試用期管理后臺實現(xiàn)員工管理功能模塊包括增、刪、改、員工。試用期管理包括條件查詢試用期員工、試用期轉(zhuǎn)正、延期等操作。1．控制器層與員工管理和試用期管理相關(guān)的控制器是StaffController。2．業(yè)務(wù)層與員工管理和試用期管理相關(guān)的業(yè)務(wù)層包括StaffService接口和StaffServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與員工管理和試用期管理相關(guān)的數(shù)據(jù)訪問層是StaffRepository接口。4．實體層與員工管理和試用期管理相關(guān)的實體層有Staff（員工實體）、StaffByCon（條件查詢員工實體）和PeriodByCon（條件查詢試用期實體）。5．SQL映射文件與員工管理和試用期管理相關(guān)的SQL映射文件是StaffMapper.xml。4216.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)4316.3.9崗位調(diào)動管理后臺實現(xiàn)崗位調(diào)動管理功能模塊包括錄入崗位調(diào)動信息、多條件查詢崗位調(diào)動信息。1．控制器層與崗位調(diào)動管理相關(guān)的控制器是TransferController。2．業(yè)務(wù)層與崗位調(diào)動管理相關(guān)的業(yè)務(wù)層包括TransferService接口和TransferServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與崗位調(diào)動管理相關(guān)的數(shù)據(jù)訪問層是TransferRepository接口。4．實體層與崗位調(diào)動管理相關(guān)的實體層有Transfer（封裝崗位調(diào)動及條件查詢信息）。5．SQL映射文件與崗位調(diào)動管理相關(guān)的SQL映射文件是TransferMapper.xml。4416.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)4516.3.10員工離職管理后臺實現(xiàn)員工離職管理功能模塊包括錄入員工離職信息、查詢及條件查詢員工離職信息。1．控制器層與員工離職管理相關(guān)的控制器是QuitController。2．業(yè)務(wù)層與員工離職管理相關(guān)的業(yè)務(wù)層包括QuitService接口和QuitServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與員工離職管理相關(guān)的數(shù)據(jù)訪問層是QuitRepository接口。4．實體層與員工離職管理相關(guān)的實體層有Quit（封裝離職和條件查詢信息）。5．SQL映射文件與員工離職管理相關(guān)的SQL映射文件是QuitMapper.xml。4616.3后臺應(yīng)用的實現(xiàn)16.3.1使用IntelliJIDEA構(gòu)建后臺應(yīng)用16.3.2修改pom.xml16.3.3配置數(shù)據(jù)源等信息16.3.4創(chuàng)建CorsFilter的Bean實例實現(xiàn)跨域訪問16.3.5管理員登錄后臺實現(xiàn)16.3.6部門管理后臺實現(xiàn)16.3.7崗位管理后臺實現(xiàn)16.3.8員工管理與試用期管理后臺實現(xiàn)16.3.9崗位調(diào)動管理后臺實現(xiàn)16.3.10員工離職管理后臺實現(xiàn)16.3.11報表管理后臺實現(xiàn)4716.3.11報表管理后臺實現(xiàn)報表管理功能模塊包括新聘員工報表、離職員工報表以及崗位調(diào)動報表的查詢。1．控制器層與報表管理相關(guān)的控制器是ReportController。2．業(yè)務(wù)層與報表管理相關(guān)的業(yè)務(wù)層包括ReportService接口和ReportServiceImpl實現(xiàn)類。3．?dāng)?shù)據(jù)訪問層與報表管理相關(guān)的數(shù)據(jù)訪問層是ReportRepository接口。4．實體層與報表管理相關(guān)的實體層有Report（封裝條件查詢信息）。5．SQL映射文件與報表管理相關(guān)的SQL映射文件是ReportMapper.xml。48本章內(nèi)容4916.1系統(tǒng)設(shè)計16.2數(shù)據(jù)庫設(shè)計16.3后臺應(yīng)用的實現(xiàn)16.4前端項目的實現(xiàn)16.5測試運行16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證5016.4.1使用VueCLI搭建前端項目使用VueCLI搭建基于Router和Vuex功能的前端項目personmis-vue。搭建成功后，使用VSCode打開personmis-vue目錄即可進(jìn)行前端項目的實現(xiàn)。5116.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證5216.4.2安裝axios在前端界面組件中，我們通過axios模塊向后端提交Ajax異步請求。所以需要打開VSCode的Terminal終端命令行窗口，執(zhí)行npminstall--saveaxios命令安裝axios模塊。5316.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證5416.4.3設(shè)置反向代理成功安裝axios模塊后，首先在personmis-vue的入口文件main.js中，將axios掛載到vue實例上，示例代碼如下：55//設(shè)置反向代理，前端請求默認(rèn)發(fā)送到http://localhost:8443/personmisconstaxios=require('axios')//使用axios來完成ajax請求。//全局注冊，之后可在其他組件中通過this.$axios發(fā)送數(shù)據(jù)axios.defaults.baseURL='http://localhost:8443/personmis'//axios掛載到vue實例vapp.config.globalProperties.$axios=axios設(shè)置反向代理其次，在personmis-vue根目錄下，創(chuàng)建Vue的配置文件vue.config.js，設(shè)置反向代理支持。56module.exports={//在本地會創(chuàng)建一個虛擬服務(wù)端，虛擬服務(wù)器訪問后端的服務(wù)器不存在跨域devServer:{proxy:{'/personmis':{/*將所有以/personmis開頭的請求自動代理到http://localhost:8443后端的基準(zhǔn)地址*/target:'http://localhost:8443',//是否啟用websocketsws:true,/*開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題*/changeOrigin:true,pathRewrite:{'^/personmis':''}}}}}16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證5716.4.4配置頁面路由在src/router/index.js文件中，配置頁面路由。跳轉(zhuǎn)登錄界面的路由不需要登錄權(quán)限驗證，需要加上meta:{auth:true}數(shù)據(jù)，以便在路由鉤子函數(shù)中判斷。5816.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證5916.4.5安裝ElementPlus60ElementPlus是一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue3.0的桌面端組件庫。我們使用ElementPlus輔助開發(fā)人事管理系統(tǒng)的前端界面組件。所以，首先需要打開VSCode的Terminal終端命令行窗口，執(zhí)行npminstallelement-plus--save命令安裝ElementPlus組件庫。然后，在src目錄下，創(chuàng)建plugins目錄，并在該目錄下新建ElementPlus的配置文件element.js。配置內(nèi)容如下：importElementPlusfrom'element-plus'import'element-plus/lib/theme-chalk/index.css'exportdefault(app)=>{

app.use(ElementPlus)}61最后，在personmis-vue的入口文件main.js中，將ElementPlus組件庫安裝到vue實例上，示例代碼如下：importinstallElementPlusfrom'./plugins/element'installElementPlus(vapp)16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證6216.4.6管理員登錄界面實現(xiàn)前端項目首頁路由默認(rèn)跳轉(zhuǎn)到登錄界面。在views目錄中，創(chuàng)建登錄界面組件Login.vue。Login.vue的運行效果如下圖。6316.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證6416.4.7界面導(dǎo)航組件實現(xiàn)登錄成功后，進(jìn)入部門管理界面。在所有管理界面中，都將引入界面導(dǎo)航組件，如下圖所示。所以，首先在components目錄中，創(chuàng)建界面導(dǎo)航組件NavMain.vue。然后，在各個管理界面組件中，使用如下代碼引入界面導(dǎo)航組件：65importNavMainfrom'@/components/NavMain.vue'……components:{NavMain}16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證6616.4.8部門管理界面實現(xiàn)67部門管理界面有兩個界面組件，一個是新增部門界面組件，一個是管理部門界面組件。在views目錄中，創(chuàng)建新增部門界面組件AddDepartment.vue；創(chuàng)建管理部門界面組件Department.vue。在新增部門界面中，部門名稱和部門類型是必需輸入項，上級部門是從數(shù)據(jù)庫查詢出來，供管理員選擇。在部門管理界面中，可以根據(jù)部門名稱和部門類型進(jìn)行查詢，并可對部門進(jìn)行編輯、詳情以及刪除（不能刪除有數(shù)據(jù)關(guān)聯(lián)的部門）操作。16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證6816.4.9崗位管理界面實現(xiàn)69崗位管理界面有兩個界面組件，一個是新增崗位界面組件，一個是管理崗位界面組件。在views目錄中，創(chuàng)建新增崗位界面組件AddPost.vue；創(chuàng)建管理崗位界面組件Post.vue。在新增崗位界面中，崗位名稱和崗位類型是必需輸入項。在崗位管理界面中，可以根據(jù)崗位名稱和崗位類型進(jìn)行查詢，并可對崗位進(jìn)行編輯、詳情以及刪除（不能刪除有數(shù)據(jù)關(guān)聯(lián)的崗位）操作。16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證7016.4.10員工管理界面實現(xiàn)71員工管理界面有兩個界面組件，一個是新增員工界面組件，一個是管理員工界面組件。在views目錄中，創(chuàng)建新增員工界面組件AddStaff.vue；創(chuàng)建管理員工界面組件Staff.vue。在員工管理界面中，可以根據(jù)員工名稱和部門名稱進(jìn)行查詢，并可對員工進(jìn)行編輯、詳情以及刪除（不能刪除有數(shù)據(jù)關(guān)聯(lián)的員工）操作。16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證7216.4.11試用期管理界面實現(xiàn)73在views目錄中，創(chuàng)建試用期管理界面組件PeroidOp.vue。在試用期管理界面中，可以對正常狀態(tài)的試用期人員進(jìn)行轉(zhuǎn)正、延期、不錄用等操作。同時，也可以根據(jù)多個條件查詢處于試用期的員工。16.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證7416.4.12崗位調(diào)動管理界面實現(xiàn)崗位調(diào)動管理界面有兩個界面組件，一個是錄入崗位調(diào)動界面組件，一個是查詢調(diào)動員工界面組件。在views目錄中，創(chuàng)建錄入崗位調(diào)動界面組件AddTransferStaff.vue；創(chuàng)建查詢調(diào)動員工界面組件TransferStaff.vue。在錄入崗位調(diào)動界面中，可以根據(jù)員工編號自動帶入員工姓名和之前崗位。7516.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8部門管理界面實現(xiàn)16.4.9崗位管理界面實現(xiàn)16.4.10員工管理界面實現(xiàn)16.4.11試用期管理界面實現(xiàn)16.4.12崗位調(diào)動管理界面實現(xiàn)16.4.13員工離職管理界面實現(xiàn)16.4.14報表管理界面實現(xiàn)16.4.15使用鉤子函數(shù)實現(xiàn)登錄權(quán)限認(rèn)證7616.4.13員工離職管理界面實現(xiàn)員工離職管理界面有兩個界面組件，一個是錄入離職員工界面組件，一個是查詢已離職員工界面組件。在views目錄中，創(chuàng)建錄入離職員工界面組件AddQuit.vue；創(chuàng)建查詢已離職員工界面組件Quit.vue。在錄入離職員工界面中，可以根據(jù)員工編號自動帶入員工姓名。7716.4前端項目的實現(xiàn)16.4.1使用VueCLI搭建前端項目16.4.2安裝axios16.4.3設(shè)置反向代理16.4.4配置頁面路由16.4.5安裝ElementPlus16.4.6管理員登錄界面實現(xiàn)16.4.7界面導(dǎo)航組件實現(xiàn)16.4.8