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 直接操作本地文件的实现代码
Dec 01 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
JS删除对象中某一属性案例详解
Sep 08 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变量
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
javascript 类型判断代码分析
2010/03/28 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
纯js实现隔行变色效果
2017/11/29 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
Python程序语言快速上手教程
2012/07/18 Python
python调用cmd命令行制作刷博器
2014/01/13 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
党员公开承诺事项
2014/03/25 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
初二学习计划书范文
2014/04/27 职场文书
多媒体教室标语
2014/06/26 职场文书
2014年工程师工作总结
2014/11/25 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers