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


Posted in Javascript onJanuary 17, 2016

环境:

主机: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;
Javascript 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
JS跨域代码片段
Aug 30 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
select标签设置默认选中的选项方法
Mar 02 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
You might like
PHP邮件专题
2006/10/09 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python实现猜拳游戏
2020/03/04 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
广州盈通面试题
2015/12/05 面试题
自我评价的正确写法
2013/09/19 职场文书
仓库组长岗位职责
2014/01/29 职场文书
中学教师教育感言
2014/02/21 职场文书
房屋买卖协议书
2014/04/10 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
见习报告的格式
2014/11/04 职场文书
儿园租房协议书范本
2014/12/02 职场文书
交流会主持词
2015/07/02 职场文书
运动会广播稿20字
2015/08/19 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