Spring控制器响应与AngularJS及HTML模板的对接实现咨询

嘿，别慌！新手刚接触Spring+AngularJS整合的时候，摸不着头绪太正常了。我来一步步帮你把薪资计算器的前后端串起来，从后端接口完善到前端页面交互，全给你讲明白。

第一步：先把你的Spring RestController补全（关键！） #

你给的代码截断了，我先帮你补全一个合理的版本，确保后端能接收前端的参数并返回计算结果：

@RestController
public class CalculatorController {
    private final NBPClient nbpClient;

    // 构造注入NBPClient
    public CalculatorController(NBPClient nbpClient) {
        this.nbpClient = nbpClient;
    }

    // 定义POST接口，接收前端的薪资请求，返回计算后的净薪资
    @RequestMapping(value = "/calculate-net-salary", method = RequestMethod.POST)
    public ResponseEntity<Double> calculateNetSalary(@RequestBody SalaryRequest request) {
        try {
            // 从NBPClient获取目标货币对PLN的汇率
            double exchangeRate = nbpClient.getExchangeRate(request.getCurrencyCode());
            
            // 计算逻辑：日薪*月工作日（假设22天）= 毛薪资，再扣20%税得到PLN净薪资
            double grossSalaryPLN = request.getDailyRate() * 22;
            double netSalaryPLN = grossSalaryPLN * 0.8;
            
            // 把PLN净薪资转换成目标货币
            double netSalaryTarget = netSalaryPLN / exchangeRate;
            
            return ResponseEntity.ok(netSalaryTarget);
        } catch (Exception e) {
            // 处理异常，返回错误状态
            return ResponseEntity.badRequest().body(null);
        }
    }

    // 用来接收前端参数的DTO类（必须有getter/setter，不然Spring没法解析JSON）
    public static class SalaryRequest {
        private String currencyCode;
        private double dailyRate;

        public String getCurrencyCode() {
            return currencyCode;
        }

        public void setCurrencyCode(String currencyCode) {
            this.currencyCode = currencyCode;
        }

        public double getDailyRate() {
            return dailyRate;
        }

        public void setDailyRate(double dailyRate) {
            this.dailyRate = dailyRate;
        }
    }
}

第二步：写AngularJS前端代码 #

AngularJS的核心是数据绑定和**$http服务**，前者让页面和控制器数据联动，后者用来调用后端接口。

1. 先写HTML页面（比如叫index.html） #

<!DOCTYPE html>
<!-- 声明AngularJS应用的根模块 -->
<html ng-app="salaryCalculatorApp">
<head>
    <title>净薪资计算器</title>
    <!-- 引入AngularJS库（直接用CDN就行，不用下载） -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <!-- 引入我们自己的控制器脚本 -->
    <script src="app.js"></script>
</head>
<!-- 绑定控制器到页面 -->
<body ng-controller="SalaryCalculatorController">
    <h1>净薪资计算器</h1>
    
    <!-- 日薪输入框：用ng-model绑定控制器里的dailyRate变量 -->
    <div style="margin: 10px 0;">
        <label>日薪（波兰兹罗提PLN）：</label>
        <input type="number" ng-model="dailyRate" placeholder="请输入日薪" min="0">
    </div>
    
    <!-- 货币代码输入框：绑定currencyCode变量 -->
    <div style="margin: 10px 0;">
        <label>目标货币代码（如EUR/USD）：</label>
        <input type="text" ng-model="currencyCode" placeholder="请输入货币代码" maxlength="3">
    </div>
    
    <!-- 点击按钮触发计算函数 -->
    <button ng-click="calculateNetSalary()" style="padding: 5px 15px;">计算净薪资</button>
    
    <!-- 只有当netSalary有值时才显示结果，用number过滤器保留两位小数 -->
    <div ng-if="netSalary" style="margin-top: 20px; font-size: 1.2em;">
        <h3>计算结果：{{netSalary | number:2}} {{currencyCode}}</h3>
    </div>
</body>
</html>

2. 写AngularJS控制器脚本（app.js） #

这里是前端和后端通信的核心，用$http.post调用我们刚才写的Spring接口：

// 定义AngularJS应用模块
var app = angular.module('salaryCalculatorApp', []);

// 定义控制器，注入$scope（用来共享数据）和$http（用来发请求）
app.controller('SalaryCalculatorController', function($scope, $http) {
    // 初始化变量
    $scope.dailyRate = 0;
    $scope.currencyCode = '';
    $scope.netSalary = null;

    // 计算按钮触发的函数
    $scope.calculateNetSalary = function() {
        // 构造请求体，和后端的SalaryRequest类字段对应
        var requestData = {
            dailyRate: $scope.dailyRate,
            currencyCode: $scope.currencyCode.toUpperCase() // 转成大写，避免大小写问题
        };

        // 调用后端的POST接口
        $http.post('http://localhost:8080/calculate-net-salary', requestData)
            .then(function(response) {
                // 请求成功：把后端返回的结果赋值给netSalary，页面会自动更新
                $scope.netSalary = response.data;
            })
            .catch(function(error) {
                // 请求失败：给用户提示错误
                alert('计算失败，请检查货币代码是否正确，或稍后重试！');
                console.error('请求错误:', error);
            });
    };
});

第三步：解决可能遇到的坑 #

1. 跨域问题：如果你的前端页面和Spring后端不在同一个端口（比如Spring在8080，前端直接打开HTML是file://协议），浏览器会阻止请求。解决方法是在Spring里加CORS配置：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // 开发环境可以用*，生产环境要指定前端地址
                .allowedMethods("GET", "POST")
                .allowedHeaders("*");
    }
}

2. NBPClient的正确性：确保你的NBPClient能正确获取汇率，不然计算逻辑会出错。可以先写个模拟的实现测试：

@Service
public class NBPClient {
    public double getExchangeRate(String currencyCode) {
        // 模拟返回汇率，比如EUR对PLN是4.5
        switch(currencyCode.toUpperCase()) {
            case "EUR": return 4.5;
            case "USD": return 4.2;
            default: throw new IllegalArgumentException("不支持的货币代码");
        }
    }
}

3. 参数格式问题：确保前端输入的日薪是数字，货币代码是合法的3位代码，后端要做参数校验（比如用@Valid注解）。

这样一步步下来，你的Spring后端和AngularJS前端就能正常联动，实现薪资计算功能啦！

内容的提问来源于stack exchange，提问作者Sebastian Staszalek