调用 ExpressJS 作为 HTML 页面的 Rest API

Question

我正在创建带有按钮的网页，以使用通过 ExpressJS、NodeJs 构建的 Rest API 从服务器加载数据。

var express=require('express');
var mysql=require('mysql');
var app=express();
var server=app.listen(3000,function(){
	console.log("Express is running on port 3000");
});

app.get('/search',function(req,res){
	var mysql=require('mysql');
	var connection = mysql.createConnection({
		connectionLimit : 100, //important
		host     : 'localhost',
		user     : 'root',
		password : '',
		database : 'node-test'
	});
	connection.connect();
	connection.query('SELECT name from users', function(err, rows, fields) {
		if (err) throw err;
		var data=[];
		for(i=0;i<rows.length;i++){
			data.push(rows[i].name);
		}
		res.end(JSON.stringify(data));
	});
});

此应用程序的 HTML 页面如下所示

<button >Load from server</button>
<div></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','button', function(){
		$.ajax({
		  url: "http://localhost:3000/search"
		}).done(function() {
			$('div').append("done !!! - ");
		});
	});
});
</script>

当我在浏览器中运行http://localhost:3000/search 时，它会为我提供数据库中带有“名称”的输出。但是如何查看 index.html 页面并使其在按钮单击时加载。

Answer 1

更新：

OP 询问：

“我的问题不是代码所说的......我的问题是如何改变 代码，以便 expressjs 用作 RESTful API 而不是渲染引擎"

为了在此处使用 express 作为 RESTful API，您首先需要提供一个静态页面。
换一种说法，步骤如下：
1. 让您的快速服务器提供静态页面。 2. 然后获取该页面上的按钮以向您的 api 端点/search（单击时）发出GET 请求。

1 在我的回答的第二部分中进行了解释。
2 应该已经可以了，你只需要提供页面并点击按钮！

我在我的回答的第一部分中解释了为什么这不起作用。您不能简单地导航到/search。我认为这就是“不将其用作渲染引擎”的意思。

---

原答案：

要了解这里发生了什么，最好看看您是如何在服务器端代码中处理请求的：

当我在浏览器中运行 http://localhost:3000/search 时，它会从数据库中输出带有“名称”的输出。

那个代码是：

app.get('/search',function(req,res){
    var mysql=require('mysql');
    var connection = mysql.createConnection({
        connectionLimit : 100, //important
        host     : 'localhost',
        user     : 'root',
        password : '',
        database : 'node-test'
    });
    connection.connect();
    connection.query('SELECT name from users', function(err, rows, fields) {
        if (err) throw err;
        var data=[];
        for(i=0;i<rows.length;i++){
            data.push(rows[i].name);
        }
        res.end(JSON.stringify(data));
    });
});

这意味着每当 GET 请求到达您的路由（在本例中为路径 /search 上的 localhost:3000），回调函数就会执行。本质上，当您访问localhost:3000/search 时，您的浏览器会发送一个GET 请求，Express 会检查* 请求是否与每个路由匹配，最后会“好的，这就是我需要响应的 GET 请求，让我们开始搜索吧！ ”。

所以它的行为符合预期。当然，这不是你想要的……

但是我怎样才能看到 index.html 页面并让它在按钮点击时加载

试试这样的：

app.get('/', function(req,res) {
  res.sendfile('public/index.html');
});

它可能无法按原样工作，具体取决于您的 html 的定义位置和命名方式。 记得发送正确的文件。 一个更简单的推理方法是让 express 知道您正在提供静态 html。** 这可以通过
app.use("/", express.static(__dirname)); 来完成，但同样，请确保上面定义的 html 位于正确根文件夹中的文件中（可能命名为 server 或类似名称），名称为 index.html（并且那里只是其中之一）。

（请参阅底部关于 express 中间件如何工作以及提供静态 HTML 的链接）

总结一下，你先实现这个答案的后半部分，这样你就可以直接去localhost:3000加载你的索引页面。该页面将有一个按钮。 然后，您将能够单击该按钮并向您的/search 路由发出请求，而无需重定向。 name 的内容现在应该返回浏览器（而不是作为新页面提供）。

*更多关于如何检查/处理请求here。
**有关服务static html 的更多信息。 This blog on express fundamentals 也可能有用。

Answer 2

1-你必须为 index.html 添加路由

app.get("/index", function(req, res) {
  res.render(index.html);
});

然后在您的 ajax 代码中，您可以使用 window.location

重定向到 /index

2- 可以直接渲染 index.html。 像这样的

app.get("/search", function(req, res) {
      res.render(search.html,{});
    });


app.get('/index',function(req,res){
var mysql=require('mysql');
var connection = mysql.createConnection({
    connectionLimit : 100, //important
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'node-test'
});
connection.connect();
connection.query('SELECT name from users', function(err, rows, fields) {
    if (err) throw err;
    var data=[];
    for(i=0;i<rows.length;i++){
        data.push(rows[i].name);
    }
    res.render(index.html,{data:data});
});

});

然后在点击按钮时重定向到 /index 上的页面。

Answer 3

您遇到的问题是您使用 Express 作为渲染框架。如果您想使用 REST/API 构建应用程序，框架不应呈现视图或模板。网页导航应该是独立的（例如 Angular JS）。在您的情况下，当您调用 /search 时，您实际上只是在服务器中调用某些内容而没有任何渲染指令。这就是为什么您会看到响应 JSON 对象而不是您的 html 模板。

那么，该怎么办？.. 您需要在客户端制作一个导航应用程序，只需在没有任何异常的情况下浏览模板，然后对您的按钮进行编程以向某个 api url 发出请求（例如：localhost :3000/api/search) 并根据响应的内容做一些事情：比如填充表格，以某种方式或其他方式显示它们..

我建议您尝试使用 Angular JS。我相信它可以帮助你

干杯

Answer 4

这是我想使用一个简单的 index.html 页面来测试一些前端代码时使用的代码。

app.get("/", function(req, res) {
  res.sendFile( __dirname + '/index.html')
});

这会将根路径映射到您的 index.html。 __dirname 假定 index.html 文件与 express 的初始服务器/应用程序文件位于同一目录中。如果您想让它更通用，您可以执行以下操作，但是您需要手动将 index.html 添加到浏览器的地址栏中，但它也可以让您加载所需的任何其他静态文件。

app.get(/^(.+)$/, function(req, res){
  res.sendFile( __dirname + req.params[0]);
});

Answer 5

<button >Load from server</button>
<div></div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','button', function(){
        $.ajax({
          url: "http://localhost:3000/search"
        }).done(function(data) {
            $('div').append(data);  
        });
    });
});
</script>

您可以从 jquery api 文档中阅读有关 $.ajax() 的文档 http://api.jquery.com/jQuery.ajax/