快捷導(dǎo)航

從零開始學(xué)習(xí)Node.js系列教程之基于connect和express框架的多頁面實(shí)現(xiàn)數(shù)學(xué)運(yùn)算示例

更新時(shí)間：2017年04月13日 11:32:33 作者：MIN飛翔

這篇文章主要介紹了Node.js基于connect和express框架的多頁面實(shí)現(xiàn)數(shù)學(xué)運(yùn)算,簡單講述了connect和express框架的原理及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Node.js基于connect和express框架的多頁面實(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.X
var app = express();  //express 3.X
//可選，因?yàn)镋xpress下默認(rèn)為CWD/views
app.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è)簡單的消息-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)的頁面片段，然后再使用layout模板渲染整個(gè)頁面
有兩種方法覆蓋這一默認(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頁面放在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>

還有其他一些頁面就不一一列出來了，都大同小異

希望本文所述對(duì)大家nodejs程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: