個人第一個Node web程序

時間 2019-11-19

標籤個人第一個 node web 程序欄目 HTML 简体版

原文原文鏈接

NodeJS的流行也帶來了開發由前端轉到全棧，前端再也不侷限於頁面如何展示，用戶如何操做，也設計到整個應用的架構以及業務流程。html

本篇來簡單的經過實例，講述node中web開發的模式。前端

參考來自《Node web開發》一書。node

關於node

　　node是基於事件的異步驅動系統，經過可擴展的方式建立網絡服務器。web

　　例如，建立一個網絡服務器：npm

var http_port = 8124; var http = require('http'); var server = http.createServer(function (req,res){ ....本身的代碼 }); server.listen(http_port);

　　這樣就能夠建立一個簡單的服務器。json

關於npm

　　npm是node的包管理工具，node裏面有不少的模塊，能夠經過require('模塊名字')的方式加載到項目中。服務器

　　經常使用的命令：網絡

npm init 建立項目的package.json文件，配置其信息以及依賴項 npm install 經過package.json的聲明，安裝須要的包 npm install xxxx 安裝xxxx包 npm install xxxx --save-dev 以開發模式安裝xxxx包，當用於生產環境時，不會下載開發模式的xxxx

關於項目佈局

　　在node中，很注重模塊化，按照commonjs的思想，儘可能把功能分散到模塊中進行重用。架構

　　可是也有點弊端，會出現不少鬆散的文件，不易於管理。app

　　一般node中都會把第三方的模塊包，放在node_modules文件夾中，node也會在require()的時候，自動向上搜索該文件家，引用其js。

　　node_modules中的js文件，大可能是一些加載自動執行的文件，或者對外暴露出必定的接口，好比：

(function(a,b){}( this, function(){ //.....
}));

　　或者

var xxx = require('xxx'); exports.funca = function(){ //.......xxx
} exports.funcb = function(){ //.....xxx
}

關於代碼

　　本篇的項目作了一個小網站，經過模塊化開發，項目組織以下：

app: |——app-node.js 定義web服務器 |——home-node.js 定義home主頁模塊 |——htutil.js 定義工具模塊，用於定義導航，以及網頁模板替換方法，和獲取http信息 |——mult-node.js 經過get方法獲取參數信息，並執行加法 |——package.json 定義網站項目信息

　　app-node.js代碼：

var http_port = 8124; var http = require('http'); var htutil = require('./htutil'); var server = http.createServer(function (req,res){ console.log("in server!"); htutil.loadParams(req,res,undefined); if(req.requrl.pathname === '/'){ require('./home-node').get(req,res); }else if(req.requrl.pathname === '/square'){ require('./square-node').get(req,res); }else if(req.requrl.pathname === '/factorial'){ require('./factorial-node').get(req,res); }else if(req.requrl.pathname === '/fibonacci'){ require('./fibonacci-node').get(req,res); }else if(req.requrl.pathname === '/mult'){ require('./mult-node').get(req,res); }else{ res.writeHead(404,{'Content-Type':'text/plain'}); res.end("bad url"+req.url); } }); server.listen(http_port); console.log('listening to http://localhost:8124');

　　home-node.js

var htutil = require('./htutil'); exports.get = function(req,res){ res.writeHead(200,{ 'Content-Type':'text/html' }); res.end(htutil.page("Math Wizard", htutil.navbar(), "<p>Math Wizard</p>" )); }

　　mult-node.js

var htutil = require("./htutil"); exports.get = function(req,res){ res.writeHead(200,{ 'Content-Type':'text/html' }); var result = req.a * req.b; res.end( htutil.page("Multiplication",htutil.navbar(),[ (!isNaN(req.a) && !isNaN(req.b) ?( "<p class='result'>{a}*{b}={result}</p>" .replace("{a}",req.a) .replace("{b}",req.b) .replace("{result}",req.a*req.b) ) :""), "<p>Enter numbers to multiply</p>", "<form name='mult' action='/mult' method='get'>", "A:<input type='text' name='a' /><br/>", "B:<input type='text' name='b' /><br/>", "<input type='submit' value='Submit' /></form>" ].join('\n')) ); }

　　htutil.js

var url = require('url'); //get url params a & b
exports.loadParams = function(req,res,next){ req.requrl = url.parse(req.url,true); req.a = (req.requrl.query.a && !isNaN(req.requrl.query.a)) ?new Number(req.requrl.query.a) :NaN; req.b = (req.requrl.query.b && !isNaN(req.requrl.query.b)) ?new Number(req.requrl.query.b) :NaN; if(next) next(); } // 
exports.navbar = function(){ return ["<div class='navbar'>", "<p><a href='/'>home</a></p>", "<p><a href='/mult'>Multiplication</a></p>", "<p><a href='/square'>Square's</a></p>", "<p><a href='/factorial'>factorial's</a></p>", "<p><a href='/fibonacci'>Fibonacci's</a></p>", "</div>" ].join('\n'); } // exports.page = function(title,navbar,content){ return ["<html><head><title>{title}</title></head><body>", "<td>{navbar}</td><td>{content}</td>", "</tr></table></body></html>" ].join('\n') .replace("{title}",title,"g") .replace("{navbar}",navbar,"g") .replace("{content}",content,"g"); }

　　package.js

{ "name": "chap04", "version": "1.0.0", "description": "", "main": "app-node.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

　　執行命令行：