繁体   English   中英

在Node.js/Express中等待后端数据库更新后如何更新前端?

[英]How can I update the frontend after waiting for the database in the backend to update in Node.js/Express?

我在此处看到类似的问题,但他们使用的是 MEAN-Stack。

我目前只是使用 'setTimeout' function 等待几秒钟,然后使用提取 api 从服务器请求新数据,让它有时间更新,但这感觉不是正确的方法。 有没有一种简单的方法让前端只在Express中更新数据库后才更新? 我是 Node 的新手,请原谅我。

应用程序.js:

const express = require('express');
const app = express();
const mysql = require('mysql'); 

let viewData = {
    //html data
}

var pool = mysql.createPool({
    connectionLimit : 10,
    host: "localhost",
    port: 3306,
    database: 'testing',
    user: "root",
    password: "pass"
});

function sql(type) {

    if(type == 'select') {
     //Select query here
    }
    if(request == 'addRow') {
     //Insert query here
    }
}

app.get(`/`, function (req, res) {
    res.sendFile('./views/index.html', {root: __dirname});
})

app.post('/api/add', function(req, res){
    res.setHeader('Content-Type', 'application/json');
    sql('addRow')
});

app.get('/api/viewData', function (req, res) {
    res.setHeader('Content-Type', 'application/json');
    res.send(JSON.stringify(viewData));
})

索引.js:

function loadData() {
      fetch('/api/viewData')
      .then(z => z.json())
      .then(a => {
        //update html
      })
}

function postData(a) {
    fetch('/api/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
        body: JSON.stringify({
          //data to send to app.js
      })
    }).then(setTimeout(function(){loadData();}, 3000))
  }

您应该使用异步并等待 function

示例:在异步/等待之后

async function fun1(req, res){
  let response = await request.get('http://localhost:3000');
    if (response.err) { console.log('error');}
    else { console.log('fetched response');
}

我们示例的完整代码如下所示:

npm 安装 express jsonschema body-parser promise-mysql

var express = require('express');
var bodyParser = require('body-parser')
var app = express();
var validate = require('./validate')
var mysqlConnection = require('./connectionShare');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const addItem = function(item, connection){
 console.log("Adding Item");
 return new Promise(function(resolve, reject){
  connection.query("INSERT INTO product SET ?", item)
  .then(function(result){
   resolve(item.seller);
  }).catch(function(error){
   reject(error);
  });
 })
}

const findOrCreateUser = function(user,connection){
 console.log("Finding User");
 return new Promise(function(resolve,reject){
  connection.query("SELECT * FROM user WHERE email=" + connection.escape(user.email))
   .then(function(results){
    if(results.length == 1){
     resolve(results[0].id)
    } else {
     connection.query("INSERT INTO user SET ?", user)
     .then(function(results){
      resolve(results.insertId);
     });
    }
   }).catch(function(error){
    reject(error);
   })
 })
}

const selectUserItems = function(userID,connection){
 console.log("Selecting Items " + userID);
 return new Promise(function(resolve,reject){
  connection.query("SELECT * FROM product WHERE seller = " + connection.escape(userID))
   .then(function(results){
    resolve(results);
   }).catch(function(error){
    reject(error);return;
   });
  })
}

app.post('/add/product', validate.JsonValidation, mysqlConnection.getConnection, async function(req,res){
 var connection = req.connection;
 var item = {
  name: req.body.name,
  price: req.body.price,
  width: req.body.width,
  height: req.body.height,
  added: req.body.added,
  image: req.body.image
 };

 var user = {
  username: req.body.seller.username,
  email: req.body.seller.email,
  votes: req.body.seller.votes
 };

 try {
  item.seller = await findOrCreateUser(user,connection);
  var user_id = await addItem(item,connection);
  var items = await selectUserItems(user_id, connection);
  connection.connection.release();
  res.status(200).json(result);
 } catch(error) {
  res.status(500).end(error);
 }
});

process.on('uncaughtException', error => console.error('Uncaught exception: ', error));
process.on('unhandledRejection', error => {console.error('Unhandled rejection: ', error));

app.listen(8000, function () {
 console.log('App listening on port 8000')
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM