本文實(shí)例講述了Node.js基于connect和express框架的多頁(yè)面實(shí)現(xiàn)數(shù)學(xué)運(yùn)算。分享給大家供大家參考，具體如下：
1、使用connect框架
.use方法用于綁定中間件到connect服務(wù)器，它會(huì)配置一系列在接到請(qǐng)求時(shí)調(diào)用的中間件模塊，此例中我們要配置的中間件有favicon logger static router
app.get/post/put 寫法：app.requestName('path', function(req, res, next){});
app-connect.js
var connect = require('connect'); //npm install connect connect.createServer() .use(connect.favicon()) .use(conect.logger()) .use('/filez', connect.static(__dirname + '/filez')) .use(connect.router(function(app){ app.get('/', require('./home-node').get); //一個(gè)URL字符串和兩個(gè)函數(shù)類型的參數(shù) //路由器配置函數(shù)可以包含不限數(shù)量的函數(shù)，你可以為自己的應(yīng)用構(gòu)造一個(gè)處理函數(shù)的隊(duì)列 app.get('/square', htutil.loadParams, require('./square-node').get); app.get('/factorial', htutil.loadParams, require('./factorial-node').get); app.get('/fibonacci', htutil.loadParams, require('./fibo2-node').get); app.get('/mult', htutil.loadParams, require('./mult-node').get); })).listen(3000);console.log('listening to http://localhost:3000');2、使用express框架
Express框架是一個(gè)基于connect(一個(gè)中間件框架)的web應(yīng)用框架
Express專注于構(gòu)建一個(gè)應(yīng)用，包括提供一個(gè)模板系統(tǒng)；connect專注于做web服務(wù)的基礎(chǔ)設(shè)施
安裝Express和EJS(模塊處理系統(tǒng)) npm install express ejs
app-express.js
var htutil = require('./htutil');var math = require('./math');var express = require('express');//var app = express.createServer(express.logger()); //express 2.Xvar app = express(); //express 3.X//可選，因?yàn)镋xpress下默認(rèn)為CWD/viewsapp.set('views', __dirname + '/views');app.engine('.html', require('ejs').__express);app.set('view engine', 'ejs');app.configure(function(){ app.use(app.router); app.use(express.static(__dirname + '/filez')); //默認(rèn)的錯(cuò)誤處理函數(shù)，顯示棧軌跡 //如果要顯示用戶友好的錯(cuò)誤，app.err(function(err, req, res, next){ // res.send(error page); //or res.render('template'); // }); app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));/*改成下面的話，瀏覽器會(huì)顯示一個(gè)簡(jiǎn)單的消息-Internal Server Error內(nèi)部服務(wù)器錯(cuò)誤app.use(express.errorHandler({ dumpExceptions: true }));*/});//以上配置了必需的中間件，因?yàn)檫@里展示的配置項(xiàng)對(duì)應(yīng)的是模板系統(tǒng)的配置，所有.html文件會(huì)由EJS引擎處理//以下是路由器配置app.get('/', function(req, res){ res.render('home.html', {title: "Math Wizard"});});app.get('/mult', htutil.loadParams, function(req, res){ if (req.a && req.b) req.result = req.a * req.b; res.render('mult.html', {title: "Math Wizard", req: req});});app.get('/square', htutil.loadParams, function(req, res){ if (req.a) req.result = req.a * req.a; res.render('square.html', {title: "Math Wizard", req: req});});app.get('/fibonacci', htutil.loadParams, function(req, res){ if (req.a){ math.fibonacciAsync(Math.floor(req.a), function(val){ req.result = val; res.render('fibo.html', {title: "Math Wizard", req: req}); }); }else { res.render('fibo.html', {title: "Math Wizard", req: req}); }});app.get('/factorial', htutil.loadParams, function(req, res){ if (req.a) req.result = math.factorial(req.a); res.render('factorial.html', {title: "Math Wizard", req: req});});app.get('/404', function(req, res){ res.send('NOT FOUND' + req.url);});//res.render函數(shù)通過一個(gè)模板文件渲染數(shù)據(jù)，EJS只是Express里眾多模板引擎中的一個(gè)//配置目的是讓EJS能夠?yàn)関iews目錄下的所有.html文件服務(wù)/*Express里還有其他一些模板引擎 res.render('index.haml', {..data..}); 使用Haml res.render('index.jade', {..data..}); 使用Jade res.render('index.ejs', {..data..}); 使用EJS res.render('index.coffee', {..data..}); 使用CoffeeKup res.render('index.jqtpl', {..data..}); 使用jQueryTemplates也可以通過 app.set('view engine', 'haml'); app.set('view engine', 'jade'); 方法來改變默認(rèn)的渲染引擎layout.html默認(rèn)情況下，模板中用于渲染的內(nèi)容會(huì)被命名為body，然后傳遞到layout模板中，當(dāng)app-express.js調(diào)用res.render('fibo.html'...)時(shí)，它會(huì)先用fibo.html渲染對(duì)應(yīng)的頁(yè)面片段，然后再使用layout模板渲染整個(gè)頁(yè)面有兩種方法覆蓋這一默認(rèn)的行為1、在Express里創(chuàng)建一個(gè)全局的配置，通過這個(gè)全局配置來控制layout模板的啟用與禁用app.set('view options', {layout: false(or true)});2、覆蓋layout模板對(duì)應(yīng)的渲染方式或者使用不同的layout模板res.render('myview.ejs', {layout: false(or true)});或者res.render('page', {layout: 'mylayout.jade'});<% code %> Javascript代碼<%= code %> 顯示替換過HTML特殊字符的內(nèi)容<%- code %> 顯示原始HTML內(nèi)容*/app.listen(3000);console.log('listening to http://localhost:3000');html頁(yè)面放在views目錄下
layout.html
<!DOCTYPE html><html><head> <title></title></head><body> <h1><%=title%></h1> <table> <tr> <td> <div class="navbar"> <p><a href="/" rel="external nofollow" >home</a></p> <p><a href="/mult" rel="external nofollow" >Multiplication</a></p> <p><a href="/square" rel="external nofollow" >Square</a></p> <p><a href="/factorial" rel="external nofollow" >Factorial</a></p> <p><a href="/fibonacci" rel="external nofollow" >Fibonacci</a></p> </div> </td> <td></td> </tr> </table></body></html>
home.html
<% include layout.html %><p>Math Wizard</p>
mult.html
<% include layout.html %><% if (req.a && req.b){ %> <p class="result"> <%=req.a%> * <%=req.b%> = <%=req.result%> </p><% } %><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" /> <input type="submit" name="Submit" /></form>還有其他一些頁(yè)面就不一一列出來了，都大同小異
希望本文所述對(duì)大家nodejs程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
