最近剛剛學習了下node，和node的express框架，所以前來小總結一下
Node.js
簡單的說 Node.js 就是運行在服務端的 JavaScript。
Node.js 是一個基於Chrome JavaScript 運行時建立的一個平臺。
Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。
我現在的理解就說白了就是可以寫簡單的後端吧
配置
1、安裝node.js
在編譯器裏面打開終端，輸入
node -v
如果你沒裝，就按照下面的命令（只對mac）
打開終端，使用 brew 命令來安裝：
1.安裝brew
打開終端運行以下命令：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然後查看一下是否安裝成功，輸入以下命令：
brew -v
如果出現版本信息，就說明安裝成功。
2、安裝node.js
在終端中運行以下命令：
brew install nodejs
安裝成功後，查看一下node.js的版本信息
2、安裝express框架
cnpm install express --save
以上命令會將 Express 框架安裝在當前目錄的 node_modules 目錄中， node_modules 目錄下會自動創建 express 目錄。
運行完後文件夾會多出這兩個文件。
然後就可以開始做小練習了。
練習1、做一個選項卡
使用node.js的express框架
效果圖
不同的按鈕，拿到數據庫的json數據，然後渲染到下面。
數據庫如下
Tab.html
<!DOCTYPE html>
<html>
<!---
對應node.js
-->
<head>
<title>選項卡</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
ul {
list-style: none;
}
li {
float: left;
margin-right: 30px;
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li><button id="btn1">人力資源部</button></li>
<li><button id="btn2">開發部</button></li>
<li><button id="btn3">後勤保障部</button></li>
</ul>
</div>
<br>
<div>
<p id="content"></p >
</div>
</body>
<script>
$(document).ready(function () {
$("button").click(function() {
$.get("dep?id="+$(this).attr('id'),function(res){
console.log(res);
$('#content').text(res);
});
})
})
</script>
</html>
node.js
var express = require('express');
var app = express();
var fs = require('fs');
var mysql = require('mysql');
var mysqlMessage;
//連接數據庫，注意密碼要寫自己的
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '314277357',
database : 'mydb_web'
});
connection.connect();
var sql = 'SELECT * FROM T_User';
connection.query(sql,function(err,result){
if(err){
console.log('SELECT ERROR] - ',err.message );
return;
}
mysqlMessage = result;
})
app.use('/public', express.static('public'));
//Tab.html頁面的get請求
app.get('/Tab.html', function(req, res) {
//res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會自動根據文件extension設定Content-Typ
res.sendFile(__dirname + "/" + "Tab.html");
})
app.get('/dep',function(req,res){
var response;
var depid = req.query.id;
if(depid == 'btn1'){
response = mysqlMessage[0];
}
else if(depid == 'btn2'){
response = mysqlMessage[1];
}
if(depid == 'btn3'){
response = mysqlMessage[2];
}
console.log(response);
// JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。
res.end(JSON.stringify(response));
})
var server = app.listen(8088, "127.0.0.1", function() {
var host = server.address().address;
var port = server.address().port;
console.log("連接地址：http://%s:%s", host, port)
})
運行-在編譯器裏打開終端
node node.js
點擊連接地址就可了,要在後面加上你的頁面。。。http://127.0.0.1:8088/Tab.html
練習2 通知欄
效果圖
數據庫
new.html
<!DOCTYPE html>
<html>
<head>
<title>wogo新聞</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
ul{
list-style: none;
}
li{
line-height: 30px;
}
</style>
<meta charset="utf-8">
<script>
$(document).ready(function () {
$.get("all",function(res){
$.each(JSON.parse(res),function(i,val){
console.log("val",val);
$('#content').append("<li ><button onClick='getContent(this)' id='"+val.new_title+"' > 標題: "+val.new_title+
"</button> 作者： "+val.new_author +
" 發佈時間: "+val.new_date+
"</li>");
});
})
})
function getContent(obj){
localStorage.setItem("name",$(obj).attr('id'));
let url = "new1.html?new_title="+$(obj).attr('id');
window.location.href = url;
}
</script>
</head>
<body>
<div>
<ul id="content">
</ul>
</div>
</body>
</html>
new1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var title=localStorage.getItem("name");
console.log("title",title);
$.get("Content?new_title="+title ,function (res) {
$('#title').text(JSON.parse(res)[0].new_title);
$('#author').text(JSON.parse(res)[0].new_author);
$('#date').text(JSON.parse(res)[0].new_date);
$('#content').text(JSON.parse(res)[0].new_content);
});
})
</script>
</head>
<body>
<h1 id="title"></h1>
<div id="content"></div>
<span id="author"></span>
</br>
<span id="date"></span>
</body>
</html>
node1.js
var express = require('express');
var app = express();
var fs = require('fs');
var mysql = require('mysql');
var mysqlMessage;
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '314277357',
database : 'mydb_web'
});
connection.connect();
var sql = 'SELECT * FROM new';
connection.query(sql,function(err,result){
if(err){
console.log('SELECT ERROR] - ',err.message );
return;
}
mysqlMessage = result;
})
app.use('/public', express.static('public'));
app.get('/new.html', function(req, res) {
res.header("Content-Type","text/html;charst='utf-8'");
res.sendFile(__dirname + "/" + "new.html");
})
app.get('/all',function(req,res){
var response = mysqlMessage;
console.log(response);
res.end(JSON.stringify(response));
})
app.use('/public', express.static('public'));
app.get('/new1.html', function(req, res) {
res.header("Content-Type","text/html;charst='utf-8'");
res.sendFile(__dirname + "/" + "new1.html");
})
app.get('/Content',function(req,res){
var response;
var req = req.query.new_title;
console.log("req",req);
var sql = "SELECT * FROM new WHERE new_title = '"+req+"'" ;
connection.query(sql,function(err,result){
if(err){
console.log('SELECT ERROR] - ',err.message );
return;
}
console.log("title:"+req+" response: "+response);
res.end(JSON.stringify(result));
})
})
var server = app.listen(8088, function() {
var host = server.address().address;
var port = server.address().port;
console.log("連接地址：http://127.0.0.1:8088/new.html");
})
運行
