将ExpressJS作为Rest页面的Rest API调用

我用一个button来创build网页,通过ExpressJS,NodeJs使用Rest API构build来从服务器加载数据。

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页面,并加载button单击。

更新

OP询问:

“我的问题不是什么代码说….我的问题是如何更改代码,以便expressjs作为RESTful API而不是渲染引擎”

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

1在我的答案第二部分解释。
2应该已经工作,你只需要提供该页面,然后单击button!

我解释了为什么这在我的答案第一部分不起作用。 你不能简单地导航到/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请求进入你的路由(在这种情况下,path/search localhost:3000 ),执行callback函数。 从本质上讲,当你访问localhost:3000/search ,浏览器会发送一个GET请求,Express会检查每个路由匹配的请求,最后是“OK”,这是我需要回应的GET请求,让我们开始search! ”。

所以它的行为如预期。 当然,那不是你想要的…

但是,我怎么能看到index.html页面,并加载button单击

尝试这样的事情:

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

它可能无法正常工作,具体取决于您的html定义的位置以及您所命名的内容。 记得发送正确的文件。 一个更简单的方法来解释这将是让expression知道你正在提供静态html。**这可以做到
app.use("/", express.static(__dirname)); 但是,再次确保上面定义的html位于正确的根文件夹(可能是命名server或类似的文件)的文件中,名称为index.html (并且只有其中一个)。

(请参阅底层的中间件工作原理和静态HTML的链接)

总结一下,你首先实现了这个答案的后半部分,这样你就可以直接到localhost:3000来加载你的索引页面。 该页面将有一个button。 然后 ,您将能够点击该button并向您的/search路线发出请求,而无需redirect。 name的内容应该现在回到浏览器(而不是作为一个新的页面)。

*更多关于如何在这里检查/处理请求。
**有关提供静态html的更多信息。 这个expression基本面的博客也可能有用。

1 – 您必须为index.html添加路由

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

然后在你的ajax代码中,你可以使用window.locationredirect到/ index

你可以直接渲染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}); }); 

});

然后在点击button时redirect到/ index上的页面。

您遇到的问题是您使用Express作为渲染框架。 如果你想用REST / API构build一个应用程序,框架不应该渲染视图或模板。 网页导航应该是分开的(例如Angular JS)。 在你的情况下,当你调用/search你实际上只调用服务器中的东西,没有任何渲染指令。 这就是为什么你看到一个响应JSON对象,而不是你的HTML模板。

那么,该怎么办?你需要在你的客户端做一个导航应用程序,只需在模板中导航,不要超出正常的范围,然后编程你的button来执行一些API请求(例如:localhost:3000 / api / search)和响应的内容做一些事情:比如填表,不pipe怎样显示它们。

我build议你试试Angular JS。 我相信它可以帮助你

干杯

这里是我想要使用简单的index.html页面来testing一些前端代码时使用的代码。

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

这将根path映射到您的index.html。 __dirname假定index.html文件与您的初始服务器/应用程序文件位于同一个目录中,以供快速使用。 如果你想使它更通用,你可以做类似下面的事情,但是你需要手动将index.html添加到浏览器的地址栏中,但是它也可以让你加载任何你想要的静态文件。

 app.get(/^(.+)$/, function(req, res){ res.sendFile( __dirname + req.params[0]); }); 
 <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文档http://api.jquery.com/jQuery.ajax/阅读关于$ .ajax()的文档。