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 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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下载文件的详解
2013/06/02 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php提取微信账单的有效信息
2018/10/01 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
对python中dict和json的区别详解
2018/12/18 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
基于python plotly交互式图表大全
2019/12/07 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Keras搭建自编码器操作
2020/07/03 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
大学军训感言1500字
2014/03/09 职场文书
物业保安员岗位职责
2014/03/14 职场文书
国旗下演讲稿
2014/05/08 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
检讨书范文500字
2015/01/28 职场文书
单身申明具结书
2015/02/26 职场文书
交通安全学习心得体会
2016/01/18 职场文书
公开致歉信
2019/06/24 职场文书