从编程小白到全栈开发：改造为全栈计算器
上一次，我们编写了一个纯前端实现的简易计算器，这次，我们就假装这个计算器在前端运行起来太吃力，客户端的资源完全不够用来进行1+1等于几这种复杂的计算。我们得借助强大的服务器（其实就是我们现在正在用来写代码的这台小破电脑）来完成我们的计算任务。
好，开工！
第一步：把计算任务发给后端
在我们之前写的计算器代码中，有一个名为calc的JS函数，负责从页面上获取用户的输入内容，并进行数学运算。现在，我们要改造它，让它只负责获取用户输入内容，并不做运算，运算的工作，将发往服务器。来看下我是怎么改造它的：
function calc() {
// 获取id为num1的输入框
var num1El = document.getElementById('num1');
// 从num1输入框获取文字内容并转换成数字类型
var num1 = parseFloat(num1El.value);
// 获取id为num2的输入框
var num2El = document.getElementById('num2');
// 从num2输入框获取文字内容并转换成数字类型
var num2 = parseFloat(num2El.value);
// 获取id为operator的下拉框
var operatorEl = document.getElementById('operator');
// 从下拉框获取当前选中的内容
var operator = operatorEl.value;
/**************** 改造开始 **********************/
// 后端服务的地址
var requestUrl = '/calc';
// 要发送到后端的数据
var requestParams = 'num1=' + num1 + '&num2=' + num2 + '&operator=' + encodeURIComponent(operator);
// 把上面的地址和数据拼到一起来
var url = requestUrl + '?' + requestParams;
// 创建一个XMLHttpRequest对象，通过它来和后端服务进行通信交互
var xhr = new XMLHttpRequest();
// 设置当后端请求产生反馈后的处理
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// 成功
if (xhr.status === 200) {
alert('计算结果是：' + xhr.responseText);
}
// 失败
else {
alert('请求服务器失败');
}
}
};
// 开始发送请求
xhr.open('GET', url, true);
xhr.send(null);
/**************** 改造结束 **********************/
}
从上面的代码可以看到，我们通过使用一个叫做XMLHttpRequest的对象，向一个我们暂时还没实现的后端服务(/calc)发送服务请求，把用户输入的两个数字和运算符号发送到后端，等待后端进行处理，并在后端服务有反馈的时候（可能是计算完成，也可能是失败）在页面上给出结果或错误提示。
第二步：创建后端服务
改造前端页面后，我们要来编写这个服务器端的代码了。在这之前，需要先提醒一个事情：就是我们用了XMLHttpRequest来和服务器进行沟通的时候，浏览器会要求我们的页面也必须是要在服务器上，也就是说我们之前直接把html拖进浏览器或通过菜单里“打开”运行的方式，会让XMLHttpRequest不能正常工作。
本地打开的html文件不能让XMLHttpRequest正常工作
下面这种形式才能正常工作：
需要以网址的方式访问
所以在创建我们的后端服务代码的时候，我们会同时来解决这件事情。
我们先创建一个server.js，它将是我们的后端Node.js代码。然后我们来组织一下，把我们的calculator.html和server.js放在一起，都放到同一个文件夹中，比如放到一个叫calculator的文件夹下：
放在同一个文件夹下
接着，我们先来做后端的第一个功能，就是让我们的calculator.html能在浏览器里通过http://localhost:8888这样的网址进行访问。
const http = require('http');
const server = http.createServer((req, res) => {
res.end('working!!!');
});
server.listen(8888, () => {
console.log('server is listening on port 8888 ...')
});
Node.js提供了叫做http的API模块，通过它可以很容易的创建一个提供HTTP服务的后端程序。像上面那样，我们通过http.createServer函数，就创建了一个最简单的后端，然后让它监听在8888端口上，等待请求的到来并作出响应。
你可以通过VS Code来启动这个后端程序，在之前的文章中我已经告诉过大家怎么使用了；你也可以通过windows或Mac的命令行终端来运行这个server.js，方法就是在命令行中，进入你存放server.js的目录，然后执行node server.js，成功运行的话，你就能看到如下所示的内容了：
使用命令行终端运行
然后，打开你的浏览器，在地址栏输入http://localhost:8888，正常的话，就能看到'working!!!'了。
Working
接下来，我们要根据访问的地址不同，后端要进行不同的反馈，比如默认的http://localhost:8080，应该显示我们之前做的那个页面，而http://localhost:8080/calc，应该要执行我们期望的数学运算。
const http = require('http');
const url = require('url');
const querystring = require('querystring');
const fs = require('fs');
const server = http.createServer((req, res) => {
var parsedURL = url.parse(req.url);
// 获取请求的服务路径
var pathname = parsedURL.pathname;
// 如果是根路径/，则输出calculator.html
if (pathname === '/') {
// 读取文件calculator.html内容
fs.readFile(__dirname + '/calculator.html', (err, data) => {
// 设置服务响应头，代表响应的内容是HTML格式的
res.writeHead(200, {
'Content-Type': 'text/html'
});
// 读取文件失败，则发送这段html内容
if (err) {
res.end("<h4>加载HTML文件失败<h4>");
}
// 读取文件成功，则发送文件中的html内容
else {
res.end(data.toString());
}
});
}
// 如果是路径/calc，则处理运算逻辑
else if (pathname === '/calc') {
// 从请求中，分离出从前端发送给后端的用户输入数据
var params = querystring.parse(parsedURL.query);
var num1 = parseFloat(params.num1);
var num2 = parseFloat(params.num2);
var operator = params.operator;
var result = 0;
// 和之前一样的计算逻辑
if (operator === '+') {
result = num1 + num2; // 相加
} else if (operator === '-') {
result = num1 - num2; // 相减
} else if (operator === '*') {
result = num1 * num2; // 相乘
} else if (operator === '/') {
result = num1 / num2; // 相除
}
// 设置服务响应头，代表响应的内容是纯文本格式的
res.writeHead(200, {
'Content-Type': 'text/plain'
});
// 发送计算结果（必须是字符串形式）
res.end('' + result);
}
});
server.listen(8888, () => {
console.log('server is listening on port 8888 ...')
});
好，让我们重新运行一下这个server.js，然后在浏览器中访问http://localhost:8080，我们熟悉的计算器界面又回来了！
计算器界面
尝试输入点内容计算一下，是不是跟之前一样，也能出现计算结果？只不过这一次，它的计算是在Node.js这边的后端服务中进行的啦！
好好消化一下吧，不明白的地方可以直接向我发问哦！
下一次开始，我将稍微讲点基础性知识（不是基础“性知识”！），让你能更好的明白这几篇文章中涉及到的内容。
就算你现在一脸懵逼，你也会成为专家。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》
【省钱小能手】
1. 阿里云通用代金券：最高1888元，云产品通用红包，可叠加官网常规优惠使用
2. 阿里云基础版服务器优惠套餐：1核1G仅需293元/年
3. 阿里云高性能服务器优惠套餐：首次购买企业级云服务器5折
