NodeJS Mongoose вставляет событие в public / index.html - PullRequest
Новая
       1

NodeJS Mongoose вставляет событие в public / index.html

0 голосов
/ 12 июня 2019

Я изучаю nodejs, и у меня есть проект, в котором я хочу, чтобы пользователи публиковали данные форм, которые затем заполняют html-таблицу, расположенную в public / index.html .

В данный момент я записываю отправленные данные в коллекцию базы данных, используя следующий код: 

const mongoose = require('mongoose')
const express = require('express');
const app = express();
const server = app.listen(3000);

app.use(express.json()); // for retrieving form data
app.use(express.static('public'));

mongoose.connect('mongodb://localhost/class', {useNewUrlParser: true})
        .then( () => console.log('Connected to class database'))
        .catch( () => console.error('Connection attempt to class database failed'))
const personSchema = new mongoose.Schema({
    name: String,
    date: {type: Date, default: Date.now}
})
const Person = mongoose.model('Person', personSchema)


app.post('/join_class', (req,res) => {
    res.send('... joining class')
    console.debug(req.body.name)
    // document.getElementById('class_table').insertRow(req.body.name)
    joinClass(req.body)
})

async function joinClass(data){
    console.log(data)
    person = new Person({
        name: data.name
    })
    await person.save();
}

Моя проблема в том, что мне нужны те же данные для заполнения таблицы HTML, расположенной в моем public / index.html , но, конечно, у меня нет доступа к объекту документа в index.js. Файл index.html находится ниже: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js'></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- <script src="/client.js"></script> -->
        <title>TestING</title>
    </head>
    <body>
        <table id='class_table'>
            <tr><th>Class</th></tr>
            <tr><td>testing</td></tr>
        </table>
    </body>
</html>

Итак, как мне создать событие / предупреждение mongoDB, чтобы при вставке данных поста в базу данных те же данные были доступны для index.html, где я МОГУ использовать объект документа для заполнения таблицы?

1 Ответ

0 голосов
/ 12 июня 2019

Вот пример, в котором вы можете добавить новых людей, и список на странице index.html должен обновиться при успешной вставке.

index.js 

app.post('/join_class', (req, res) => {
    var person = new Person({
        name: req.body.name
    });
    person.save().then((data) => {
        res.send(data);
    }).catch((err) => {
        res.status(500).send(err);
    });
})

app.get('/class', (req, res) => {
    Person.find({}).then((data) => {
        res.send(data);
    }).catch((err) => {
        res.status(500).send(err);
    });
})

index.html (содержимое тега body) 

<body>
    <div>
        Name:<br>
        <input type="text" id="name" value="">
        <br>
        <button onclick="addPerson()">Add Person</button>
    </div>
    <br/>
    <b>Person's in List: </b>
    <ul id='class_table'>

    </ul>
    <script src="/client.js"></script>
</body>

client.js 

function listPerson() {
    var req = new XMLHttpRequest();
    req.open("GET", '/class');
    req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var aList = JSON.parse(req.responseText),
                list = document.getElementById("class_table");
            list.innerHTML = "";    
            aList.forEach(e => {
                var item = document.createElement("li");
                item.innerHTML = e.name;
                list.appendChild(item);
            });

        }
    };
    req.send();
}

function addPerson() {
    var req = new XMLHttpRequest();
    req.open("POST", '/join_class');
    req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    req.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) { listPerson(); } //Get list of Person on completion
    };
    var sName = document.getElementById("name").value;
    req.send(JSON.stringify({ "name": sName }));
}

//Initially load a list of Person's
listPerson();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...