Можно ли добавить новый контент через ввод HTML в существующий файл JSON с помощью fs.writeFile? - PullRequest
Новая
       13

Можно ли добавить новый контент через ввод HTML в существующий файл JSON с помощью fs.writeFile?

0 голосов
/ 23 марта 2019

Я довольно новичок в node.js! Я пытаюсь написать раздел комментариев, который отображается сервером node.js. У меня есть файл JSON, и я передаю его значение в файл EJS, пока он хорошо отображается. Теперь я добавил раздел комментариев, с полем ввода и кнопкой отправки, поэтому мой вопрос: Можно ли добавить входные данные в разделе комментариев обратно в существующий файл json, добавить новый контент, затем переписать файл json, а затем заново отрендерить все, после того как я нажму кнопку отправки?

Я пытался добавить прослушиватель событий, чтобы получить значение, затем я пытаюсь использовать JSON.stringfy (), чтобы получить строку ... тогда я понятия не имею, куда идти дальше, потому что я не знаю если приведенный выше вопрос вообще возможен?

Если это невозможно, что я должен сделать, чтобы сохранить свои старые данные, добавив новые и отобразив их на экране? Если база данных не задействована, то является ли localStorage моим единственным выбором?

1 Ответ

0 голосов
/ 23 марта 2019

Теперь я более или менее решаю свою проблему!

Вот как я это решил. Вот мой fan.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!"}]}

Сначала я создал шаблон в fan.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, так что новая информация должна быть передана в мой существующий файл fan.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 для решения этой проблемы, которая пока мне не известна. Поэтому я решил использовать простой способ, создав две функции, одна из которых генерируется в моем файле ejs, который находится в разделе "commentDom" после исходного раздела комментариев. Другой способ - удалить входную msg в области ввода, я удаляю msg в fan.js, а также в fan.ejs (let them = '') после нажатия кнопки, поэтому мы можем создать приятная немедленная обратная связь с пользователем. Конечно, если они обновят браузер, они смогут увидеть «реальный» рендеринг со стороны сервера.

Конечно, я знаю, что в реальном мире будет задействовано больше вещей, таких как базы данных и т. Д. Я с нетерпением жду, чтобы узнать об этом позже. : D

...