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 相关文章推荐
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Vue实现简单的留言板
2020/10/23 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python错误处理详解
2014/09/28 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
实践Vim配置python开发环境
2018/07/02 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
学校募捐倡议书
2014/05/14 职场文书
团日活动总结怎么写
2014/06/25 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL