写一个基于node.js的api后台管理系统(二)

最新推荐文章于 2024-07-25 10:08:54 发布

袁代码

最新推荐文章于 2024-07-25 10:08:54 发布

阅读量348

点赞数

分类专栏：小白专区文章标签： node.js javascript 前端

本文链接：https://blog.csdn.net/qq_39653624/article/details/129041613

版权

小白专区专栏收录该内容

11 篇文章 0 订阅

订阅专栏

接下来我们写API输出的功能，以下是具体实现步骤：

定义API路由

在routes/tasks.js中添加以下代码：

router.get('/api', (req, res, next) => {
  Task.find((err, tasks) => {
    if (err) { return next(err); }
    res.json(tasks);
  });
});

router.get('/api/:id', (req, res, next) => {
  const id = req.params.id;
  Task.findById(id, (err, task) => {
    if (err) { return next(err); }
    res.json(task);
  });
});

以上代码创建了两个API路由：GET /api用于获取所有任务，GET /api/:id用于获取特定任务。我们使用Mongoose的查询方法获取数据库中的数据，并使用res.json方法将数据作为JSON对象返回。

将API路由添加到应用程序中

在app.js文件中添加以下代码：

app.use('/tasks', tasks);
app.use('/users', users);

app.get('/tasks/api', tasks);
app.get('/tasks/api/:id', tasks);

以上代码将/tasks/api和/tasks/api/:id路由添加到应用程序中。
现在，我们就可以使用以下URL来访问API：

获取所有任务：http://localhost:3000/tasks/api
获取特定任务：http://localhost:3000/tasks/api/:id

其中，:id表示特定任务的ID。

接下来我们还要写一个可视化的管理页面，以下是前端页面的实现步骤：

创建前端页面

在项目目录下创建一个名为public的文件夹，并在其中创建一个HTML文件index.html。添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Task Management</title>
</head>
<body>
  <h1>Task Management</h1>

  <form id="addTaskForm">
    <input type="text" name="name" placeholder="Task name">
    <input type="text" name="description" placeholder="Task description">
    <button type="submit">Add Task</button>
  </form>

  <hr>

  <table id="tasksTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Description</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

以上代码创建了一个表单，用于添加新任务，以及一个表格，用于显示所有任务。我们还引入了jQuery库和一个名为app.js的JavaScript文件。

实现前端页面功能

在public文件夹下创建一个名为app.js的JavaScript文件，添加以下代码：

$(function() {
  // 获取所有任务并显示在表格中
  $.get('/tasks/api', function(tasks) {
    for (var i = 0; i < tasks.length; i++) {
      var task = tasks[i];
      addTaskToTable(task._id, task.name, task.description);
    }
  });

  // 表单提交事件
  $('#addTaskForm').submit(function(e) {
    e.preventDefault();
    var name = $('input[name="name"]').val();
    var description = $('input[name="description"]').val();
    $.post('/tasks', { name: name, description: description }, function(task) {
      addTaskToTable(task._id, task.name, task.description);
      $('#addTaskForm')[0].reset();
    });
  });

  // 添加任务到表格中
  function addTaskToTable(id, name, description) {
    var tr = $('<tr>');
    tr.append($('<td>').text(id));
    tr.append($('<td>').text(name));
    tr.append($('<td>').text(description));
    tr.append($('<td>').html('<button class="deleteTaskButton" data-id="' + id + '">Delete</button>'));
    $('#tasksTable tbody').append(tr);
  }

  // 删除任务按钮点击事件
  $('#tasksTable').on('click', '.deleteTaskButton', function() {
    var id = $(this).data('id');
    $.ajax({
      url: '/tasks/' + id,
      type: 'DELETE',
      success: function() {
        $('#tasksTable tbody tr[data-id="' + id + '"]').remove();
      }
    });
  });
});