AngularJS+Servlet完成企业人事管理子系统
输入搜索员工的信息,跳转到SkipSelect.html页面打印出来员工的信息。
select.jsp:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html ng-app="myapp"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>企业人事管理系统</title> 8 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"> 9 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 10 <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script> 11 <script type="text/javascript" src="angularjs/angular.min.js"></script> 12 <script type="text/javascript"> 13 var app = angular.module("myapp", []); 14 var obj; 15 app.controller("mycontroller", function($scope, $http) { 16 $http.get('SelectAllServlet').then(function(response) { 17 $scope.item = response.data; 18 }); 19 }); 20 21 </script> 22 </head> 23 <body > 24 <div class="center-block" style="width: 80%"> 25 <div class="panel panel-primary"> 26 <div class="panel-heading"> 27 <h3>企业人事管理系统</h3> 28 </div> 29 <div class="panel-body text-center"> 30 <form action="SkipSelect.html"> 31 <div class="form-inline text-center"> 32 雇员姓名:<input type="text" id="uname" name="uname" 33 class="form-control" placeholder="请输入员工姓名"/> <br><br> 34 公司职位:<select name="type" id="type" class="form-control"> 35 <option value="1"> 行政助理 </option> 36 <option value="2"> 业务经理 </option> 37 <option value="3"> 总经理 </option> 38 </select><br><br><input type="submit" src="SelectServlet" class="btn btn-success"/> 39 </div> 40 </form> 41 </div> 42 </div> 43 </div> 44 <div ng-controller="mycontroller" class="center-block" style="width: 80%"> 45 <table class="table table-striped table-hover"> 46 <tr> 47 <th>ID</th> 48 <th>姓名</th> 49 <th>职位</th> 50 <th>部门</th> 51 <th>性别</th> 52 <th>入职时间</th> 53 </tr> 54 <tbody ng-repeat="obj in item"> 55 <tr> 56 57 <td>{{obj.id}}</td> 58 <td>{{obj.EMP_NAME}}</td> 59 <td>{{obj.post_typename}}</td> 60 <td>{{obj.EMP_DEPART}}</td> 61 <td>{{obj.EMP_SEXNAME}}</td> 62 <td>{{obj.EMP_YEAR}}</td> 63 64 </tr> 65 </tbody> 66 </table> 67 </div> 68 69 </body> 70 </html>
SkipSelect.html:
1 <!DOCTYPE html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>企业人事管理系统</title> 6 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"> 7 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 8 <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script> 9 <script type="text/javascript" src="angularjs/angular.min.js"></script> 10 <script type="text/javascript"> 11 12 function GetQueryString(name) { 13 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 14 var r = window.location.search.substr(1).match(reg); 15 if (r != null) 16 return unescape(r[2]); 17 return null; 18 } 19 var app = angular.module("myapp", []); 20 var obj; 21 app.controller('mycontroller', function($scope, $http) { 22 $http({ 23 method : 'GET', 24 params : { 25 "uname" : GetQueryString("uname"), 26 "type" : GetQueryString("type") 27 }, 28 url : 'SelectServlet' 29 30 }).then(function successCallback(response) { 31 32 $scope.item = response.data; 33 }, function errorCallback(response) { 34 alert("shibai"); 35 }); 36 37 }); 38 </script> 39 </head> 40 <body> 41 42 43 <div ng-controller="mycontroller" class="center-block" 44 style="width: 80%"> 45 <table class="table table-striped table-hover"> 46 <tr> 47 <th>ID</th> 48 <th>姓名</th> 49 <th>职位</th> 50 <th>部门</th> 51 <th>性别</th> 52 <th>入职时间</th> 53 </tr> 54 <tbody ng-repeat="obj in item"> 55 <tr> 56 57 <td>{{obj.id}}</td> 58 <td>{{obj.EMP_NAME}}</td> 59 <td>{{obj.post_typename}}</td> 60 <td>{{obj.EMP_DEPART}}</td> 61 <td>{{obj.EMP_SEXNAME}}</td> 62 <td>{{obj.EMP_YEAR}}</td> 63 64 </tr> 65 </tbody> 66 </table> 67 </div> 68 </body> 69 </html>
服务器端代码:
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 response.setCharacterEncoding("utf-8"); 3 IUserInfoService userInfoService = new UserInfoServiceImpl(); 4 List<Map<String, Object>> allUserInfo = userInfoService.getAllUserInfo(); 5 6 System.out.println(allUserInfo); 7 PrintWriter writer = response.getWriter(); 8 String jsonStr=JSONArray.toJSONString(allUserInfo); 9 System.out.println(jsonStr); 10 writer.print(jsonStr); 11 writer.flush(); 12 writer.close(); 13 }
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 response.setCharacterEncoding("utf-8"); 3 4 String uname = request.getParameter("uname"); 5 String type=request.getParameter("type"); 6 int i = Integer.parseInt(type); 7 IUserInfoService userInfoService = new UserInfoServiceImpl(); 8 List<Map<String, Object>> allUserInfo = userInfoService.getTheUserInfo(uname,i); 9 10 PrintWriter writer = response.getWriter(); 11 String jsonStr=JSONArray.toJSONString(allUserInfo); 12 writer.print(jsonStr); 13 writer.flush(); 14 writer.close(); 15 response.sendRedirect("SkipSelect.jsp"); 16 }
DAO层:
1 package dao.Impl; 2 3 import java.util.List; 4 import java.util.Map; 5 6 import DBUtils.DBUtils; 7 import dao.IUserInfoDAO; 8 9 public class UserInfoDAOImpl implements IUserInfoDAO { 10 DBUtils dbUtils = new DBUtils(); 11 12 public List<Map<String, Object>> findUserInfoAll() { 13 String sql = "select t.id,e.post_typename,t.EMP_NAME,t.EMP_SEX,t.EMP_DEPART,S.EMP_SEXNAME,t.EMP_YEAR from employee t,sex s,type e WHERE T.POST_TYPE=E.POST_TYPE AND S.EMP_SEX=T.EMP_SEX"; 14 return dbUtils.query(sql); 15 } 16 17 @Override 18 public List<Map<String, Object>> getTheUserInfoAll(String uname, int i) { 19 System.out.println(uname); 20 System.out.println(i); 21 String sql = "select t.id,e.post_typename,t.EMP_NAME,t.EMP_SEX,t.EMP_DEPART,S.EMP_SEXNAME,t.EMP_YEAR from employee t,sex s,type e WHERE T.POST_TYPE=E.POST_TYPE AND S.EMP_SEX=T.EMP_SEX and t.EMP_NAME=? AND t.POST_TYPE=?"; 22 return dbUtils.query(sql, uname, i); 23 } 24 25 }
sql:
1 /* 2 Navicat MySQL Data Transfer 3 4 Source Server : DKK 5 Source Server Version : 50512 6 Source Host : localhost:3306 7 Source Database : hrdb 8 9 Target Server Type : MYSQL 10 Target Server Version : 50512 11 File Encoding : 65001 12 13 Date: 2017-10-31 19:28:24 14 */ 15 16 SET FOREIGN_KEY_CHECKS=0; 17 -- ---------------------------- 18 -- Table structure for `employee` 19 -- ---------------------------- 20 DROP TABLE IF EXISTS `employee`; 21 CREATE TABLE `employee` ( 22 `id` int(4) NOT NULL, 23 `POST_TYPE` int(4) NOT NULL, 24 `EMP_NAME` varchar(100) DEFAULT NULL, 25 `EMP_SEX` int(4) DEFAULT NULL, 26 `EMP_AGE` int(4) DEFAULT NULL, 27 `EMP_DEPART` varchar(50) DEFAULT NULL, 28 `EMP_YEAR` int(4) DEFAULT NULL, 29 PRIMARY KEY (`id`) 30 ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 31 32 -- ---------------------------- 33 -- Records of employee 34 -- ---------------------------- 35 INSERT INTO `employee` VALUES ('1', '1', 'lilei', '1', '30', '生产部', '2005'); 36 INSERT INTO `employee` VALUES ('2', '2', '王大锤', '2', '26', '后勤部', '2012'); 37 INSERT INTO `employee` VALUES ('3', '1', '1', '1', '35', '后勤部', '2014'); 38 39 -- ---------------------------- 40 -- Table structure for `sex` 41 -- ---------------------------- 42 DROP TABLE IF EXISTS `sex`; 43 CREATE TABLE `sex` ( 44 `EMP_SEX` int(4) NOT NULL, 45 `EMP_SEXNAME` varchar(50) DEFAULT NULL, 46 PRIMARY KEY (`EMP_SEX`) 47 ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 48 49 -- ---------------------------- 50 -- Records of sex 51 -- ---------------------------- 52 INSERT INTO `sex` VALUES ('1', '男'); 53 INSERT INTO `sex` VALUES ('2', '女'); 54 55 -- ---------------------------- 56 -- Table structure for `type` 57 -- ---------------------------- 58 DROP TABLE IF EXISTS `type`; 59 CREATE TABLE `type` ( 60 `POST_TYPE` int(4) NOT NULL, 61 `POST_TYPENAME` varchar(50) DEFAULT NULL, 62 PRIMARY KEY (`POST_TYPE`) 63 ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 64 65 -- ---------------------------- 66 -- Records of type 67 -- ---------------------------- 68 INSERT INTO `type` VALUES ('1', '行政助理'); 69 INSERT INTO `type` VALUES ('2', '业务经理'); 70 INSERT INTO `type` VALUES ('3', '总经理');
世界精彩处见