上一节我们已经将数据库逻辑关系梳理完毕，这章节我们继续完善项目管理的功能逻辑。
项目管理需要包含的功能：
1：根据部门筛选出对应的所有项目
2：支持根据部门添加对应的新项目
3：项目列表支持删除
4：前端项目显示字段包含部门名称，项目名称，操作列，操作列对应删除。
综上需求，我们逐一实现。
仍在在我们之前部门管理章节提到的，在首页homepage.html中，部门管理标签下添加项目管理标签。
通过id关联方式实现点击事件：
后端/project路由函数实现。
在templates目录下新建project.html，其内容应包含，一个下拉框用于填充部门信息。
添加项目按钮。以及展示部门下对应项目的列表。
那么在加载project.html此界面时需要实现一个方法，此方法向服务器发起/get-all-departments的GET请求获取部门列表，并用这些数据填充部门选择框。
后端对应的/get-all-departme路由实现为：
与此同时，项目列表也需要刷新数据，那么我们在加载当前界面时还需要实现一个方法，用来填充项目表格数据。这个方法需要做的事情就是向后端发起post请求，根据当前部门id拿到所有与其关联的项目。展示在表格中。那么后端就需要实现一个接口来返回这些数据。
对应实现如下：
前端向服务器发起请求的逻辑实现：
function getProjectsByDeptId(deptId) {
if (!deptId) {
$('#project-table tbody').empty(); // 当部门未选择时, 清空项目表
return;
}
let data = JSON.stringify({"department_id": parseInt(deptId)});
$.ajax({
method: "POST",
url: "/get-projects-by-depid",
data: data,
contentType: "application/json",
}).done(function(res) {
// 清空当前项目表
$('#project-table tbody').empty();
// 只显示返回的前五个项目
let showingProjects = res.projects.slice(0, 5);
for (let project of showingProjects) {
$('#project-table tbody').append(`
<tr>
<td>${project.department_name}</td>
<td>${project.project_name}</td>
<td>
<button data-id="${project.id}" class="btn btn-primary" id="delete-project-btn">
删除
</button>
</td>
</tr>
`);
}
});
}
对应后端/get-projects-by-depid返回数据实现：
@app.route('/get-projects-by-depid', methods=['POST'])
def get_projects_by_depid():
if request.json:
dep_id = request.json.get('department_id')
sql = "SELECT p.id, d.name as department_name, p.name as project_name FROM project p INNER JOIN department d ON p.department_id = d.id WHERE p.department_id = {} and p.status = 1".format(dep_id, )
projects = db.select_data(sql)
projects_list = [{'id': p[0], 'department_name': p[1], 'project_name': p[2]} for p in projects]
return jsonify({'projects': projects_list})
else:
return jsonify({'error': 'No department id found.'}), 400
后端接口通过拿到前端传递的部门id-department_id数据，然后执行对应的sql语句去项目表中查询部门id对应所有的项目信息。以json数据格式返回给前端。
sql较为复杂，给大家解释一下：
- SELECT p.id, d.name as department_name, p.name as project_name：这部分要查询出项目的 ID，部门的名称，和项目的名称。
- FROM project p INNER JOIN department d ON p.department_id = d.id：这部分的作用是连接 project 表和 department 表，连接的条件是他们的 department_id 相等。即，查询出所有项目和其所属的部门。
- WHERE p.department_id = {} and p.status = 1：这部分是查询条件，它要求项目所属的部门 ID 等于dep_id，并且项目的状态为 1。这里的 {} 是 Python 的字符串格式化语法，实际运行时，需要将 dep_id 替换为某个具体的值。
那么到这里有的同学会可能产生疑问，如果我在下拉框中选择了其他部门，那么对应的项目数据如何展示。这里实现非常简单，当选择部门，选中后会触发部门选择框的change事件，此时会调用getProjectsByDeptId方法，刷新项目列表即可。具体实现如下：
// 当部门选择发生变化时，更新项目表
$('#department-select').on('change', function () {
getProjectsByDeptId(this.value);
});
注意这里的this.value。我们在上述实现部门下拉框填充的时候用到了：
<option value="${department.id}">${department.name}</option>
这种形式，所以获取它的value就是它的id值。
然后我们开始实现添加项目。
前端需要增加一个添加项目的按钮，点击以后触发弹窗，弹窗内输入项目名称，以及保存按钮。输入项目名称点击保存，向后端发送post请求保存当前数据，服务端接收到以后执行sql保存到数据库。返回执行结果给前端，前端再次调用getProjectsByDeptId方法刷新最新数据显示。具体实现如下：
// 点击添加项目按钮，显示弹出窗口
$('#add-project-btn').on('click', function () {
if ($('#department-select').val() === '') {
alert('请先选择一个部门');
return;
}
$('#new-project-modal').fadeIn();
});
// 保存新添加的项目
$('#save-project-btn').on('click', function () {
const projectName = $('#project-name-input').val();
const departmentId = $('#department-select').val();
if (!projectName || !departmentId) {
alert('请填写项目名称并选择部门');
return;
}
$.ajax({
url: '/add-project',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({department_id: departmentId, project_name: projectName}),
success: function (res) {
$('#project-name-input').val(''); // 清空输入框
$('#new-project-modal').fadeOut(); // 关闭弹窗
getProjectsByDeptId(departmentId); // 更新项目列表
},
error: function (err) {
console.error('添加项目失败', err);
},
});
});
后端/add-project接口：
@app.route('/add-project', methods=['POST'])
def add_project():
if request.json:
dep_id = request.json.get('department_id')
project_name = request.json.get('project_name')
# query = ("INSERT INTO project(department_id, name, status) VALUES (%s, %s, 1)")
# mycursor.execute(query, (dep_id, project_name,))
# mydb.commit()
sql = "INSERT INTO project(department_id, name, status) VALUES ({}, '{}', {})".format(dep_id, project_name, 1)
db.update_data(sql)
return jsonify({'result': 'success'})
else:
return jsonify({'error': 'No department id or project name found.'}), 400
最后我们实现删除逻辑：
点击项目列表中的"删除"按钮，删除项目。删除动作会向服务器发起/delete-project-by-id的POST请求，删除指定项目。delete-project-by-id，接收POST请求，接收请求中的project_id参数，修改数据库中指定项目的status为0表示删除项目。
具体实现如下：
前端：
// 删除项目
$('body').on('click', '#delete-project-btn', function () {
const projectId = $(this).data('id');
const departmentId = $('#department-select').val(); // 获取当前选中的部门ID
$.ajax({
url: '/delete-project-by-id',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({project_id: projectId}),
success: function (res) {
getProjectsByDeptId(departmentId); // 更新项目列表
},
error: function (err) {
console.error('删除项目失败', err);
},
});
});
});
后端：
@app.route('/delete-project-by-id', methods=['POST'])
def delete_project_by_id():
if request.json:
project_id = request.json.get('project_id')
# mycursor.execute("UPDATE project SET status=0 where id=%s", (project_id,))
# mydb.commit()
sql = "UPDATE project SET status=0 where id={}".format(project_id, )
db.update_data(sql)
return jsonify({'result': 'success'})
else:
return jsonify({'error': 'No project id found.'}), 400
到此 项目管理完整功能逻辑全部完成。
下一节：添加脚本功能逻辑实现，也是本平台的核心模块。敬请期待
