[Web] Nodejs 導入AngularJS 並讀取資料庫資料並顯示在網頁上
這兩天終於花了點時間完成了網頁的部分
主要是想讓網頁可以呈現來自MySQL的資料
文末會將寫好的網頁整個打包成一個ZIP檔放在雲端上
那我們就直接進入網頁如何撰寫與如何架設網站
在自己想要的路徑下建立一個新的專案，在自己想要建立專案的路徑下開起終端機
下指令:
express MyProject
就會產生一個MyProject的資料夾，並且裡面會有bin, public, routes, views, app.js, package.json檔案
然後再到MyProject資料夾底下下指令:
npm install
會再產生一些新的檔案如下圖顯示
主要是想讓網頁可以呈現來自MySQL的資料
文末會將寫好的網頁整個打包成一個ZIP檔放在雲端上
那我們就直接進入網頁如何撰寫與如何架設網站
在自己想要的路徑下建立一個新的專案，在自己想要建立專案的路徑下開起終端機
下指令:
express MyProject
就會產生一個MyProject的資料夾，並且裡面會有bin, public, routes, views, app.js, package.json檔案
然後再到MyProject資料夾底下下指令:
npm install
會再產生一些新的檔案如下圖顯示
在這個路徑下直接下指令
npm start 網站就會被啟動，在網頁上輸入http://localhost:3000/ 就可以看到最簡單的網頁。
但我們還要跟資料庫做連接，因此再往下做吧。
在routes這個資料夾下，有index.js，可以仔細觀察根目錄下的app.js裡己經有把這兩個的路由加進去了。所以我們在網頁上輸入http://localhost:3000/ 的話，其實是導向index.js裡的內容喔
在app.js裡的兩行
var indexRouter = require('./routes/index');
app.use('/', indexRouter);
就是在將網頁的初始路徑指向index.js裡
再來打開index.js來看，簡單的來說res.render('index', { title: 'Express' }); 就是回傳title='Express'
我們這次就是要改這個檔案，讓index.js回傳資料庫的資料，並且再寫一個靜態的html來接收MySQL回傳的資料顯示在網頁上
以下是我修改過後的index.js後的情況
我把舊的直接註解掉了，加上我自己要的，能在圖中看到我多引用了./db.js跟moment.
moment 這個資料庫是要下npm install moment指令去獲得的LIB，我主要用來改變從資料庫撈到的時間格式。db.js是我自己在同index.js路徑下自己再建立的。
以下是db.js檔案的內容，內容就不多解釋了。
回來解釋index.js，當網頁來到http://localhost:3000/ 的時候，會透過db.js跟index.js去執行mysql的指令"SELECT * FROM GYRO.Log2"，執行完後會將結果打包成JSON檔案回傳至網頁上。
然後在./MyProject/public/javascripts/下建立檔案angular.js，內容如下
$http.get('/')這邊就是去從http://localhost:3000/獲得來自資料庫的資料。
並且用$scope.items = data; 這行來接收資料庫的資料。
這樣就算是完成一大半了。接下來就是從html檔來接收資料囉。
在./MyProject/public/下建立一個檔，這邊範例建立GYRO.html檔
因為我己經改了蠻多東西的，這邊簡單解釋一下
<div ng-controller="MapCtrl">
<table class="table table-striped">
<tbody>
<tr ng-repeat="item in items">
<td>{{ item.Name}}</td>
<td>{{ item.value | number:5 }}</td>
</tr>
</tbody>
</table>
</div>
從MapCtrl接收資料，資料的名稱是item，屬性是Name跟value，因為Name是字串我就直接顯示了。item.value | number:5 因value是有小數點的，我後面加的number:5 意思就是取到小數點後五位。
head裡面的
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<script src="/javascripts/angular.min.js"></script>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/highcharts.js"></script>
是我引用的js跟css檔，各別放在./MyProject/public/javascripts/跟./MyProject/public/stylesheets/裡，bootstrap.min.css, bootstrap.min.css跟highcharts.js這三個檔案都是要上網先下載下來的。有點像是模組，你只要調用這些模組，以後畫圖跟曲線都可以透過這些LIB直接調用，畫圖什麼的都可以變得很輕鬆簡單。
最後沒解釋的
<div id="container1">GYRO X for chart</div>
<div id="container2">GYRO Y for chart</div>
<div id="container3">GYRO Z for chart</div>
這三行就是顯示圖表，在angular.js裡加入
Highcharts.chart('container1', {
title: {
text: 'GYRO X 曲線'
},
xAxis: {
categories: X_Xais
},
series: [{
data: X_Yais
}]
});
就可以直接從html裡調用container1的值用曲線圖的方式顯示出來。這邊只是簡單的解釋怎麼從MYSQL撈資料顯示在網頁上。就不多加贅述。
寫完全部後在./MyProject路徑下輸入npm start，並開起網頁http://localhost:3000/GYRO.html
顯示出做好的成果，以下圖是我完成的結果:
PS: 如果port 3000或設定的網頁port被佔用了，可以下指令
sudo netstat -lpn |grep 3000
觀察是哪個東西佔用了port，並依PID去解除正在使用的port
kill -9 XXXX (XXXX代表PID)
example:
host@host-desktop:~/JavaScript/Ch18/demo6$ sudo netstat -lpn |grep 3000
tcp6 0 0 :::3000 :::* LISTEN 7137/node
host@host-desktop:~/JavaScript/Ch18/demo6$ kill -9 7137
參考 reference:
成果
留言
張貼留言