簡述node中間層的優勢
node中間層,可以解決前端的跨域問題,因為服務器端的請求是不涉及跨域的,跨域是瀏覽器的同源策略導致的,關於跨域可以查看跨域復習
使用node坐中間層,方便前后端分離,后端只需要提供數據接口,不必關心前端業務邏輯的實現。
通過node中間層前端可以將數據再次整合擴展,使用自己的數據結構render渲染頁面。
1.安裝node環境,網上很多教程,大家可以自行百度
2.安裝express
npm i express -g --save-dev
3.安裝express-generator
$ npm install express-generator -g --save
express-generator可以幫我們生成一個目錄結構。
執行:
express myproject
后,生成目錄結構。
在這里我發現一個小坑,就是配置模板引擎的時候,假如我們不想用jade
1 /*引用模板引擎*/ 2 var template = require('art-template'); 3 var express_template = require('express-art-template'); 4 // view engine setup 5 app.set('views', path.join(__dirname, 'views')); 6 app.engine('html', express_template); 7 app.set('view engine', 'html');
這是我配置模板的配置文件中的截取,已使用騰訊的art-template為例子,app.engine('html', express_template);將模板引擎綁定到views目錄下的html文件,app.set('view engine', 'html');設置模板引擎。這里大家可以參考express的官方文檔,說明的很清楚。
使用request請求php服務器:
request不是node的核心模塊,首先我們需要安裝它,關於request,可以參考我的另一篇文章:npm-request或者去到npm官網有更詳盡的介紹。
npm i request --save-dev
服務器端轉發請求的代碼:
1 var request = require('request'); 2 /* GET home page. */ 3 router.get('/', function(req, res, next) { 4 // 請求地址http://127.0.0.1/~haha/interf/a.php 5 request('http://127.0.0.1/~haha/interf/a.php',function(error,response,body){ 6 /*判斷請求是否成功*/ 7 if (!error && response.statusCode == 200) { 8 /*把字符串轉換為json*/ 9 var data=JSON.parse(body); 10 /*渲染模板*/ 11 res.render('index', data); 12 } 13 }); 14 });
如果不想使用request模塊,我們也可以使用node的內置模塊http:
var http = require('http'); router.get('/post', function(req, res) { const postData=querystring.stringify({ 'msg' : 'Hello World!' }); var opt = { hostname:'127.0.0.1', path:'/~donghao/interf/a.php', method:'POST', headers:{ 'Content-Type' : 'application/x-www-form-urlencoded',// 不寫這個參數,后台會接收不到數據 'Content-Length' : postData.length } } const request = http.request(opt,function (response) { console.log('STATUS:' + response.statusCode); console.log('HEADERS:' + JSON.stringify(response.headers)); var renderData = '' response.setEncoding('utf8'); response.on('data',function(body){ renderData+=body; }); response.on('end',function(){ //請求結束 console.log('end'); res.render('index',JSON.parse(renderData)); }); response.on('error',function(e){ if(e){ console.log(e); } }) }); //post方法里 request.on('error', function(e) { console.error('請求遇到問題:'+ e.message); }); request.write(postData,'utf-8'); request.end(); });