node.js+express制作网页计算器

更新时间：2016年01月17日 14:29:01 投稿：hebedich

这篇文章主要介绍了node.js+express制作网页计算器的相关资料,需要的朋友可以参考下

环境：

主机: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

运行默认网页：

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

端口配置在/bin/www中。

可以执行加法运算。

源代码：

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>结果:<%= sum %></p> 
    </form> 
 </body> 
</html>

routes/index.js:对提交的数据进行计算并推送结果

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;

您可能感兴趣的文章:

node.js 使用ejs模板引擎时后缀换成.html
本文给大家分享一个nodejs的小技巧，将ejs模板引擎的模板后缀改成.html的使用方法，非常的简单实用，这里推荐给大家。
2015-04-04
PHPStorm中如何对nodejs项目进行单元测试详解
这篇文章主要给大家介绍了关于PHPStorm中如何对nodejs项目进行单元测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
Node.js安装配置图文教程
这篇文章主要为大家详细介绍了Node.js安装配置的图文教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Express框架实现简单拦截器功能示例
这篇文章主要介绍了Express框架实现简单拦截器功能,结合实例形式分析了express框架拦截器相关功能与使用方法,需要的朋友可以参考下
2023-05-05
node微信小程序登录实现登录的项目实践
登陆流程是指小程序用户进行授权登陆,即获取用户的微信账号等信息本文就来介绍一下node微信小程序登录实现登录,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
基于nodejs 的多页面爬虫实例代码
本篇文章主要介绍了基于nodejs 的多页面爬虫，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
可能是全网最详细的nodejs卸载和安装教程
npm的中文意思为"node包管理器",是Node.js平台的默认包管理工具,会随着Nodejs一起安装,npm管理对应node.js的第三方插件,下面这篇文章主要给大家介绍了关于nodejs卸载和安装教程的相关资料，这可能全网最详细的教程了,需要的朋友可以参考下
2023-05-05
node的EventEmitter模块基本用法简单实现示例
这篇文章主要为大家介绍了node的EventEmitter模块基本用法简单实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
window10下node使用管理神器NVM安装配置超详细步骤
nvm全称Node Version Manager是 Nodejs 版本管理器，它让我们能方便的对 Nodejs 的版本进行切换，nvm 的官方版本只支持 Linux 和 Mac， Windows 用户，可以用 nvm-windows，这篇文章主要介绍了window10下node使用管理神器NVM安装配置超详细步骤,需要的朋友可以参考下
2023-01-01
利用nginx + node在阿里云部署https的步骤详解
这篇文章主要给大家介绍了关于利用nginx + node在阿里云部署https的步骤，文中通过图文及示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
2017-12-12