Question

我是node.js的新手！我正在尝试编写由node.js服务器呈现的注释部分。我有一个json文件，并将其值传递到ejs文件中，到目前为止，它可以正常显示。现在，我添加了一个注释部分，其中包含输入字段和提交按钮，所以我的问题是：在我单击提交按钮之后，是否可以将注释部分中的输入添加回现有的json文件，以添加新内容，然后重写json文件，然后重新呈现所有内容？

我尝试添加事件侦听器以获取值，然后尝试使用JSON.stringfy（）获取字符串...然后我不知道从现在开始该去哪里，因为我不知道上面的问题是否可能？

在不可能的情况下，我该怎么做才能保留旧数据，同时添加新数据并将其呈现到屏幕上？如果不涉及数据库，那么localStorage是我唯一的选择吗？

Answer 1

现在我或多或少地解决了我的问题！

这是我如何解决的。这是我的fans.json（对不起，经过测试并多次重写后，格式不好）

{"comments":[
{"name":"Anna","message":"I love your show last summer in Stockholm! Best summer concert I've been to!"},
{"name":"Jason","message":"This is War is the best album I've ever bought, I can't get tired of listening to it all the time."},
{"name":"Hansel","message":"When are you guys coming to Germany again?"},{"name":"Ash","message":"My favorite song is Up in the Air. It always makes me happy and wanna dance!"}]}

首先，我在fans.ejs中创建了模板

<section class="content-section container">
      <h2>Dear fans, we'd love to hear from you!</h2>
        <% fans.comments.forEach((comment) => { %>
                <p class="name"><%= comment.name%></p>
                <p class="message"><%= comment.message%></p>
         <% }) %>

     <div id="commentDom">
       </div>
 </section>

 <div class="comment">
        <label for="full-name">Name</label>
         <input id="full-name" name="full-name" type="text"/>
         <label for="message">Comment</label>
          <textarea id="message" name="message"></textarea>
          <button class="btn btn-primary" value="submit">Submit</button>
  </div>

然后我在fan.js中编写了这一部分（还有更多内容，但我只想强调与server.js交互的部分

document.querySelector('button').addEventListener('click', (e)=> {
    if (name.trim() === '' || message.trim() === '' ) {
        return
    }

    let commentObj = {
        name: name,
        message: message
    }

    fetch('/fans', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(commentObj)
     }).catch((error) => {
         console.log(error)
     })

     generateDom(name, message)
     removeInput()
})

然后，我在server.js中编写了这些内容，因此新信息将被推送到我现有的fans.json文件中，然后将其重写。

app.post('/fans', (req, res) => {
    fs.readFile('fans.json', (error, data)=>{
        if (error) {
            res.status(500).end()
        } else{
            const fansObj = JSON.parse(data)
            fansObj.comments.push(req.body)
            fs.writeFile('fans.json', JSON.stringify(fansObj), (error) =>{
                if (error){
                    console.log(error)
                } else{
                    console.log('write successfully!')
                }
            })
        }
    })
})

此后，我发现单击按钮时必须手动刷新页面才能进行更新。我四处搜寻，看来我必须使用websockets或socket.io来解决此问题，到目前为止，这超出了我的知识范围。因此，我决定使用简单的方法来创建两个函数，一个是在原始注释部分之后的“ commentDom”部分的ejs文件中生成generateom。另一个方法是在输入区域中删除输入消息，我在fans.js中以及在fans.ejs中删除了消息（单击它们，让它们=”），因此我们可以创建一个很好的即时反馈给用户。当然，如果他们刷新浏览器，他们将能够从服务器端看到“真实的”呈现。

我当然知道在现实世界中会涉及更多的事情，例如数据库等。我希望以后再学习更多。：D

是否可以使用fs.writeFile通过html输入将新内容添加到现有JSON文件中？

1 个答案: