Node Express 初探
阿新 • • 發佈：2017-08-27
登錄頁面 接收 cnblogs head 開放 val 開發框架 har ice 
一如既往，先上一張圖
Express 基於 Node.js 平臺，快速、開放、極簡的 web 開發框架。
關於Express更多相關知識請鏈接至官網http://www.expressjs.com.cn/
1、訪問本地服務
在指定的目錄中創建app.js
1 //express 2 var express = require(‘express‘); 3 //app核心 4 var app = express(); 5 //get 6 app.get(‘/‘, function (req, res) { 7 res.send(‘Node express 初試探....!‘); 8 }); 9 //訪問端口 10 var server = app.listen(1314, function (req,res,next) { 11 var host = server.address().address; 12 var port = server.address().port; 13 console.log(host);
node 啟動app.js文件，瀏覽器端輸入localhost:1314 即可訪問響應內容 Node Express 初探.....
2.實現瀏覽器端url參數路由跳轉
1 //express 2 varexpress = require(‘express‘); 3 var app = express(); 4 5 //express.static 設置靜態資源（images/js/css等）文件目錄 6 app.use(express.static(‘public‘)); 7 8 //get請求 根據url實現路由跳轉 9 app.get(‘/index.html‘, function (req, res) { 10 res.sendFile(__dirname + ‘/‘ + ‘index.html‘); 11 }); 12 13 //get請求 根據url實現路由跳轉 c14 app.get(‘/login.html‘, function (req, res) { 15 res.sendFile(__dirname + ‘/‘ + ‘login.html‘); 16 }); 17 //端口 18 var server = app.listen(1314, function () { 19 var host = server.address().address; 20 var port = server.address().port; 21 console.log("實例應用，訪問地址為 http://%s:%s", host, port); 22 })
inde.html 主頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Node Express路由跳轉</title> </head> <body> <p>實現Express路由跳轉......</p> </body> </html>View Code
login登錄頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Node Express路由跳轉</title> 8 </head> 9 <body> 10 <form action="" method="GET"> 11 姓名：<input type="text" name="username"><br/> 12 密碼：<input type="password" name="pass"></br> 13 <input type=‘submit‘ value=‘提交‘/> 14 </form> 15 </body> 16 </html>View Code
3、get提交
//提交表單數據 app.get(‘/app_get‘, function (req, res) { // 輸出json格式 // 將接收的數據轉換為json格式輸出 response = { username : req.query.username, pass : req.query.pass, }; console.log(response); res.end(JSON.stringify(response)); });
設置form屬性 <form action="http:///localhost:1314/app_get" method="GET"></form> 即可，響應數據是字符串對象
4、post提交
1 var express = require(‘express‘); 2 var app = express(); 3 var bodyParser = require(‘body-parser‘); 4 // 創建 application/x-www-form-urlencoded 編碼解析 5 var urlencodedParser = bodyParser.urlencoded({ 6 extended : false 7 }); 8 app.use(express.static(‘public‘)); 9 app.get(‘/post.html‘, function (req, res) { 10 res.sendFile(__dirname + ‘/‘ + ‘post.html‘); 11 }); 12 app.post(‘/app_post‘, urlencodedParser, function (req, res) { 13 // JSON 格式 14 response = { 15 username : req.body.username, 16 pass : req.body.pass, 17 }; 18 19 console.log(response); 20 res.end(JSON.stringify(response)); 21 }); 22 var server = app.listen(1314, function () { 23 var host = server.address().address; 24 var port = server.address().port; 25 console.log("應用實例，訪問地址為 http://%s:%s", host, port); 26 })
設置form屬性 <form action="http:///localhost:1314/app_post" method="post"></form> 即可
Node Express 初探