基于MVC框架实现按钮输入计算器的可用源码咨询

你要的无JS计算器可以完全通过服务端MVC架构实现，核心逻辑是所有按钮点击都通过表单提交触发服务端处理，Model层负责运算状态存储和计算逻辑，Controller层负责请求处理和页面渲染，不需要任何前端JS代码。

下面是最简可运行的源码示例，用PHP原生MVC结构实现，核心逻辑可以平移到任意服务端MVC框架： #

1. Model层（CalculatorModel.php） #

负责存储当前运算表达式、处理运算逻辑，不涉及任何请求处理或视图输出：

<?php
class CalculatorModel {
    // 存储当前输入的运算表达式
    private $expression = '';
    // 存储计算结果
    private $result = 0;

    // 处理输入的内容（数字、运算符、清空、等于指令）
    public function handleInput($input) {
        switch($input) {
            case 'C':
                $this->expression = '';
                $this->result = 0;
                break;
            case '=':
                try {
                    // 安全计算：过滤危险字符只保留数字和运算符
                    $safeExp = preg_replace('/[^0-9+\-*\/.]/', '', $this->expression);
                    if(!empty($safeExp)) {
                        eval('$this->result = ' . $safeExp . ';');
                        $this->expression = (string)$this->result;
                    }
                } catch (Error $e) {
                    $this->expression = 'Error';
                }
                break;
            default:
                // 追加数字或运算符
                $this->expression .= $input;
                break;
        }
    }

    // 获取当前要展示的表达式
    public function getExpression() {
        return $this->expression ?: '0';
    }
}
?>

注意：示例中为了简化运算逻辑用了eval函数，生产环境使用建议自行实现表达式解析，避免潜在的安全风险。 #

2. Controller层（CalculatorController.php） #

负责接收请求、调用Model处理逻辑、渲染输出页面：

<?php
require_once 'CalculatorModel.php';

session_start();
// 用session存储当前用户的计算器状态，多用户互不影响
if(!isset($_SESSION['calculator'])) {
    $_SESSION['calculator'] = new CalculatorModel();
}
$calculator = $_SESSION['calculator'];

// 处理按钮提交的输入
if(isset($_POST['input'])) {
    $calculator->handleInput($_POST['input']);
}

// 渲染页面（视图逻辑可以单独拆分，这里直接放在Controller输出简化结构）
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无JS计算器</title>
    <style>
        .calculator { width: 300px; margin: 50px auto; }
        .display { width: 100%; height: 60px; background: #f5f5f5; text-align: right; padding: 10px; font-size: 24px; box-sizing: border-box; margin-bottom: 10px; }
        .btn-row { display: flex; gap: 10px; margin-bottom: 10px; }
        button { flex: 1; height: 50px; font-size: 18px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="calculator">
        <form method="post">
            <div class="display"><?= $calculator->getExpression() ?></div>
            <div class="btn-row">
                <button type="submit" name="input" value="C">C</button>
                <button type="submit" name="input" value="/">/</button>
                <button type="submit" name="input" value="*">*</button>
                <button type="submit" name="input" value="-">-</button>
            </div>
            <div class="btn-row">
                <button type="submit" name="input" value="7">7</button>
                <button type="submit" name="input" value="8">8</button>
                <button type="submit" name="input" value="9">9</button>
                <button type="submit" name="input" value="+">+</button>
            </div>
            <div class="btn-row">
                <button type="submit" name="input" value="4">4</button>
                <button type="submit" name="input" value="5">5</button>
                <button type="submit" name="input" value="6">6</button>
                <button type="submit" name="input" value="1">1</button>
            </div>
            <div class="btn-row">
                <button type="submit" name="input" value="2">2</button>
                <button type="submit" name="input" value="3">3</button>
                <button type="submit" name="input" value="0">0</button>
                <button type="submit" name="input" value=".">.</button>
            </div>
            <div class="btn-row">
                <button type="submit" name="input" value="=" style="flex: 4">=</button>
            </div>
        </form>
    </div>
</body>
</html>

使用说明 #

• 把两个文件放在PHP运行环境的目录下，直接访问CalculatorController.php即可使用
• 所有运算逻辑都在Model层实现，Controller只负责请求转发和状态维护，完全没有用到任何JavaScript代码
• 如果要适配其他MVC框架（比如Spring MVC、Django、Laravel等），只要把Model的计算逻辑平移，按照对应框架的规则写Controller路由和视图渲染即可，核心逻辑完全通用。

内容的提问来源于stack exchange，提问作者Shahriyar Rahim