摘要：將數(shù)據(jù)經(jīng)由寫入到數(shù)據(jù)庫中上兩步的文件創(chuàng)建完畢之后，將其部署到服務(wù)器上。數(shù)據(jù)取回至通過上面的可以將數(shù)據(jù)拿回至，現(xiàn)在需要將數(shù)據(jù)經(jīng)由，再將其發(fā)送到前端頁面上，需要在中設(shè)置相關(guān)路由。

本demo主要實(shí)現(xiàn)的功能是使用前端表格輸入相關(guān)數(shù)據(jù)，將數(shù)據(jù)通過Ajax請(qǐng)求發(fā)送至nodejs中，在經(jīng)由php發(fā)送至數(shù)據(jù)庫中，然后在從數(shù)據(jù)庫中通過php將數(shù)據(jù)取出，經(jīng)由nodejs發(fā)送至頁面中。nodejs起中間件的作用。
主要使用的技術(shù)有：

前端頁面：html5、CSS3、JavaScript；

nodejs：express框架、swig模板；

php：封裝類，查詢、插入數(shù)據(jù)。

在命令行使用npm init 初始化項(xiàng)目文件夾，填寫項(xiàng)目名稱等一系列，或者一路enter，結(jié)束后項(xiàng)目文件會(huì)出現(xiàn)一個(gè)新文件package.json，就是剛才填寫的或默認(rèn)的數(shù)據(jù)。

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

此步的總體流程為：給表格中的按鈕“點(diǎn)擊添加”添加事件，使其通過點(diǎn)擊事件，發(fā)送Ajax請(qǐng)求，將表格中的數(shù)據(jù)通過get方法傳輸?shù)絅ode某路由中。
所以此處需要?jiǎng)?chuàng)建node文件，并使用express 模板來創(chuàng)建相應(yīng)路由（保證電腦中已安裝node）。

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

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

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

此時(shí)文件結(jié)構(gòu)：

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

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

繼而設(shè)置路由，用來接受add_data.html傳來的數(shù)據(jù)，以及端口：

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

//設(shè)置路由，接收數(shù)據(jù)
app.get("/addData", function(req, res) {
    console.log(req.query.mathNum);//驗(yàn)證是否成功傳輸數(shù)據(jù)
})
//設(shè)置端口
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);
});

此時(shí)，需要的add_data.html文件中，使用ajax來發(fā)送數(shù)據(jù)：

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

通過封裝一個(gè)數(shù)據(jù)庫類，實(shí)現(xiàn)數(shù)據(jù)庫的增加、查找等（此處在xampp中的默認(rèn)路徑創(chuàng)建database文件夾）。

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

創(chuàng)建get.php文件。本文件的作用是將nodejs中傳來的數(shù)據(jù)寫入到數(shù)據(jù)庫中。所以此時(shí)數(shù)據(jù)庫中應(yīng)該有相應(yīng)接收數(shù)據(jù)的表格（此處為forfetobe數(shù)據(jù)庫下的classData 數(shù)據(jù)表格）。

具體代碼：在Github中查看。

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

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

    });
})

具體代碼在Github上查看。
此時(shí)，打開相應(yīng)服務(wù)，表格中添加數(shù)據(jù)，即可以傳輸?shù)綌?shù)據(jù)庫中的相應(yīng)數(shù)據(jù)表里。

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

上一節(jié)中封裝了一個(gè)PDO類，也就是DB.php文件。創(chuàng)建此類的一個(gè)實(shí)例，用來查詢數(shù)據(jù)庫中的數(shù)據(jù)。
依舊是在xampp中的默認(rèn)路徑創(chuàng)建database文件夾下，新建back.php，進(jìn)行數(shù)據(jù)庫相應(yīng)數(shù)據(jù)表的查詢，具體代碼：在GitHub上 查看。

通過上面的php可以將數(shù)據(jù)拿回至php，現(xiàn)在需要將數(shù)據(jù) 經(jīng)由nodejs，再將其發(fā)送到前端頁面上，需要在app.js中設(shè)置相關(guān)路由。

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

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

//設(shè)置路由，作用是將來自‘show_data.html’的ajax請(qǐng)求，并將數(shù)據(jù)庫中的數(shù)據(jù)通過PHP發(fā)送至此
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);//必須。將數(shù)據(jù)吐出。
    });
    })；

現(xiàn)在即需要書寫show_data.html界面，接收數(shù)據(jù)。
此處需要在public文件夾下創(chuàng)建scripts、 css、 images等文件夾來存放相應(yīng)的靜態(tài)資源文件。在將靜態(tài)文件 .css、.js、img放入到public文件夾下的相應(yīng)路徑中去。
此時(shí)項(xiàng)目文檔結(jié)構(gòu)為：

引入路徑為：

//show_data.html文件內(nèi)的樣式文件引入路徑展示。

在書寫完整體的展示界面后，（詳細(xì)代碼在：GitHub上查看）， 就需要將數(shù)據(jù)傳輸?shù)巾撁嬷腥ァ?/p> 數(shù)據(jù)展示到頁面中去：

在相應(yīng)的位置書寫ajax請(qǐng)求，將showData 路由上的數(shù)據(jù)發(fā)送到頁面：

$(function() {
  $.ajax({
    url: "http://localhost:3000/showData",
    dataType: "json",
    success: function(point) {
      var jsondata = JSON.parse(point);
      var datalength = jsondata.length;
      //提取數(shù)據(jù)庫里最近七天內(nèi)的數(shù)據(jù)
      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 創(chuàng)建表格。
      //具體代碼在Github上查看。
})

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

進(jìn)入登錄界面：

其中輸入錯(cuò)誤的密碼或未注冊(cè)的用戶名均會(huì)得到提示：

查看展示界面：

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

添加數(shù)據(jù)：

添加成功后點(diǎn)擊確認(rèn) 添加按鈕，即可在展示界面查看最新數(shù)據(jù)。