總結了一些node.js和前後端互動中可能用到的幾種方法。
（第一次在csdn發部落格，感謝呦。）
http
1.建立伺服器
2.加載網頁
3.判斷路徑
const http = require("http");
http.createServer((req,res)=>{
//req:請求的對象（前台設定的東西，通常指參數，網址）
//res：響應的對象
fs.readFile("index.html",(err,data)=>{
res.end(data.toString);
})
}).listen(7000);
url
//url與get請求配套使用
const url = ("url");
let urlObj = url.parse(req.url,true);
//加了true,列印後query會變成對象，不加顯示字元串
let reqUrl = urlObj.pathname;
//pathname是路徑
art-template
//模闆引擎
方法一：
//背景node.js寫法：
let dataSource = {
list:comments
}
let resStr = template.render(data,dataSource);
res.end(resStr);
html頁面寫法：
{{each list}}
<li> {{$value["name"]}} ：{{$value["message"]}}</li>
{{/each}}
方法二：
//res.render()就是模闆渲染
//res對象本身是沒有render方法的
//當配置了express-art-template才會給其添加此方法
//render可以跟一個或兩個參數,跟一個參數時寫views目錄下的相對路徑html
//背景node.js寫法
let dataSource = {
list:strdata1
};
res.render("index.html",dataSource);
html頁面：
{{each list}}
<li> {{$value["name"]}} ：{{$value["message"]}}</li>
{{/each}}
express
Express 是一個保持最小規模的靈活的 Node.js Web 應用程式開發架構，為 Web 和移動應用程式提供一組強大的功能。
基于 Node.js 平台，極簡的 Web 開發架構。
const express = require("express");
//路由加載
app.use("/node_modules",express.static("./node_modules"));
app.use("/public",express.static("./public"));
let app = express();
app.get("/home",(req,res)=>{
fs.readFile("index.html",(err,data)=>{
res.send(data.toString());
})
})
app.listen(8088);
express-art-template
//配置express-art-template模闆引擎
//第一個參數：表示目前渲染以html字尾名的檔案時，使用art-template模闆引擎
//express-art-template把art-template整合到express中
app.engine("html",require("express-art-template"));
body-parser
//與post請求配套使用
const bodyParser = require("body-parser");
//需要express作中間量，對post請求的請求參數進行解析
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//配置之後會給req添加一個body屬性，來擷取請求體
使用：
let query = req.body;
let query = req.body.id;
重定向
方法一：
//重定向，設定express後可以直接使用res.redirect("/")
//系統已自動設定好
方法二：
//針對核心子產品http,url,fs重定向：
res.statusCode = 302;
res.setHeader("Location","/");
res.end();
json\string轉換
//将二進制的資料轉換為字元串
let strdata = data.toString();
//将字元串轉換為json對象
strdata = JSON.parse(strdata);
//因為nodejs的寫入檔案隻認識字元串或者二進制數，是以把json對象轉換 成字元串重新寫入json檔案中
let str = JSON.stringify(strdata);
//将字元串轉為整數，如果parseInt的參數不是字元串，則會先轉為字元串再轉換
index = parseInt(index);
靜态資源加載
方法一：
// 設定express後可使用：
app.use("/node_modules",express.static("./node_modules"));
app.use("/public",express.static("./public"));
方法二：
else if (req.url.indexOf("/public") ==0 ) {
//indexOf() 方法可傳回某個指定的字元串值在字元串中首次出現的位置
//如果要檢索的字元串值沒有出現，則該方法傳回 -1。
fs.readFile("."+ req.url,(err, data) => {
res.end(data);
})
}
ajax
//使用回調函數調用下面的ajax封裝
var url="http://localhost:8081/userList"
ajax_get(url,function (result) {
document.write(result);
})
//封裝ajax函數
function ajax_get(url,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
callback(xhr.responseText);
}
}
}
//ajax這裡就不過多解釋了，細節部分可以自行百度。
//通俗的說就是result是url中的全部資訊。
axios
前後端都可以使用axios進行請求
1.後端的使用
//和curl連接配接伺服器的用法相似
//引入axios（npm同步引入）
const axios = require("axios");
let url = "http://c.3g.163.com";
axios.get(url)
//擷取成功用走.then{}
.then(function (response) {
//擷取到所有資訊，data是頁面中所包含的json内容
console.log(response.data);
})
//擷取失敗走.catch{}
.catch(function (error) {
console.log(error);
});
2.前端的使用
//在網址欄中拼接對應的端口号
axios.get('/getdata')
//成功
.then(function (response) {
console.log(response);
})
//失敗
.catch(function (error) {
console.log(error);
});
資源加載與引入
（這裡我也曾一度看的很混亂，分不清這些相似的東西到底分别是負責哪部分操作的。不過，經過我多方打探，終于懂了，細細的備注給大家。）
//讀寫檔案時需要引入
const fs = require("fs");
//有url引入（不需用npm下載下傳）
const url = require("url");
//引入express架構（npm i express）
const express = require("express");
//調用express方法（引入express架構後調用，要放在其他express相關app.ues之前，否則不好用）
let app = express();
//模闆引擎（上面寫個json可替換頁面中可替換的區域）
//(下載下傳：npm i art-template)
const template = require("art-template")
//模闆引擎簡化（不用寫讀取頁面，直接用res.render("index.html",abc);這樣去寫）
//(下載下傳：npm i express-art-template)
app.engine("html",require("express-art-template"));
//post請求需要引入(三個連用)
//（下載下傳：npm i body-parser）
//req.body為post請求擷取到的全部資料，在頁面中擷取value值可以用“.”拼接想要的name
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//靜态資源加載
//加載任何任何檔案都在這個依賴包中，一般這句代表引入的bootstrap
app.use("/node_modules",express.static("./node_modules"));
//css樣式引入
app.use("/public",express.static("./public"));
//頁面中引入bootstrap（可根據自己路徑不同适當調整）
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-EUQgABEj-1571025832074)( https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543557923186&di=95f6df997065479c6a726cb255d8b75a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013b0556712c1f32f8759f0440d6b6.gif)]
![2018年不想被web前端開發淘汰，你需要掌握哪些技術？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)