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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
vue实现登录功能
Dec 31 Vue.js
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类
2008/04/09 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
功能强大的php分页函数
2016/07/20 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
如何在django中实现分页功能
2020/04/22 Python
浅谈django channels 路由误导
2020/05/28 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
医科大学生毕业的自我评价分享
2013/11/12 职场文书
党务公开方案
2014/05/06 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
维稳工作情况汇报
2014/10/27 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
WebRTC记录音视频流(web技术分享)
2022/02/24 Javascript
拙作再改《我的收音机情缘》
2022/04/05 无线电