以前，每次和小伙伴合作，张口闭口都是管他要接口。如今想自己搭一个博客，接口这神圣的东西也得靠自己去琢磨了。
前一篇，我们知道了怎么连接数据库并获取里面的数据，现在我们来试一试把他显示在前端页面上。
1、新建一个文件夹test，test文件下有一个test.html文件和一个node文件夹还有一个js文件夹，node文件夹里面有test.js文件，js文件夹也有test.js文件，如图所示：
2、安装 express 框架，直接安装并写入依赖里
cd C:\Users\Smily\Desktop\test
npm install express --save
3、动手写代码
test.html文件引入test.js文件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <h1>测试node写接口</h1> <script type="text/javascript" src='node/test.js'></script> </body> </html>
node文件夹的test.js内容如下：
var express=require('express'); var app =express(); //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); next(); }); // 查询数据 var mongo=require("mongodb"); var host="localhost"; var port=27017; // 默认是27017端口 var server=new mongo.Server(host,port,{auto_reconnect:true});//创建数据库所在的服务器服务器 var db=new mongo.Db("test",server,{safe:true});//创建数据库对象 myblog是数据库的名称 //连接数据库 var findData = ''; // 保存查询到的数据 db.open(function (err,db) { // 如果报错 if(err){ throw err; } // 成功连接数据库 else{ db.collection("list_1", function (err,collection) { // 报错 if(err){ throw err; } // 成功 else{ // 需要查询的字段 var whereStr = {"username":'www'}; // 查询 collection.find(whereStr,function(error, cursor){ cursor.each(function(error,doc){ if(doc){ // 输出查询的结果 findData = doc; } }); }); } }); } }); //写个接口123，这里nodeTest是你的接口名称 app.get('/nodeTest',function(req,res){ res.status(200), // 返回给客户端查询到的数据 res.json(findData); }); //配置服务端口 var server = app.listen(3000, function () { console.log("我正在监听3000端口"); })
js文件夹的test.js内容如下：
var xhr = ''; var requestData = ''; //兼容性处理 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open('GET','http://localhost:3000/nodeTest',true); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ requestData = xhr.responseText;//获取到后台响应的数据 var data = JSON.parse(requestData);//将响应数据转化成json格式，以便使用 //使用数据 console.log(data); //~~~ }else{ //请求数据错误的处理函数 } }else{ //ajax发送失败，没有得到响应数据 } }
4、启动test.js监听3000的端口
cd C:\Users\Smily\Desktop\test\node
node test
5、打开网页查看获取的数据
是不是很简单？有了这些基本的操作，看来离搭博客的日子不远了，嘻嘻 = =