编程练习打卡
来源：2-8 自由编程
浅梦sky
2021-01-08 23:18:21
前端的代码我是用的webstrom，后端用的IDEA
1、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工页面</title>
<link rel="stylesheet" href="css/employeeList.css">
<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
<script src="js/employee.js" type="text/javascript"></script>
</head>
<body>
<!--Containerdiv-->
<div class="container">
<!--按钮区域-->
<div class="btn_div">
<!--员工列表按钮-->
<input type="button" value="员工列表" class="empList_btn" id="empList_btn">
<!--职位列表按钮-->
<input type="button" value="职位列表" class="jobList_btn" id="jobList_btn">
<!--员工职位列表按钮-->
<input type="button" value="部门列表" class="departmentList_btn" id="departmentList_btn">
</div>
<ul class="showList"></ul>
</div>
</body>
</html>
2、css代码：
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
justify-content: center;
}
.container{
width: 620px;
height: 200px;
background-color: lightpink;
}
.container input{
width: 200px;
height: 30px;
}
.container .btn_div{
display: flex;
justify-content: space-between;
}
.container .showList{
width: 100%;
background-color: lightgreen;
display: flex;
flex-direction: column;
align-items: center;
}
.container .showList > li{
margin-top: 5px;
list-style-type: square;
transition: 0.5s;
}
3、js代码：
/*加载页面元素*/
$(function () {
// 获取员工列表按钮对象
var empList_btn = $("#empList_btn");
// 获取职位列表按钮
var jobList_btn = $("#jobList_btn");
// 获取部门按钮
var departmentList_btn = $("#departmentList_btn");
// 获取列表ul
var showListUl = $(".showList");
/*员工列表按钮绑定点击事件*/
empList_btn.click(function () {
$(".showList > li").remove();
// 1.创建XMLHttpReqester对象
var xmlHttpRequest;
if (window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
// 2.创建ajax请求
xmlHttpRequest.open("get","http://localhost:8080/ImoocWebProj2/employeeList",true);
// 3.发送请求
xmlHttpRequest.send();
// 4.处理服务器响应后的结果
xmlHttpRequest.onreadystatechange = function () {
// 成功接收响应文本并请服务器响应成功
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
// 接收响应的文本
var employeeListText = xmlHttpRequest.responseText;
// 转换成json对象
var employeeList = JSON.parse(employeeListText);
// 遍历员工数组
for (var i = 0; i < employeeList.length; i++){
// 获取每个员工
var employee = employeeList[i];
// 将员工的名字添加到列表中
showListUl.append("<li>"+employee.employeeName+"</li>");
}
}
}
});
/*职位列表按钮绑定点击事件*/
jobList_btn.click(function () {
$(".showList > li").remove();
// 1.创建XMLHttpReqester对象
var xmlHttpRequest;
if (window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
// 2.创建ajax请求
xmlHttpRequest.open("get","http://localhost:8080/ImoocWebProj2/jobList",true);
// 3.发送请求
xmlHttpRequest.send();
// 4.处理服务器响应后的结果
xmlHttpRequest.onreadystatechange = function () {
// 成功接收响应文本并请服务器响应成功
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
// 接收响应的文本
var jobListText = xmlHttpRequest.responseText;
// 转换成json对象
var jobList = JSON.parse(jobListText);
if (jobList == null){
showListUl.append("<li>获取失败，您还没有获取员工列表，请先点击员工列表！！！</li>");
return;
}
// 遍历职位数组
for (var i = 0; i < jobList.length; i++){
// 获取每个职位名称
var job = jobList[i];
// 将员工的名字添加到列表中
showListUl.append("<li>"+job+"</li>");
}
}
}
});
/*部门列表按钮绑定点击事件*/
departmentList_btn.click(function () {
$(".showList > li").remove();
// 1.创建XMLHttpReqester对象
var xmlHttpRequest;
if (window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
// 2.创建ajax请求
xmlHttpRequest.open("get","http://localhost:8080/ImoocWebProj2/departmentList",true);
// 3.发送请求
xmlHttpRequest.send();
// 4.处理服务器响应后的结果
xmlHttpRequest.onreadystatechange = function () {
// 成功接收响应文本并请服务器响应成功
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
// 接收响应的文本
var departmentListText = xmlHttpRequest.responseText;
// 转换成json对象
var departmentList = JSON.parse(departmentListText);
if (departmentList == null){
showListUl.append("<li>获取失败，您还没有获取员工列表，请先点击员工列表！！！</li>");
return;
}
// 遍历职位数组
for (var i = 0; i < departmentList.length; i++){
// 获取每个职位名称
var department = departmentList[i];
// 将员工的名字添加到列表中
showListUl.append("<li>"+department+"</li>");
}
}
}
});
});
4、员工类(Employee.java)
/**
* @author 浅梦
* @Description：员工类
* @date 2021/1/8 21:09
*/
public class Employee {
// 员工名称
private String employeeName;
// 员工职位
private String job;
// 所在部门
private String department;
public Employee() {
}
public Employee(String employeeName, String job, String department) {
this.employeeName = employeeName;
this.job = job;
this.department = department;
}
public String getEmployeeName() {
return employeeName;
}
public void setEmployeeName(String employeeName) {
this.employeeName = employeeName;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
}
5、员工列表Servlet(EmployeeListServlet.java)
import com.google.gson.Gson;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* @author 浅梦
* @Description：
* @date 2021/1/8 21:12
*/
@WebServlet(name = "employeeListServlet",urlPatterns = "/employeeList")
public class EmployeeListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 处理跨域请求
/* 允许跨域的主机地址 */
response.setHeader("Access-Control-Allow-Origin","*");
/* 允许跨域的请求方法GET, POST, HEAD 等 */
response.setHeader("Access-Control-Allow-Methods","*");
/* 重新预检验跨域的缓存时间 (s) */
response.setHeader("Access-Control-Max-Age","4200");
/* 允许跨域的请求头 */
response.setHeader("Access-Control-Allow-Headers","*");
/* 是否携带cookie */
response.setHeader("Access-Control-Allow-Credentials","true");
// 创建三个员工
Employee xiaoHong = new Employee( "小红","经理","人事部" );
Employee xiaoMing = new Employee( "小明","职员","技术部" );
Employee xiaoBai = new Employee( "小白","职员","无线事业部" );
// 创建员工集合并存储员工
List<Employee> employeeList = new ArrayList<Employee>();
employeeList.add( xiaoHong );
employeeList.add( xiaoMing );
employeeList.add( xiaoBai );
// 将员工信息保存在ServletContext中
ServletContext servletContext = request.getServletContext();
servletContext.setAttribute( "employeeList",employeeList );
// 使用Gson将集合转换为json字符串
Gson gson = new Gson();
String jsonStr = gson.toJson( employeeList );
// 将json字符串返回给浏览器
response.setContentType( "text/html; charset=UTF-8" );
response.getWriter().println(jsonStr);
}
}
6、员工职位Servlet(EmployeeJobList.java)
import com.google.gson.Gson;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
/**
* @author 浅梦
* @Description：职位Servlet
* @date 2021/1/8 21:56
*/
@WebServlet(name = "jobServlet",urlPatterns = "/jobList")
public class EmployeeJobServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 处理跨域请求
/* 允许跨域的主机地址 */
response.setHeader("Access-Control-Allow-Origin","*");
/* 允许跨域的请求方法GET, POST, HEAD 等 */
response.setHeader("Access-Control-Allow-Methods","*");
/* 重新预检验跨域的缓存时间 (s) */
response.setHeader("Access-Control-Max-Age","4200");
/* 允许跨域的请求头 */
response.setHeader("Access-Control-Allow-Headers","*");
/* 是否携带cookie */
response.setHeader("Access-Control-Allow-Credentials","true");
response.setContentType( "text/html; charset=UTF-8" );
// 从ServletContext中获取员工列表
ServletContext servletContext = request.getServletContext();
List<Employee> employeeList = (List<Employee>) servletContext.getAttribute( "employeeList" );
if (employeeList == null){
response.getWriter().println("null");
return;
}
Set<String> jobSet = new HashSet<String>();
for (Employee employee : employeeList){
// 获取职位
String job = employee.getJob();
// 将职位放入set集合中
jobSet.add( job );
}
// 将职位set集合转换为json字符串
Gson gson = new Gson();
String jobJsonStr = gson.toJson( jobSet );
// 并返回给浏览器
response.getWriter().println(jobJsonStr);
}
}
7、员工部门Servlet(EmployeeDepartmentServlet.java):
import com.google.gson.Gson;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
/**
* @author 浅梦
* @Description：员工部门
* @date 2021/1/8 22:54
*/
@WebServlet(name = "departmentServlet",urlPatterns = "/departmentList")
public class EmployeeDepartmentServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 处理跨域请求
/* 允许跨域的主机地址 */
response.setHeader("Access-Control-Allow-Origin","*");
/* 允许跨域的请求方法GET, POST, HEAD 等 */
response.setHeader("Access-Control-Allow-Methods","*");
/* 重新预检验跨域的缓存时间 (s) */
response.setHeader("Access-Control-Max-Age","4200");
/* 允许跨域的请求头 */
response.setHeader("Access-Control-Allow-Headers","*");
/* 是否携带cookie */
response.setHeader("Access-Control-Allow-Credentials","true");
response.setContentType( "text/html; charset=UTF-8" );
// 从ServletContext中获取员工列表
ServletContext servletContext = request.getServletContext();
List<Employee> employeeList = (List<Employee>) servletContext.getAttribute( "employeeList" );
if (employeeList == null){
response.getWriter().println("null");
return;
}
// 创建存放部门的集合
Set<String> departmentSet = new HashSet<String>();
// 遍历员工列表
for (Employee employee : employeeList){
// 获取部门
String department = employee.getDepartment();
// 将职位放入set集合中
departmentSet.add( department );
}
// 将部门set集合转换为json字符串
Gson gson = new Gson();
String departmentJsonStr = gson.toJson( departmentSet );
// 并返回给浏览器
response.getWriter().println(departmentJsonStr);
}
}
写回答
1回答
-
好帮手慕阿园
2021-01-09
同学你好，测试代码效果完成的不错，很棒，但是这里可以使用一个servlet来完成
同学可以参考下如下同学的实现思路
https://class.imooc.com/course/qadetail/238933
祝学习愉快~
0
