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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
Javascript调用C#代码
Jan 17 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
python读取注册表中值的方法
2013/04/08 Python
centos系统升级python 2.7.3
2014/07/03 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python定义一个函数的方法
2020/06/15 Python
python代码实现猜拳小游戏
2020/11/30 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
高三语文教学反思
2014/01/15 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书