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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
TS 类型兼容教程示例详解
Sep 23 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/11/17 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python实现决策树分类算法
2017/12/21 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
舞蹈教育学专业推荐信
2013/11/27 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
房地产开发项目建议书
2014/05/16 职场文书
党员演讲稿
2014/09/04 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
经营场所使用证明
2015/06/19 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang