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 相关文章推荐
利用JS实现浏览器的title闪烁
Jul 08 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python七夕浪漫表白源码
2019/04/05 Python
三个python爬虫项目实例代码
2019/12/28 Python
tensorflow之并行读入数据详解
2020/02/05 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
网络宣传方案
2014/03/15 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL