Java Web 開發(fā)從入門到實踐課件 第15章 - 項目案例：員工管理系統(tǒng)

JavaWeb開發(fā)從入門到實踐JavaWebDevelopmentFromIntroductiontoPractice項目案例Chap15員工管理系統(tǒng)：提綱項目案例：員工管理系統(tǒng)本項目案例旨在通過詳細的項目設(shè)計與系統(tǒng)實現(xiàn)，構(gòu)建一個高效的員工管理系統(tǒng)，以優(yōu)化企業(yè)人力資源的管理與運營。15.1項目設(shè)計15.2系統(tǒng)設(shè)計與實現(xiàn)15.3本章小結(jié)15.1項目設(shè)計15.1.1項目概述15.1.2數(shù)據(jù)庫設(shè)計15.1.1項目概述需求分析功能結(jié)構(gòu)本系統(tǒng)前臺使用當前主流框架Vue，后端使用SpringBoot+MyBatis框架。本系統(tǒng)用戶登錄成功后，對用戶信息進行管理，包括增加用戶、查詢用戶、修改用戶和刪除用戶。也可以對部門管理模塊、員工管理模塊、員工培訓模塊和獎懲管理模塊進行增加、查詢、修改和刪除操作。圖

14-1

系統(tǒng)功能結(jié)構(gòu)圖15.1.2數(shù)據(jù)庫設(shè)計（1）用戶信息表（user）表

15-1用戶信息表字段名類型是否為空是否為主鍵描述idint否是用戶編號namevarchar(50)否否姓名usernamevarchar(50)否否用戶名passwordvarchar(50)否否密碼agetinyint是否年齡gendertinyint是否性別（1男0女）phonevarchar(11)是否手機號roletinyint是否角色（1管理員2普通用戶）15.1.2數(shù)據(jù)庫設(shè)計（2）部門表（dept）表

15-2部門表字段名類型是否為空是否為主鍵描述idint否是部門編號namevarchar(50)否否部門名稱create_timedatetime否否創(chuàng)建時間update_timedatetime否否修改時間15.1.2數(shù)據(jù)庫設(shè)計（3）員工信息表（emp）表

15-3員工信息表字段名類型是否為空是否為主鍵描述idint否是員工編號namevarchar(50)否否姓名gendertinyint是否性別（1男0女）imagevarchar(50)是否頭像jobtinyint是否職位（1專任教師2輔導員3其它）entrydatedate是否入職時間dept_idint是否部門IDcreate_timedatetime是否創(chuàng)建時間update_timedatetime是否修改時間15.1.2數(shù)據(jù)庫設(shè)計（4）員工培訓表（train）表

15-4員工培訓表字段名類型是否為空是否為主鍵描述idint否是編號emp_idint否否員工編號themevarchar(50)否否培訓主題organizervarchar(50)否否主辦方start_datedate是否培訓開始時間end_datedate是否培訓結(jié)束時間contentvarchar(300)是否培訓主要內(nèi)容15.1.2數(shù)據(jù)庫設(shè)計（5）獎懲信息表（prizeFine）表

15-5獎懲表字段名類型是否為空是否為主鍵描述idint否是編號emp_idint否否員工編號typeint否否類型（1警告2記過3大過4嘉獎5記功6大功）contentvarchar(300)是否獎懲事項及文號15.2系統(tǒng)設(shè)計與實現(xiàn)15.2.1項目環(huán)境搭建15.2.2登錄模塊15.2.3員工管理模塊15.2.1項目環(huán)境搭建系統(tǒng)開發(fā)環(huán)境本系統(tǒng)的軟件開發(fā)及運行環(huán)境如下。（1）操作系統(tǒng)：Windows10或更高的Windows版本（2）JDK環(huán)境：corretto-17javaversion"17.0.9"（3）開發(fā)工具：IntelliJIDEA2023（4）Web服務(wù)器：SpringBoot框架的web依賴包中內(nèi)嵌Tomcat組件（5）數(shù)據(jù)庫：MySQL8.0.32（6）框架：SpringBoot3.1.7、mybatis2.3.1、Vue2.0（7）瀏覽器：推薦谷歌或火狐瀏覽器15.2.1項目環(huán)境搭建工程目錄結(jié)構(gòu)圖

14-3

工程的目錄結(jié)構(gòu)圖（后端）圖

14-4

工程的目錄結(jié)構(gòu)（前端）15.2.2登錄模塊后端功能的實現(xiàn)（1）創(chuàng)建實體類@Data@NoArgsConstructor@AllArgsConstructorpublicclassUser{ privateIntegerid; privateStringname;

privateStringusername;//省略

}（2）創(chuàng)建數(shù)據(jù)訪問層@MapperpublicinterfaceUserMapper{

@Select("SELECTpasswordfromuserwhereusername=#{username}")

publicStringgetPwdByUserName(Stringusername);

}15.2.2登錄模塊（4）創(chuàng)建控制器類@RestControllerpublicclassUserController{@AutowiredprivateUserServiceuserService;@PostMapping("/emps/login")publicResultlogin(@RequestBodyUseruser){ System.out.println(user); Stringpwd=userService.getPwdByUserName(user.getUsername()); if(user.getPassword().equals(pwd)){ returnResult.success("success"); }else{ returnResult.error("error"); }}}注意，操作數(shù)據(jù)庫，需要在perties中配置數(shù)據(jù)源。15.2.2登錄模塊前端功能的實現(xiàn)手動配置路由index.js文件importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)constroutes=[{path:'/',name:'loginDefault',redirect:"/login"},{path:'/login',name:'login',component:()=>import('../views/user/LoginView.vue')},{path:'/emp',name:'emp',component:()=>import('../views/user/EmpView.vue')},15.2.2登錄模塊{path:'/dept',name:'dept',component:()=>import('../views/user/DeptView.vue')},{path:'/train',name:'train',component:()=>import('../views/user/TrainView.vue')},{path:'/prizeFine',name:'prizeFine',component:()=>import('../views/user/PrizeFineView.vue')}]constrouter=newVueRouter({routes})exportdefaultrouter15.2.2登錄模塊圖

14-4

登錄界面登錄界面如圖14-4所示，用戶登錄成功后，進入員工管理列表頁面。15.2.2登錄模塊LoginView.vue代碼如下：<template><divstyle="width:300px;margin;0pxauto;"><el-formref="form":model="loginForm"label-width="80px"size="mini"><el-form-itemlabel="用戶"><el-inputv-model="loginForm.username"placeholder="請輸入用戶名"></el-input></el-form-item><el-form-itemlabel="密碼"><el-inputv-model="loginForm.password"show-passwordplaceholder="請輸入密碼"></el-input></el-form-item><el-form-itemsize="large"><el-buttontype="primary"@click="onSubmit">登錄</el-button></el-form-item></el-form></div></template>15.2.2登錄模塊<script>importaxiosfrom'axios';exportdefault{data(){return{loginForm:{username:'',password:''}}},

15.2.2登錄模塊methods:{onSubmit(){letthat=this;constdata={"username":this.loginForm.username,"password":this.loginForm.password};axios.post("/emps/login",data).then((result)=>{if(result.data.data=="success"){that.$router.push("/emp");}}).catch((err)=>{console.log(err);});}}}</script>15.2.3員工管理模塊后端主要功能的實現(xiàn)圖

14-5

員工管理模塊的列表頁面15.2.3員工管理模塊圖

14-6增加員工界面15.2.3員工管理模塊圖

14-7修改員工界面15.2.3員工管理模塊圖

