将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()的文档。