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 关于# 和 void的区别分析
Oct 26 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
php7下的filesize函数
2019/09/30 PHP
lib.utf.js
2007/08/21 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
通过npm引用的vue组件使用详解
2017/03/02 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python基础教程之五种数据类型详解
2017/01/12 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
EJB timer的种类
2014/10/28 面试题
运动会广播稿500字
2014/01/28 职场文书
工作决心书
2014/03/11 职场文书
超市创业计划书
2014/09/15 职场文书
免职证明样本
2014/10/23 职场文书
信访工作个人总结
2015/03/03 职场文书
合作意向书怎么写
2019/06/24 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL