iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >node.js+express制作网页计算器
  • 477
分享到

node.js+express制作网页计算器

计算器制作网页node 2022-06-04 17:06:56 477人浏览 泡泡鱼
摘要

环境: 主机:WIN10 express安装: 1.安装express-generator 输入命令: npm install -g express-generator 2.安装express 输入

环境:

主机: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(); 
 
 
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; 

--结束END--

本文标题: node.js+express制作网页计算器

本文链接: https://www.lsjlt.com/news/13111.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript制作简单网页计算器
    本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下 一、题目 利用JavaScript中的函数,完成数字加、减、乘、除的运算,实现一个简单...
    99+
    2022-11-13
    js 计算器
  • 如何设计和制作网页
    这期内容当中小编将会给大家带来有关如何设计和制作网页,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了...
    99+
    2023-06-08
  • js实现网页计算器
    如何在利用HTML,css和js的知识制作一个简单的网页计算器呢? 一个计算机中具备了: 计算机整体框 输入框 输入按钮 计算机整体框: #sho...
    99+
    2024-04-02
  • JavaScript实现网页计算器
    本文实例为大家分享了JavaScript实现网页计算器的具体代码,供大家参考,具体内容如下 我们学完了函数,做一个网页计算器的小案例,巩固一下。 共两个案例: 案例一图: 相加: ...
    99+
    2024-04-02
  • js制作简易计算器
    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子。 <table bo...
    99+
    2024-04-02
  • html网页制作
    HTML网页制作是指使用超文本标记语言来设计和创建网页的过程,HTML是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。HTML网页制作是指使用HTML(超文本标记语言)语言来设计和创建网页的过程。H...
    99+
    2023-07-31
  • 网页设计制作的通则有哪些
    本篇文章给大家分享的是有关网页设计制作的通则有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。  通则   1、鼓励读者通过填表或发邮件反馈意见。但要准备处理随之而来的事务,...
    99+
    2023-06-08
  • JSP实现简单网页计算器
    本文实例为大家分享了JSP实现简单网页计算器的具体代码,供大家参考,具体内容如下 一、构造一个简单的计算器,能够进行“+、—、*、/”运算 (1)...
    99+
    2024-04-02
  • 基于JavaScript实现网页计算器
    本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码,供大家参考,具体内容如下 先看效果: 此外,计算器还附有数字、运算符检查功能: 下贴源码: ...
    99+
    2024-04-02
  • Vue实现简单网页计算器
    本文实例为大家分享了Vue实现简单网页计算器的具体代码,供大家参考,具体内容如下 案例描述 1、 考核知识点 2、 创建vue实例和对v-model内置指令的使用 3、 练习目标 创...
    99+
    2024-04-02
  • js如何实现网页计算器
    小编给大家分享一下js如何实现网页计算器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如何在利用HTML,css和js的知识制作一个简单的网页计算器呢?一个计算机...
    99+
    2023-06-15
  • Python制作简易计算器功能
    本文实例为大家分享了Python制作简易计算器的具体代码,供大家参考,具体内容如下 简易计算器 简易计算器功能: 实现输入,计算,输出功能;可以计算基本的加减乘除功能;处理除法中除数...
    99+
    2024-04-02
  • 用Java制作简单的计算器
    本篇文章主要是提供思路,当然文章末尾也又提供了源代码。 代码也是写了几天,重要的理解,不是直接复制粘贴就交作业了。 转载请注明出处,尊重作者劳动成果。 目录 界面的设计: 事件的响应: 计算: 详细代码如下:  总结: 要制作一个简...
    99+
    2023-10-09
    java spring jvm
  • Androidstudio制作简易计算器功能
    本文实例为大家分享了Android studio制作简易计算器的具体代码,供大家参考,具体内容如下 布局如下: 布局文件代码: <xml version="1.0" enco...
    99+
    2024-04-02
  • JavaScript实现简单网页版计算器
    背景 由于我又被分进了一个新的项目组,该项目需要用js,因为我没接触过,所以领导准备给我一周时间学习,没错,实现一个简单的支持四则混合运算的计算器就是作业,所以有了这篇文章 故,这篇...
    99+
    2024-04-02
  • javascript实现编写网页版计算器
    本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: <!DOCTYPE html>...
    99+
    2024-04-02
  • python制作简单计算器功能
    本文实例为大家分享了python实现简单计算器功能的具体代码,供大家参考,具体内容如下 效果如图: 主要思路: 用列表保存按下的键,按下等于,转换为字符串,利用内置函数eval计算...
    99+
    2024-04-02
  • JavaScript制作简单计算器功能
    本文实例为大家分享了JavaScript制作简单计算器的具体代码,供大家参考,具体内容如下 1. 任务要求 1)掌握数据的类型转换 2)学会获取文本框控件的数据以及给相应控件赋值 3...
    99+
    2024-04-02
  • 原生JavaScript实现网页版计算器
    本文实例为大家分享了JavaScript实现网页版计算器的具体代码,供大家参考,具体内容如下 由于无聊看电脑上的系统软件翻到了计算器这个功能,就简单写一下这个计算器的功能吧,这个网页...
    99+
    2024-04-02
  • 如何制作2014年圣诞节倒计时网页
    这篇文章主要介绍“如何制作2014年圣诞节倒计时网页”,在日常操作中,相信很多人在如何制作2014年圣诞节倒计时网页问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何制作20...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作