Next.js 在点击事件上更新 Json（或数据库）

Question

概述

我需要在 next.js 框架内的点击事件期间运行服务器端代码。

我是 node、react 和 next.js 的新手。我总是使用 PHP 和 JS 从头开始​​编写代码。我希望能够与团队合作并更快地构建网站，所以我认为学习 React 是个好主意。 Next.js 是最吸引人的 react 变体，因为它对 seo 友好且非常适合单页 web 应用。

我现在很难过，因为我在网上看到的没有人谈论过带有触发器的 XHR 发布请求。他们主要谈论“生成静态页面”，这远远不是我需要完成的。

我已经研究了好几天了，但无济于事，所以希望这里有人可以帮助一个菜鸟。我觉得这应该更明显。请有大量PHP背景的人解释一下。

应用程序

我正在制作一个简单的任务跟踪应用程序来自学 next.js。为了模拟数据库，我正在获取并保存到 JSON 文件。

我遇到的第一个问题是const fs = require('fs').promises;。

我可以使用let tasks = require('./dtaTask.json') 加载 json 数据，但我无法更新 JSON 文件，因为加载页面后无法使用“fs”。

然后我了解了getServerSideProps()方法，允许js使用'fs'。

我将我的mgrTask 代码放入修复了“fs”问题的getServerSideProps() 方法中。

我可以通过服务器发送 json 数据，但我无法发送对象以稍后通过按下按钮来更新 json 数据。

我知道我可以简单地使用 fetch 读取文件，但我不想只读取文件。我需要更新它，并且我需要该对象可重用于将来的查询。

要求

页面加载：

• 加载了一个允许查询和更新数据库的对象 (mgrTask)（用于测试的 JSON）。
• 所有当前任务都使用 mgrTask 从数据库中获取，并使用数组加载到内存中。

删除触发器：

• 任务已从客户端浏览器中删除。
• mgrTask 要么重新创建，要么从页面加载中调用。
• mgrTask 在给定 taskID 时从数组中删除任务。
• mgrTask 使用内存中的数组更新数据库。

(firstpost.js) 页面代码

import { Header } from '../../export/components/Header'
import { GenButton } from '../../export/components/genButton'
import { Task } from '../../export/components/tasks/Task'
import { useState } from 'react'
import { mgrTask } from '../../export/components/tasks/mgrTask'

export default function firstpost({ dtaTasks }) {
  const [tasks, setTasks] = useState(dtaTasks.getAll())

  // Delete Task
  function deleteTask(taskID) {
    console.log('delete ' + taskID)
    setTasks(tasks.filter((task) => task.taskID !== taskID ))
    dtaTasks.delete(taskID)
  }

  return (
    <div className="holder">
      <div className="container">
        <Header className="header" />
        <Task tasks={tasks} deleteTask={deleteTask} />
      </div>
      <GenButton className="centered" text='Home' href='/' />
    </div>
  )
}

export async function getServerSideProps() {
  var dtaTasks = []
  dtaTasks = mgrTask

  return {
    props: {
      dtaTasks
    }
  }
}

(mgrTask.js) 数据库表管理器代码

const fs = require('fs').promises;
let tasks = require('./dtaTask.json')

export const mgrTask = {
  getAll: () => tasks,
  getById: id => tasks.find(x => x.id.toString() === id.toString()),
  find: x => tasks.find(x),
  create,
  update,
  delete: _delete
};

function create(task) {
  // generate new user id
  task.id = tasks.length ? Math.max(...tasks.map(x => x.id)) + 1 : 1;

  // set date created and updated
  task.dateCreated = new Date().toISOString();
  task.dateUpdated = new Date().toISOString();

  // add and save task
  tasks.push(task);
  saveData();
}

function update(id, params) {
  const task = tasks.find(x => x.id.toString() === id.toString());

  // set date updated
  task.dateUpdated = new Date().toISOString();

  // update and save
  Object.assign(task, params);
  saveData();
}

// prefixed with underscore '_' because 'delete' is a reserved word in javascript
function _delete(taskID) {
  // filter out deleted task and save
  tasks = tasks.filter(x => x.taskID.toString() !== taskID.toString());
  saveData();
}

function saveData() {
  fs.writeFileSync('data/tasks.json', JSON.stringify(tasks, null, 4));
}

Answer 1

Next.js 支持发布请求 api。

将发布请求附加到按钮调用的函数。在 pages 文件夹中包含一个 api 目录。创建一个用于处理包含 mgrTask 的发布请求的文件。将需要的数据发送到 mgrTask 以处理数据库更新。

函数 Btn 调用

  async function updateTasks(allTasks) {
    const response = await fetch('../api/tasks.js', {
      method:'POST',
      body: {allTasks},
      headers: {
        'Content-Type': 'application/json',
      },
    })
    const res = await response
    console.log(res)
  }

后处理 API

import { mgrTask } from '../../export/components/tasks/mgrTask'

export default function handler(req, res) {
  if (req.method === 'POST') {
    mgrTask.saveData(req.body.allTasks)
    res.status(201).json({ updatePage: 'if you need data from the server' })
  }
}

https://nextjs.org/docs/api-routes/introduction