後臺管理系統相關

FE-Nodejs-PHP-database

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

• 前端頁面：html五、CSS三、JavaScript；
• nodejs：express框架、swig模板；
• php：封裝類，查詢、插入數據。

開始準備工做

建立項目文件夾-FEtoBE：

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

前端-數據庫

建立寫入數據頁面

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

數據傳輸通過nodejs

安裝相應插件模板等

此步的整體流程爲：給表格中的按鈕「點擊添加」添加事件，使其經過點擊事件，發送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);
});

設置ajax發送表格數據

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

<script type="text/javascript">
        $('#submit-button').on('click',function(){
            e.preventDefault();
            $.ajax({
            //url的內容端口號爲app.js中設置的端口號
                url:'http://localhost:3000/addData',
                type:'get',
                dataType:'json',
                data:{
                    'mathNum':$('#number-one').val(),
                   //等等
                },
                success:function(result){
                    console.log('success');
                },
                error:function(XHR,textStatus,errorThrown){
                    console.log(XHR.status);
                    console.log(XHR.readyState);
                    console.log(textStatus);
                }
            })
        })
    </script>

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

PHP文件

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

建立封裝類：

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

建立寫入數據的php文件

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

具體代碼：在Github中查看。

將數據經由php寫入到數據庫中

上兩步的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）。

php文件獲取數據庫數據

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

數據取回至Nodejs

經過上面的php能夠將數據拿回至php，如今須要將數據 經由nodejs，再將其發送到前端頁面上，須要在app.js中設置相關路由。

設置數據展現界面路由

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

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

設置php發送到nodejs上的路由

//設置路由，做用是未來自‘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文件內的樣式文件引入路徑展現。
<link rel="stylesheet" type="text/css" href="css/layout.css">

在書寫完總體的展現界面後，（詳細代碼在：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發送到數據庫中，而後再從數據庫中拿取最新的數據，展現到界面中。
整個的展現流程爲：

1. 進入登陸界面：

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

2. 查看展現界面：

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

3. 添加數據：

   添加成功後點擊確認 添加按鈕，便可在展現界面查看最新數據。

整個的流程就是：