node.js+express制作網(wǎng)頁計算器

更新時間：2016年01月17日 14:29:01 投稿：hebedich

這篇文章主要介紹了node.js+express制作網(wǎng)頁計算器的相關(guān)資料,需要的朋友可以參考下

環(huán)境：

主機(jī):WIN10

express安裝：

1.安裝express-generator

輸入命令：

npm install -g express-generator

2.安裝express

輸入命令：

npm install -g express

3.驗證是否安裝成功

輸入命令：express -V

查看幫助：express --help

建立工程：

express -e calculator

cd calculator && npm install

運行默認(rèn)網(wǎng)頁：

輸入命令：npm start或者node ./bin/www

端口配置在/bin/www中。

可以執(zhí)行加法運算。

源代碼：

view/index.ejs:增加輸入框

<!DOCTYPE html> 
<html> 
 <head> 
  <title><%= title %></title> 
  <link rel='stylesheet' href='/stylesheets/style.css' /> 
 </head> 
 <body> 
    <form method="post"> 
      <p>計算器</p> 
    <input type="text" name="num1" value=<%= numa %> /><br /> 
    <input type="text" name="num2" value=<%= numb %> /><br /> 
    <input type="submit" value="計算" /> 
    <p>結(jié)果:<%= sum %></p> 
    </form> 
 </body> 
</html>

routes/index.js:對提交的數(shù)據(jù)進(jìn)行計算并推送結(jié)果

var express = require('express'); 
var router = express.Router(); 
 
/* GET home page. */ 
router.get('/', function(req, res, next) { 
 res.render('index', {  
  title: '計算器V1.0 by jdh', 
  numa: 0, 
    numb: 0, 
    sum: 0 
 }); 
}); 
 
router.post('/', function (req, res) { 
  console.log("接收:", req.body.num1, req.body.num2); 
  var sum = parseFloat(req.body.num1) + parseFloat(req.body.num2); 
  console.log('sum = ',sum); 
   
  res.render('index', {  
  title: '計算器V1.0 by jdh', 
// numa: req.body.num1, 
//   numb: req.body.num2 
    numa: req.body.num1, 
    numb: req.body.num2, 
    sum: sum 
 }); 
}); 
   
module.exports = router;

您可能感興趣的文章:

相關(guān)文章

node.js 使用ejs模板引擎時后綴換成.html
本文給大家分享一個nodejs的小技巧，將ejs模板引擎的模板后綴改成.html的使用方法，非常的簡單實用，這里推薦給大家。
2015-04-04
PHPStorm中如何對nodejs項目進(jìn)行單元測試詳解
這篇文章主要給大家介紹了關(guān)于PHPStorm中如何對nodejs項目進(jìn)行單元測試的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
Node.js安裝配置圖文教程
這篇文章主要為大家詳細(xì)介紹了Node.js安裝配置的圖文教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
Express框架實現(xiàn)簡單攔截器功能示例
這篇文章主要介紹了Express框架實現(xiàn)簡單攔截器功能,結(jié)合實例形式分析了express框架攔截器相關(guān)功能與使用方法,需要的朋友可以參考下
2023-05-05
node微信小程序登錄實現(xiàn)登錄的項目實踐
登陸流程是指小程序用戶進(jìn)行授權(quán)登陸,即獲取用戶的微信賬號等信息本文就來介紹一下node微信小程序登錄實現(xiàn)登錄,具有一定的參考價值,感興趣的可以了解一下
2023-09-09
基于nodejs 的多頁面爬蟲實例代碼
本篇文章主要介紹了基于nodejs 的多頁面爬蟲，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
可能是全網(wǎng)最詳細(xì)的nodejs卸載和安裝教程
npm的中文意思為"node包管理器",是Node.js平臺的默認(rèn)包管理工具,會隨著Nodejs一起安裝,npm管理對應(yīng)node.js的第三方插件,下面這篇文章主要給大家介紹了關(guān)于nodejs卸載和安裝教程的相關(guān)資料，這可能全網(wǎng)最詳細(xì)的教程了,需要的朋友可以參考下
2023-05-05
node的EventEmitter模塊基本用法簡單實現(xiàn)示例
這篇文章主要為大家介紹了node的EventEmitter模塊基本用法簡單實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
window10下node使用管理神器NVM安裝配置超詳細(xì)步驟
nvm全稱Node Version Manager是 Nodejs 版本管理器，它讓我們能方便的對 Nodejs 的版本進(jìn)行切換，nvm 的官方版本只支持 Linux 和 Mac， Windows 用戶，可以用 nvm-windows，這篇文章主要介紹了window10下node使用管理神器NVM安裝配置超詳細(xì)步驟,需要的朋友可以參考下
2023-01-01
利用nginx + node在阿里云部署https的步驟詳解
這篇文章主要給大家介紹了關(guān)于利用nginx + node在阿里云部署https的步驟，文中通過圖文及示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12