将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时,它会从数据库中输出"name".但是如何查看index.html页面并在按钮点击时加载它.

Answer 1

更新:

OP问:

"我的问题不是代码说的......我的问题是如何更改代码,以便表达式作为RESTful API而不是渲染引擎"

要在此处使用express作为RESTful API,首先需要提供静态页面.
换句话说,这里是以下步骤:
1.让您的快速服务器提供静态页面.2.然后获取该页面上的按钮以GET向/search(在单击时)向您的api端点发出请求.

在我的答案的第二部分解释了1 .
2应该已经可以工作,你只需要提供页面并单击按钮!

我解释为什么这在我的答案的第一部分不起作用.你不能简单地导航到/search.我认为这就是你所说的"不要将它用作渲染引擎".

原答案:

要了解此处发生的情况,最好查看您在服务器端代码中处理请求的方式:

当我在浏览器中运行http:// localhost:3000/search时,它会从数据库中输出"name".

该代码是:

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的定义位置以及您的名称.记得发送正确的文件. 一个更简单的推理方法就是让表达式知道你正在提供静态html.**这可以用来完成
app.use("/", express.static(__dirname)); 但是再次确保上面定义的html位于正确的根文件夹中的文件中(可能名为server或类似的东西),名称index.html(并且只有一个).

(请参阅底部有关表达中间件如何工作以及提供静态HTML的链接)

总结一下,您首先要实现此答案的后半部分,以便您可以直接localhost:3000加载索引页面.该页面将有一个按钮.然后,您将能够单击该按钮并向您的/search路线发出请求,而无需重定向.name应该现在回到浏览器的内容(而不是作为新页面).

*有关如何在此处检查/处理请求的更多信息.
**有关提供静态HTML的更多信息.这篇关于快速基础知识的博客也可能有用.