本文介绍如何在Windows 10环境下,利用Node.js和Express框架搭建一个简单的网页加法计算器。内容涵盖express-generator的安装与验证、工程创建、默认服务启动,以及通过修改view/index.ejs和routes/index.js实现数据接收与计算逻辑的核心代码示例。
环境准备与Express安装
运行环境配置如下:
操作系统为WIN10。
接下来进行Express框架的安装准备:
第一步,安装express-generator工具。
执行以下命令完成安装:
npm install -g express-generator
第二步,全局安装express模块。
执行以下命令:
npm install -g express
第三步,检查安装是否成功。
输入命令: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;