后端接口与前端页面的融合：打造项目管理系统的增删改查功能

2023-09-26 21:49:23

前言

在上一篇文章中，我们已经编写好了添加项目和查询项目两个接口，现在我们继续编写删除项目和修改项目两个接口，以便完成项目的增删改查功能。同时，我们将把这些接口应用到项目管理系统的页面中，让用户能够使用这些接口来管理项目。

编写删除项目接口

首先，我们编写删除项目接口。该接口的请求方式为DELETE，请求地址为/project/{id}，其中{id}为项目ID。当用户想要删除一个项目时，只需要将要删除项目的ID作为请求参数传递给该接口即可。接口的返回结果为一个JSON对象，包含一个字段：success，值为true或false。如果删除成功，success的值为true；如果删除失败，success的值为false。

// 编写删除项目接口
Route::delete('/project/{id}', function ($id) {
    // 根据ID查询项目
    $project = Project::find($id);

    // 判断项目是否存在
    if (!$project) {
        return response()->json(['success' => false, 'message' => '项目不存在']);
    }

    // 删除项目
    $project->delete();

    // 返回结果
    return response()->json(['success' => true]);
});

编写修改项目接口

接下来，我们编写修改项目接口。该接口的请求方式为PUT，请求地址为/project/{id}，其中{id}为项目ID。当用户想要修改一个项目时，只需要将要修改的项目ID和项目信息作为请求参数传递给该接口即可。接口的返回结果为一个JSON对象，包含一个字段：success，值为true或false。如果修改成功，success的值为true；如果修改失败，success的值为false。

// 编写修改项目接口
Route::put('/project/{id}', function ($id) {
    // 根据ID查询项目
    $project = Project::find($id);

    // 判断项目是否存在
    if (!$project) {
        return response()->json(['success' => false, 'message' => '项目不存在']);
    }

    // 获取请求参数
    $data = request()->all();

    // 更新项目信息
    $project->update($data);

    // 返回结果
    return response()->json(['success' => true]);
});

应用接口到页面

现在，我们已经编写好了项目的增删改查接口，接下来我们将把这些接口应用到项目管理系统的页面中。

添加项目页面

在添加项目页面，我们需要有一个表单，其中包含项目名称、项目、项目开始时间和项目结束时间四个输入框。当用户填写好信息后，点击提交按钮，表单数据将被提交到后端的添加项目接口。接口返回成功后，页面将跳转到项目列表页面。

<!-- 添加项目页面 -->
<form action="/project" method="post">
    <input type="text" name="name" placeholder="项目名称">
    <input type="text" name="description" placeholder="项目">
    <input type="date" name="start_date" placeholder="项目开始时间">
    <input type="date" name="end_date" placeholder="项目结束时间">
    <button type="submit">提交</button>
</form>

查询项目页面

在查询项目页面，我们需要有一个表格，其中包含项目ID、项目名称、项目描述、项目开始时间和项目结束时间五列。当用户点击查询按钮时，页面将向后端的查询项目接口发送请求，接口返回数据后，表格将被填充。

<!-- 查询项目页面 -->
<table border="1">
    <thead>
        <tr>
            <th>项目ID</th>
            <th>项目名称</th>
            <th>项目描述</th>
            <th>项目开始时间</th>
            <th>项目结束时间</th>
        </tr>
    </thead>
    <tbody>
        <!-- 使用循环来填充表格数据 -->
    </tbody>
</table>

删除项目页面

在删除项目页面，我们需要有一个表格，其中包含项目ID、项目名称、项目描述、项目开始时间和项目结束时间五列。当用户勾选要删除的项目后，点击删除按钮，页面将向后端的删除项目接口发送请求，接口返回成功后，页面将刷新，表格中被勾选的项目将被删除。

<!-- 删除项目页面 -->
<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" name="all"></th>
            <th>项目ID</th>
            <th>项目名称</th>
            <th>项目描述</th>
            <th>项目开始时间</th>
            <th>项目结束时间</th>
        </tr>
    </thead>
    <tbody>
        <!-- 使用循环来填充表格数据 -->
    </tbody>
</table>
<button type="button" id="delete-button">删除</button>

修改项目页面

在修改项目页面，我们需要有一个表单，其中包含项目名称、项目描述、项目开始时间和项目结束时间四个输入框。当用户填写好信息后，点击提交按钮，表单数据将被提交到后端的修改项目接口。接口返回成功后，页面将跳转到项目列表页面。

<!-- 修改项目页面 -->
<form action="/project/{id}" method="put">
    <input type="text" name="name" placeholder="项目名称">
    <input type="text" name="description" placeholder="项目描述">
    <input type="date" name="start_date" placeholder="项目开始时间">
    <input type="date" name="end_date" placeholder="项目结束时间">
    <button type="submit">提交</button>
</form>