摘要：將數據經由寫入到數據庫中上兩步的文件創建完畢之后，將其部署到服務器上。數據取回至通過上面的可以將數據拿回至，現在需要將數據經由，再將其發送到前端頁面上，需要在中設置相關路由。

本demo主要實現的功能是使用前端表格輸入相關數據，將數據通過Ajax請求發送至nodejs中，在經由php發送至數據庫中，然后在從數據庫中通過php將數據取出，經由nodejs發送至頁面中。nodejs起中間件的作用。
主要使用的技術有：

前端頁面：html5、CSS3、JavaScript；

nodejs：express框架、swig模板；

php：封裝類，查詢、插入數據。

在命令行使用npm init 初始化項目文件夾，填寫項目名稱等一系列，或者一路enter，結束后項目文件會出現一個新文件package.json，就是剛才填寫的或默認的數據。

在FEtoBE 文件夾下創建 views 和 public 文件夾，在views文件夾下創建add_data.html文件，作為寫入數據的窗口，此處，創建了一個表格，模擬補習班四個課程每天新增報名人數，以及總的報名人數。總體效果如下圖所示（未做兼容性及美化）：
表格文件在Github上。

此步的總體流程為：給表格中的按鈕“點擊添加”添加事件，使其通過點擊事件，發送Ajax請求，將表格中的數據通過get方法傳輸到Node某路由中。
所以此處需要創建node文件，并使用express 模板來創建相應路由（保證電腦中已安裝node）。

在命令行中，安裝express: npm install express --save;

安裝swig模板：npm install express --save;

在FEtoBE文件夾下創建 app.js 文件，并引入express以及swig、path；

此時文件結構：

繼續在app.js中書寫，配置模板引擎，node模板引擎文件位置：

//配置模板引擎為 html，作用是告訴node模板引擎文件位置  
app.set("views","./views/");
app.set("view engine","html");
app.engine("html", swig.renderFile);
// 設置靜態文件路徑
app.use(express.static(path.join(__dirname, "public")));

繼而設置路由，用來接受add_data.html傳來的數據，以及端口：

// 設置添加數據界面的路由
app.get("/adding", function(req, res) {
    res.render("add_data")
});

//設置路由，接收數據
app.get("/addData", function(req, res) {
    console.log(req.query.mathNum);//驗證是否成功傳輸數據
})
//設置端口
var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log("Example app listening at http://%s:%s", host, port);
});

此時，需要的add_data.html文件中，使用ajax來發送數據：

當上兩步完成之后，在命令行中啟動：node app.js，在瀏覽器中輸出之前設置的添加數據界面的路由，本例中為“ http://localhost:3000/adding ”，可以看到瀏覽器中已經展示了表格，輸入數據之后，點擊按鈕，就可以在命令行中看到測試的數據顯示出來。說明我們已經可以將數據從前端界面穿輸入nodejs中，下一步即時從nodejs傳輸入php，在經php最終傳入數據庫。

通過封裝一個數據庫類，實現數據庫的增加、查找等（此處在xampp中的默認路徑創建database文件夾）。

創建DB.php 文件，創建封裝類。具體代碼：在Github中查看。

創建get.php文件。本文件的作用是將nodejs中傳來的數據寫入到數據庫中。所以此時數據庫中應該有相應接收數據的表格（此處為forfetobe數據庫下的classData 數據表格）。

具體代碼：在Github中查看。

上兩步的php文件創建完畢之后，將其部署到服務器上。需要使用 request模塊在nodejs中進行http請求。
首先進行安裝：npm install request --save，在app.js中引入此模塊：var request = require("request");
所以可以在接收數據的路由中addData中添加request請求，將數據發送到get.php中，再由其發送到相應數據庫中：

// 設置路由，用來接受add_data.html傳來的數據
app.get("/addData", function(req, res) {
    var responseData =
        "mathNum=" + req.query.mathNum + "&" +
        "等等。。。。。。";
    //此處注意傳輸的responseData應該為字符串形式，且格式與get請求在瀏覽器地址欄的格式相一致。  
        request("http://localhost/database/get.php?" + responseData, function(error, response, body) {

    });
})

具體代碼在Github上查看。
此時，打開相應服務，表格中添加數據，即可以傳輸到數據庫中的相應數據表里。

上一節文章中，寫到從前端寫入的數據，經由Nodejs傳給php，在由php寫入到數據庫中。本節文章主要寫從數據庫將數據拿出來展示到前端去（繼續上一節的demo）。

上一節中封裝了一個PDO類，也就是DB.php文件。創建此類的一個實例，用來查詢數據庫中的數據。
依舊是在xampp中的默認路徑創建database文件夾下，新建back.php，進行數據庫相應數據表的查詢，具體代碼：在GitHub上 查看。

通過上面的php可以將數據拿回至php，現在需要將數據 經由nodejs，再將其發送到前端頁面上，需要在app.js中設置相關路由。

//設置路由，用來將數據展示到頁面中去
app.get("/showing", function(req, res) {
    res.render("show_data")
});

這個沒啥說的，和上一篇中的設置數據寫入界面路由相同。都是設置在views文件夾下新建相應的html文件，此處是show_data.html。

//設置路由，作用是將來自‘show_data.html’的ajax請求，并將數據庫中的數據通過PHP發送至此
app.get("/showData", function(req, res) {
        var responseData =
            "mathNum=" + req.query.mathNum + "&" +
            //等等
request("http://localhost/database/back.php?" + responseData, function(error, response, body) {
        res.json(body);//必須。將數據吐出。
    });
    })；

現在即需要書寫show_data.html界面，接收數據。
此處需要在public文件夾下創建scripts、 css、 images等文件夾來存放相應的靜態資源文件。在將靜態文件 .css、.js、img放入到public文件夾下的相應路徑中去。
此時項目文檔結構為：

引入路徑為：

//show_data.html文件內的樣式文件引入路徑展示。

在書寫完整體的展示界面后，（詳細代碼在：GitHub上查看）， 就需要將數據傳輸到頁面中去。

在相應的位置書寫ajax請求，將showData 路由上的數據發送到頁面：

$(function() {
  $.ajax({
    url: "http://localhost:3000/showData",
    dataType: "json",
    success: function(point) {
      var jsondata = JSON.parse(point);
      var datalength = jsondata.length;
      //提取數據庫里最近七天內的數據
      var nowAll = Number(jsondata[datalength - 1]["atotalnum"]);
      var nowIncrease = Number(jsondata[datalength - 1]["aincreasenum"]);
         //。。。
      var sevenAll = Number(jsondata[datalength - 7]["atotalnum"]);
      var sevenIncrease = Number(jsondata[datalength - 7]["aincreasenum"]);
      //以下是使用highcharts 創建表格。
      //具體代碼在Github上查看。
})

至此，一個完整的將前端數據通過ajax的get方式發送到Nodejs中，在經由php發送到數據庫中，然后再從數據庫中拿取最新的數據，展示到界面中。
整個的展示流程為：

進入登錄界面：

其中輸入錯誤的密碼或未注冊的用戶名均會得到提示：

查看展示界面：

查看展示界面，沒門課程均有多帶帶的展示界面 以及相應的數據。且是響應式，適合在手機端瀏覽。還可以在左側的功能欄找到添加數據接口。

添加數據：

添加成功后點擊確認 添加按鈕，即可在展示界面查看最新數據。