14-8刪除提示框15.2.3員工管理模塊（1）創(chuàng)建實體類@Data@AllArgsConstructor@NoArgsConstructorpublicclassEmp{

privateIntegerid;

privateStringname;

privateShortgender;//省略}員工實體類分頁實體類@Data@AllArgsConstructor@NoArgsConstructor

publicclassPageBean{

privateLongtotal;

privateListrows;

}15.2.3員工管理模塊（2）創(chuàng)建數(shù)據(jù)層@MapperpublicinterfaceEmpMapper{ @Select("selectid,name,gender,image,job,\n"+"entrydate,dept_id,create_time,update_timefromempwhereid=#{id}") publicEmpselectById(Integerid); publicvoidinsertEmp(Empemp); @Delete("deletefromempwhereid=#{id}") publicvoiddelete(Integerid); publicvoidupdate(Empemp); publicList<Emp>listWhere(Stringname,Shortgender,LocalDatestart,LocalDateend);}EmpMapper.java接口15.2.3員工管理模塊<mappernamespace="com.swxy.mapper.EmpMapper"> <selectid="listWhere"> selectid,name,gender,image,job,entrydate,dept_id,create_time,update_timefromemp <where> <iftest="name!=nullandname!=''"> namelikeconcat('%',#{name},'%') </if> <iftest="gender!=nullandgender!=-1"> andgender=#{gender} </if> <choose> <whentest="start!=nullandend!=null"> andentrydatebetween#{start}and#{end} </when> <whentest="start!=null"> andentrydate>#{start} </when>

EmpMapper.xml代碼15.2.3員工管理模塊 <whentest="end!=null"> andentrydate<#{end} </when> </choose> </where> </select> <updateid="update"> updateemp <set> <iftest="name!=nullandname!=''"> name=#{name}, </if> <iftest="gender!=null"> gender=#{gender} </if> </set> whereid=#{id} </update>

15.2.3員工管理模塊 <insertid="insertEmp"> insertintoemp <trimprefix="("suffix=")"suffixOverrides=","> <iftest="name!=nullandname!=''"> name, </if> <iftest="gender!=null"> gender, </if> <iftest="createTime!=null"> create_time, </if> <iftest="updateTime!=null"> update_time </if> </trim>

15.2.3員工管理模塊 <trimprefix="values("suffix=")"suffixOverrides=","> <iftest="name!=nullandname!=''"> #{name}, </if> <iftest="gender!=null"> #{gender}, </if> <iftest="createTime!=null"> #{createTime}, </if> <iftest="updateTime!=null"> #{updateTime} </if> </trim> </insert> </mapper>15.2.3員工管理模塊@ServicepublicclassEmpServiceImplimplementsEmpService{ @Autowired privateEmpMapperempMapper; @Override publicEmpselectById(Integerid){ returnempMapper.selectById(id); } //使用PageHelper插件分頁 @Override publicPageBeanpage(Integerpage,IntegerpageSize,Stringname,Shortgender,LocalDatestart,LocalDateend){ PageHelper.startPage(page,pageSize); List<Emp>list=empMapper.listWhere(name,gender,start,end); Page<Emp>p=(Page<Emp>)list; PageBeanpageBean=newPageBean(p.getTotal(),p.getResult()); returnpageBean; }（3）創(chuàng)建業(yè)務(wù)層EmpServiceImpl.java文件代碼15.2.3員工管理模塊 @Override publicvoiddelete(Integerid){ empMapper.delete(id); } @Override publicvoidupdate(Empemp){ empMapper.update(emp); } @Override publicvoidinsertEmp(Empemp){ empMapper.insertEmp(emp); }}15.2.3員工管理模塊@RestControllerpublicclassEmpController{@AutowiredprivateEmpServiceempService;@GetMapping("/emps/{id}")publicResultselectById(@PathVariableIntegerid){ returnResult.success(empService.selectById(id));}@GetMapping("/emps")publicObjectpage(@RequestParam(defaultValue="1")Integerpage,@RequestParam(defaultValue="3")IntegerpageSize,Stringname,Shortgender,String[]entryDate)throwsParseException{ LocalDatestart=null,end=null; if(entryDate!=null&&entryDate.length>0){ DateTimeFormatterdtf=DateTimeFormatter.of