以前，每次和小伙伴合作，張口閉口都是管他要接口。如今想自己搭一個博客，接口這神聖的東西也得靠自己去琢磨了。
前一篇，我們知道了怎么連接數據庫並獲取里面的數據，現在我們來試一試把他顯示在前端頁面上。
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、打開網頁查看獲取的數據
是不是很簡單？有了這些基本的操作，看來離搭博客的日子不遠了，嘻嘻 = =