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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php基本函数汇总
2015/07/09 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python多进程使用函数封装实例
2020/05/02 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python 高阶函数简单介绍
2021/02/19 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
PHP面试题附答案
2015/11/28 面试题
体育专业个人求职信范文
2013/12/27 职场文书
志愿者宣传口号
2014/06/17 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python