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 相关文章推荐
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
vue params、query传参使用详解
Sep 12 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
css图片自适应大小
2007/11/28 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
基于vue实现分页效果
2017/11/06 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
wxPython中文教程入门实例
2014/06/09 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
求职简历自荐信范文
2013/10/21 职场文书
计算机相关的自我评价
2014/01/15 职场文书
考试没考好检讨书
2014/01/31 职场文书
水电工岗位职责
2014/02/12 职场文书
校园广播稿100字
2014/10/06 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL