Node.JS 和 Postgres 搜索栏

Question

我正在尝试创建一个搜索栏来查询和显示我自己的 Postgres 数据库中的数据。我的屏幕上有一个搜索栏，我想我已连接到我的数据库，但我无法显示任何结果。任何帮助，将不胜感激。我对使用 node.js 和开发此类工具还是很陌生。当我提交搜索时，我收到一条 404 错误消息。 Index.js

const express = require('express');
const router = express.Router();
const pg = require('pg');
const path = require('path');
const connectionString = process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5432/todo';


router.get('/', (req, res, next) => {
  res.sendFile(path.join(
    __dirname, '..', '..', 'client', 'views', 'index.html'));
});

router.get('/api/v1/todos', (req, res, next) => {
  const results = [];
  // Get a Postgres client from the connection pool
  pg.connect(connectionString, (err, client, done) => {
    // Handle connection errors
    if(err) {
      done();
      console.log(err);
      return res.status(500).json({success: false, data: err});
    }
    // SQL Query > Select Data
    const query = client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;');
    // Stream results back one row at a time
    query.on('row', (row) => {
      results.push(row);
    });
    // After all data is returned, close connection and return results
    query.on('end', () => {
      done();
      return res.json(results);
    });
  });
});

App.js

const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const routes = require('./server/routes/index');
// var users = require('./routes/users');

const app = express();

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'client')));

app.use('/', routes);
// app.use('/users', users);

