从编程小白到全栈开发：改造为全栈计算器

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);

    /**************** 改造结束 **********************/

}

const http = require('http');

const server = http.createServer((req, res) => {
    res.end('working!!!');
});

server.listen(8888, () => {
    console.log('server is listening on port 8888 ...')
});

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 ...')
});