三、数据库设计
四、功能模块实现
1、管理员登录
（1）新建web/login.html（登录页面）
（2）在web/WEB-INF/web.xml中配置项目的首页面
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--配置项目的首页面-->
<welcome-file-list>
<welcome-file>login.html</welcome-file>
</welcome-file-list>
</web-app> |
（3）具体代码如下：
前端代码 |
web/login.html文件 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--浏览器标题栏小图标-->
<title>员工管理</title>
<!--浏览器标题栏文字内容-->
<link rel="icon" href="./favicon.ico">
<!--引入外部的CSS文件：公共样式-->
<link rel="stylesheet" href="./css/common.css">
<!--引入外部的CSS文件：本页面样式-->
<link rel="stylesheet" href="./css/login.css">
<script src="./js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="box">
<img src="./imgs/bg.png" alt="">
<div>
<h2>员工管理后台-登录</h2>
<form action="#">
<span class="item item1"></span>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<br><br>
<span class="item item2"></span>
<input type="password" name="password" id="password" placeholder="请输入密码">
<br><br><br>
<p onclick="login()">登录</p>
</form>
</div>
</div>
</body>
<script>
function login() {
// 数据的前端验证（非空验证）
let username = $('#username').val();
if (username == null || username == "") {
alert("用户名不能为空！");
return false;
}
let password = $('#password').val();
if (password == null || password == "") {
alert("密码不能为空！");
return false;
}
// 发送ajax请求
$.ajax({
type: "post",
url: "login",
data: {
username: username,
password: password
},
success: function (res) {
let obj = JSON.parse(res);
if (obj.code == 200) {
window.location.href = "employeeList.html";
} else {
alert("用户名或密码错误！");
}
}
});
}
</script>
</html> |
web/css/login.css文件 body {
background-color: rgb(43, 115, 220);
}
.box {
width: 860px;
height: 360px;
background-color: #FFF;
margin: 150px auto;
border-radius: 20px;
}
.box>img {
display: block;
float: left;
margin: 80px 0 0 60px;
}
.box>div {
float: right;
margin-right: 60px;
}
h2 {
padding-left: 20px;
text-align: left;
margin-top: 60px;
font-size: 18px;
color: rgba(0, 0, 0, 0.7);
letter-spacing: 10px;
}
form {
width: 300px;
height: auto;
padding: 30px 20px 20px;
}
form span {
display: inline-block;
width: 20px;
height: 20px;
background-size: 20px 20px;
position: absolute;
margin: 6px 0 0 6px;
}
form .item1 {
background-image: url(../imgs/username.png);
}
form .item2 {
background-image: url(../imgs/password.png);
}
#username,
#password {
width: 180px;
height: 24px;
line-height: 24px;
padding: 4px 10px 4px 40px;
color: #aaa;
outline: none;
border: 1px solid #ccc;
border-radius: 4px;
}
form>p {
width: 230px;
height: 32px;
line-height: 32px;
text-align: center;
letter-spacing: 10px;
background-color: rgb(64, 158, 255);
border-radius: 6px;
color: #FFF;
font-size: 14px;
}
form>p:hover {
cursor: pointer;
font-weight: 700;
} |
后端代码 |
控制层：com.emp.controller.LoginServlet package com.emp.controller;
import com.emp.model.Employee;
import com.emp.service.EmployeeService;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 管理员登录
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取请求参数（管理员登录信息）
String username = req.getParameter("username");
String password = req.getParameter("password");
Employee employee = new Employee();
employee.setUsername(username);
employee.setPassword(password);
EmployeeService service = new EmployeeService();
// 设置响应内容类型
resp.setContentType("text/html;charset=UTF-8");
// 获取输出流（写给客户端浏览器）
PrintWriter out = resp.getWriter();
String str = service.login(employee);
// 将响应数据（JSON字符串）写给客户端浏览器
out.write(str);
}
} |
服务层：com.emp.service.EmployeeService package com.emp.service;
import com.alibaba.fastjson.JSON;
import com.emp.dao.EmployeeDao;
import com.emp.model.Employee;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
/**
* 员工服务层类：处理员工的业务逻辑
*/
public class EmployeeService {
/**
* 创建员工数据访问层对象
*/
private EmployeeDao dao = new EmployeeDao();
/**
* 管理员登录
* @param employee：封装的管理员信息的Employee对象
*/
public String login(Employee employee) {
Employee loginEmployee = dao.selectLogin(employee);
HashMap<String, Object> map = new HashMap<>();
if (loginEmployee != null) {
map.put("code", 200);
map.put("data", loginEmployee);
} else {
map.put("code", 500);
map.put("data", null);
}
return JSON.toJSONString(map);
}
} |
数据访问层：com.emp.dao.EmployeeDao package com.emp.dao;
import com.emp.model.Employee;
import com.emp.util.DBUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
* 员工数据访问类：对数据库表employee 进行增删改查
*/
public class EmployeeDao {
/**
* 获取数据库连接对象
*/
private static Connection connection = DBUtil.getConnection();
/**
* 根据用户名和密码进行查询（role：管理员）
*
* @param condition：封装的管理员信息的Employee对象
* @return 管理员对应的Employee对象
*/
public Employee selectLogin(Employee condition) {
Employee employee = null;
String sql = "select * from employee where username=? and password=? and role=1 and deleted=0";
try {
PreparedStatement ps = connection.prepareStatement(sql);
ps.setString(1, condition.getUsername());
ps.setString(2, condition.getPassword());
ResultSet resultSet = ps.executeQuery();
while (resultSet.next()) {
int id = resultSet.getInt("id");
int age = resultSet.getInt("age");
int workTime = resultSet.getInt("workTime");
String username = resultSet.getString("username");
String password = resultSet.getString("password");
String name = resultSet.getString("name");
String introduction = resultSet.getString("introduction");
String hometown = resultSet.getString("hometown");
String phone = resultSet.getString("phone");
String createTime = resultSet.getString("createTime");
int role = resultSet.getInt("role");
int sex = resultSet.getInt("sex");
int level = resultSet.getInt("level");
// 创建Employee对象
employee = new Employee();
employee.setId(id);
employee.setUsername(username);
employee.setPassword(password);
employee.setRole(role);
employee.setName(name);
employee.setSex(sex);
employee.setAge(age);
employee.setLevel(level);
employee.setIntroduction(introduction);
employee.setHometown(hometown);
employee.setWorkTime(workTime);
employee.setPhone(phone);
employee.setCreateTime(createTime);
}
} catch (SQLException e) {
e.printStackTrace();
}
return employee;
}
} |
数据模型层：com.emp.model.Employee public class Employee {
private int id;
private String username;
private String password;
private int role;
private String name;
private int sex;
private int age;
private int level;
private String introduction;
private String hometown;
private int workTime;
private String phone;
private String createTime;
// 省略属性的set和get方法（通过IDEA自己生成）
} |
运行截图 |
登录页面效果图
|
功能执行流程分析 |
打开浏览器的“开发人员工具”，并选择“网络”
分析 1、输入正确的管理员的用户名和密码，点击登录按钮 此时可以看到，客户端浏览器给服务器发送的请求，如下：
2、服务器接收到请求（Tomcat负责），根据请求映射到对应的Servlet类：com.emp.controller.LoginServlet，执行该类的doPost()方法； 在doPost方法中调用服务层com.emp.service.EmployeeService类的login()方法； 在login()方法中调用数据访问层com.emp.dao.EmployeeDao类的selectLogin()方法 |