// catch 404 and forward to error handler
app.use((req, res, next) => {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use((err, req, res, next) => {
    res.status(err.status || 500);
    res.json({
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use((err, req, res, next) => {
  res.status(err.status || 500);
  res.json({
    message: err.message,
    error: {}
  });
});


module.exports = app;

HTML

 <!DOCTYPE html>
<html ng-app="nodeTodo">
  <head>
    <title>Todo App - with Node + Express + Angular + PostgreSQL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/search.js" type="text/javascript"></script>
    <script src="/search.js"></script>
    <script src="//code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
  </head>
  <body ng-controller="mainController">
    <div class="container">
      <div class="header">
        <h1>SuckySearchBar</h1>
        <hr>
        <h1 class="lead">Designing Search Bars Suck This Never Works</h1>
      </div>
    </body>
    <body ng-controller="searchController">
      <div class="container">
        <div class="search-box">
                <input class="search" type="text" placeholder="Search" id="search" method='GET' autocomplete="on" onkeyup="search();">
                <table class="result table-bordered" id="search"></table>
<script>
                function searchinput(){
                  $.ajax({
                      type: 'GET',
                      url: '/api/v1/todos' + searchinput,
                      success: function(result){
                          window.location.reload(true);
                      }
                  })
                }

                </script>
      </div>
     </body>
</html>

Search.js

function search(search_string, func) {
     pool.query(
        "SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC", 
        [search_string],
        function(err, result) {  
            if(err) {
                func([])
            } else {
                func(result.rows)
            }
        }
    );
}

module.export = search;

Answer 1

我认为@Molda 的意思是您应该将 methods=['GET'] 更改为 method='GET'。你能post周围的html吗？

编辑

好的，所以我认为您混淆了服务器上的 javascript 运行ning 和浏览器中的 javascript 运行ning。如果您要从 onKeyUp() 事件处理程序调用 search() 那么它将在浏览器中调用运行。由于要在浏览器中访问运行，所以没有能力直接访问postgres。它应该做的是向服务器上的路由发出 ajax 请求，该路由向其提供搜索结果 json （类似于您对 /api/v1/todos 所做的，您可以定义 /api/v1/search)，然后它以某种方式呈现在页面上（可能使用 jquery）。在这种情况下，您甚至不需要在 input.

上定义 method

Answer 2

首先，恭喜您开始新的学习任务！但是让我们解决这个问题好吗？

1 - 我给你的提示是，在你开始担心前端之前，让我们确保我们的服务运行没问题，我们将只在服务器端测试它。 "I think I am connected to my database"，如果我们认为事情进展顺利，我们无法继续，我们需要确定！

2 - 我们需要我们的服务运行，这是我们连接数据库的唯一方法。所以现在，我们忘记接口和数据库，让我们关注服务：在您的 "app.js" 中，您正在尝试导入您的路线，对吗？通过

const routes = require('./server/routes/index');

但是为了做到这一点，您需要先导出这些路由，然后转到您的 "index.js" 文件并添加 "module.exports = router"。现在您可以使用在 "app.js" 文件中导入的路由器了！

保持这样：

const express = require('express');
const router = express.Router();
const pg = require('pg');
const path = require('path');
const connectionString = process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5432/todo';

 Almost there, our service needs to listen to some port now


router.get('/', (req, res, next) => {
  res.sendFile(path.join(
    __dirname, '..', '..', 'client', 'views', 'index.html'));
});

router.get('/api/v1/todos', (req, res, next) => {
  console.log("HAHAHAHAHA")
  const results = [];
  // Get a Postgres client from the connection pool
  pg.connect(connectionString, (err, client, done) => {
    // Handle connection errors
    if(err) {
      done();
      console.log(err);
      return res.status(500).json({success: false, data: err});
    }
    // SQL Query > Select Data
    const query = client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;');
    // Stream results back one row at a time
    query.on('row', (row) => {
      results.push(row);
    });
    // After all data is returned, close connection and return results
    query.on('end', () => {
      done();
      return res.json(results);
    });
  });
});

module.exports = router;

现在我们的应用程序需要监听一些端口。我无权访问您的文件夹结构，这就是为什么我将仅使用您提供给我们的这两个文件来实现这个想法。在您的 "app.js" 中，您可以告诉您的应用程序使用一个端口提供服务，您可以通过键入 "app.listen(8000, () => console.log('listening')) “ 由于您正在导出您的应用程序，因此您可以在任何您喜欢的地方导入和使用它，但我已经告诉过您，我将把这个想法限制在您向我们展示的文件中，这就是为什么您的 "app.js" 会像这样之前检查此文档：https://node-postgres.com/features/connecting

const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const routes = require('./index');
// var users = require('./routes/users');

const app = express();

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'html');

// uncomment after placing your favicon in /public
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'client')));

app.use('/', routes);
// app.use('/users', users);

// catch 404 and forward to error handler
app.use((req, res, next) => {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use((err, req, res, next) => {
    res.status(err.status || 500);
    res.json({
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use((err, req, res, next) => {
  res.status(err.status || 500);
  res.json({
    message: err.message,
    error: {}
  });
});


app.listen(8000, () => console.log('listening'))

module.exports = app;

好的，现在我们的服务是运行，转到您的终端并输入：node app.js

它应该在你的 shell 中打印 "listening"。

现在尝试在您的浏览器中访问 http://localhost:8000/api/v1/todos，它应该打印错误 "pg.connect is not a function"

那是因为你没有以正确的方式使用库，试试这样的方法

const express = require('express');
const router = express.Router();
const path = require('path');
const { Pool, Client } = require('pg')
const connectionString = 'postgres://postgres:postgres@localhost:5432/todo'
const client = new Client({
  connectionString: connectionString,
})
client.connect()

router.get('/', (req, res, next) => {
  res.sendFile(path.join(
    __dirname, '..', '..', 'client', 'views', 'index.html'));
});

router.get('/api/v1/todos', (req, res, next) => {
  const results = [];
  client.query('SELECT name FROM world_heritage_sites.caravanserai ORDER BY iso ASC;', (err, res) => {
    console.log(err, res)
    client.end()
  })
});

module.exports = router;

但请记住，您需要在本地主机中安装 Postgres 服务运行才能使用您正在使用的连接字符串进行连接。如果您以正确的方式配置了 Postgres 服务和数据库，它应该可以正常工作，那么您只需要在界面中调用路由 "localhost:8000/api/v1/todos"。

实际上有很多东西你应该检查你的代码，如果你在开始这个项目之前了解一些背景知识也许会很好。在 youtube 上尝试一些针对初学者的教程并检查其他开发人员的代码。祝你好运和好代码老兄！我希望我至少给了你一点帮助:)

Node.JS 和 Postgres 搜索栏

Node.JS and Postgres Search Bar

javascript

postgresql

full-text-search

node.js