如何使用 HTML、CSS 和 postgres 构建一个简单的应用程序答案

【问题标题】：How to build a simple application with HTML, CSS and postgres如何使用 HTML、CSS 和 postgres 构建一个简单的应用程序
【发布时间】：2020-04-02 01:18:40
【问题描述】：

我正在使用 HTML、CSS 和 postgreSQL 构建一个简单的 Web 应用程序。我正在使用 Node.js 构建 Web 后端，并尝试使用 SQL 数据库存储应用程序数据。该表单从用户那里收集 cmets，存储在数据库中，并在 html 中显示 cmets。我的代码中不断出现错误。

<!DOCTYPE html>
<html>

<head>
  <title>Editor</title>
  <link rel="stylesheet" href="stylesheets/stylesheet.css">
  <link rel="shortcut icon" href="">
</head>

<body>
  <div id="commentNav" contenteditable="true">
    <h1>Comments</h1>
    <form action="/comments" method="POST">
        <input type="text" name="name" placeholder="First Name"/>
        <textarea rows="4" name="comment">Describe your favorite</textarea>
        <input type="submit" value="Submit"/>
    </form>
    <section id="suggestions">
      <h2>Comment List</h2>
    </section>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="javascripts/script.js"></script>

</body>
</html>

Script.js

getComments();
function getComments(){
  $.get("/comments", function(data){
    if(!data){
      console.log("No data recieved");
    }
    console.log("recieved data:");
    for(let i = 0; i < data.length; i++){
      console.log(data[i].name);
    }
    showComments(data);
  });
}

function showComments(comments){
  let commentSection = document.getElementById("suggestions");
  // for(let i = 0; i < comments.length; i ++){
    for (let i in comments){
    let section = document.createElement("section");
    section.className += "suggestion";
    let heading = document.createElement("h3");
    heading.innerHTML = comments[i].name;
    let comment = document.createElement("p");
    comment.innerHTML = comments[i].comment;
    section.appendChild(heading);
    section.appendChild(comment);
    commentsSection.appendChild(section);
  }
}

服务器.js

const express = require('express');
let pg = require('pg');
let pg = new pg.Database('db/comments.db');
const app = express();

const PORT = 8080;

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: path.join(__dirname, './files') });
});

app.listen(PORT, () => {
  console.log(`Example app listening on port ${PORT}!`);
});

app.get('/comments', function(request, response){
  console.log("GET request recieved at /comments");
  db.all('SELECT * FROM comments', function(err, rows){
    if(err){
      console.log("Error: " + err);
    }
    else{
      response.send(rows);
    }
  })
});

app.post('/comments', function(request, response){
  console.log('POST request recieved at /comments');
});

错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

【问题讨论】：

标签： javascript jquery html node.js postgresql

【解决方案1】：

使用 node-postgres js 模块连接到数据库必须如下完成：

const client = new Client({
  user: 'dbuser',
  host: 'database.server.com',
  database: 'mydb',
  password: 'secretpassword',
  port: 3211,
})
client.connect()

欲了解更多信息，请参阅documentation

【讨论】：