好的，这里是使用
HTML+CSS+
JS实现的
前端代码以及使用Java+MySQL+MyBatis实现的
后端代码。
前端代码：index.
html
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>智能排班系统</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>智能排班系统</h1>
<div>
<label for="employees">请选择员工：</label>
<select id="employees"></select>
</div>
<div>
<label for="startDate">请选择开始日期：</label>
<input id="startDate" type="date">
</div>
<div>
<label for="endDate">请选择结束日期：</label>
<input id="endDate" type="date">
</div>
<div>
<button id="submit">提交</button>
</div>
<div>
<h2>排班结果</h2>
<table>
<thead>
<tr>
<th>日期</th>
<th>员工</th>
<th>班次</th>
</tr>
</thead>
<tbody id="shifts"></tbody>
</table>
</div>
<script src="main.
js"></script>
</body>
</
html>
```
前端代码主要包括一个表单和一个用于显示排班结果的表格。在表单
中，用户可以选择员工、开始日期和结束日期，并点击提交按钮。提交按钮的点击事件会向
后端发送一个POST请求，请求体
中包含选择的员工ID和开始日期、结束日期。当
后端返回排班结果时，
前端会将结果显示在表格
中。
前端代码：style.css
```css
h1 {
font-size: 36px;
text-align: center;
margin-bottom: 30px;
}
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 150px;
}
select, input, button {
font-size: 18px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
```
前端代码
中的CSS样式主要用于美化页面。
前端代码：main.
js
```javascript
const employees = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
const employeesSelect = document.getElementById('employees')
employees.forEach(employee => {
const option = document.createElement('option')
option.value = employee.id
option.text = employee.name
employeesSelect.add(option)
})
const submitButton = document.getElementById('submit')
const startDateInput = document.getElementById('startDate')
const endDateInput = document.getElementById('endDate')
const shiftsTable = document.getElementById('shifts')
submitButton.addEventListener('click', async () => {
const employeeId = employeesSelect.value
const startDate = startDateInput.value
const endDate = endDateInput.value
const response = await fetch('/schedule', {
method: 'POST',
headers: {
'Content-Type': 'application/
json'
},
body:
JSON.stringify({
employeeId,
startDate,
endDate
})
})
const shifts = await response.
json()
shiftsTable.inner
HTML = ''
shifts.forEach(shift => {
const row = document.createElement('tr')
const dateCell = document.createElement('td')
dateCell.innerText = shift.date
row.appendChild(dateCell)
const employeeCell = document.createElement('td')
employeeCell.innerText = shift.employee
row.appendChild(employeeCell)
const shiftCell = document.createElement('td')
shiftCell.innerText = shift.shift
row.appendChild(shiftCell)
shiftsTable.appendChild(row)
})
})
```
前端代码
中的
JS主要用于处理表单提交事件以及将排班结果显示在表格
中。
后端代码：Employee.java
```java
public class Employee {
private int id;
private String name;
public Employee() {}
public Employee(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
```
后端代码
中的Employee类表示员工的数据模型。
后端代码：Shift.java
```java
public class Shift {
private String date;
private Employee employee;
private String shift;
public Shift() {}
public Shift(String date, Employee employee, String shift) {
this.date = date;
this.employee = employee;
this.shift = shift;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public Employee getEmployee() {
return employee;
}
public void setEmployee(Employee employee) {
this.employee = employee;
}
public String getShift() {
return shift;
}
public void setShift(String shift) {
this.shift = shift;
}
}
```
后端代码
中的Shift类表示排班的数据模型。
后端代码：ShiftMapper.java
```java
public interface ShiftMapper {
List<Shift> selectShifts(int employeeId, String startDate, String endDate);
}
```
后端代码
中的ShiftMapper接口定义了一个方法用于查询排班结果。
后端代码：ShiftMapper.xml
```xml
<mapper namespace="com.example.mapper.ShiftMapper">
<resultMap id="shiftMap" type="com.example.
model.Shift">
<result property="date" column="date"/>
<association property="employee" javaType="com.example.
model.Employee">
<result property="id" column="employee_id"/>
<result property="name" column="employee_name"/>
</association>
<result property="shift" column="shift"/>
</resultMap>
<select id="selectShifts" resultMap="shiftMap">
select s.date, e.id as employee_id, e.name as employee_name, s.shift
from shifts s
join employees e on s.employee_id = e.id
where s.employee_id = #{employeeId} and s.date between #{startDate} and #{endDate}
order by s.date
</select>
</mapper>
```
后端代码
中的ShiftMapper.xml文件定义了一个selectShifts查询语句，用于查询指定员工在指定日期范围内的排班结果。
后端代码：ShiftDAO.java
```java
public class ShiftDAO {
private Sql
SessionFactory
sessionFactory;
public ShiftDAO() {
String resource = "mybatis-config.xml";
Reader reader = null;
try {
reader = Resources.getResourceAsReader(resource);
} catch (IOException e) {
e.printStackTrace();
}
sessionFactory = new Sql
SessionFactoryBuilder().build(reader);
}
public List<Shift> selectShifts(int employeeId, String startDate, String endDate) {
try (Sql
Session session =
sessionFactory.open
Session()) {
ShiftMapper mapper =
session.getMapper(ShiftMapper.class);
return mapper.selectShifts(employeeId, startDate, endDate);
}
}
}
```
后端代码
中的ShiftDAO类用于访问数据库，并调用ShiftMapper
中的方法查询排班结果。
后端代码：ScheduleServlet.java
```java
public class ScheduleServlet extends HttpServlet {
private ShiftDAO shiftDAO = new ShiftDAO();
@Override
protected void doPost(HttpServlet
Request request, HttpServletResponse response) throws ServletException, IOException {
int employeeId = Integer.parseInt(
request.getParameter("employeeId"));
String startDate =
request.getParameter("startDate");
String endDate =
request.getParameter("endDate");
List<Shift> shifts = shiftDAO.selectShifts(employeeId, startDate, endDate);
response.setContentType("application/
json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(new Gson().to
Json(shifts));
}
}
```
后端代码
中的ScheduleServlet类用于处理
前端发送的POST请求，并调用ShiftDAO
中的方法查询排班结果，并将结果以
JSON格式返回给
前端。
后端代码：mybatis-config.xml
```xml
<configuration>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/scheduling"/>
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="com/example/mapper/ShiftMapper.xml"/>
</mappers>
</configuration>
```
后端代码
中的mybatis-config.xml文件用于配置MyBatis，指定连接MySQL数据库的信息和ShiftMapper.xml文件的位置。
这就是使用
HTML+CSS+
JS实现的
前端代码以及使用Java+MySQL+MyBatis实现的
后端代码。由于篇幅限制，这里只给出了代码的关键部分，如果需要完整代码，可以自行拼接。
注意，这里没有使用的是span标签的，th:text属性来获取后端数据，这点至关重要，后面会详说
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
