为什么Spring Boot项目中JavaScript代码无法调用Java类的自定义方法

你使用的Spring Boot + Thymeleaf 模板的内联表达式/*[[${locations}]]*/在渲染页面时，只会将Java Location 类的成员变量序列化为JSON结构，类中定义的成员方法不会被序列化输出。最终前端拿到的locations是仅包含description、lnglat属性的普通JavaScript对象数组，不存在fun方法，调用时自然会报错。

• 方案1：将fun的逻辑迁移到前端实现
  如果fun方法不需要依赖服务端资源，直接在前端JS中定义对应逻辑即可：

// 封装原Java fun方法的对应逻辑
function handleLocationFun(locationObj) {
  // 这里写原fun方法的具体实现代码
  console.log("当前位置信息：", locationObj.description, locationObj.lnglat)
}

const locations = /*[[${locations}]]*/ null;
locations.forEach(location => {
    location.description = 44;
    location.lnglat = 127;
    // 传入当前对象调用公共方法
    handleLocationFun(location);
});

• 方案2：服务端新增接口供前端调用
  如果fun方法的逻辑必须在服务端运行，单独新增HTTP接口，前端通过异步请求调用：
  Java侧新增接口：

@PostMapping("/location/execFun")
public Location execLocationFun(@RequestBody Location location) {
    // 执行原有fun方法逻辑
    location.fun();
    return location;
}

前端调整代码（示例用axios，可替换为你项目用的请求工具）：

const locations = /*[[${locations}]]*/ null;
locations.forEach(async location => {
    location.description = 44;
    location.lnglat = 127;
    // 调用服务端接口执行fun逻辑
    const res = await axios.post('/location/execFun', location);
});

• 方案3：给前端对象手动挂载方法
  如果不想修改原有location.fun()的调用写法，可在拿到序列化后的对象后手动为每个对象挂载方法：

const locations = /*[[${locations}]]*/ null;
locations.forEach(location => {
    // 手动挂载fun方法
    location.fun = function() {
        // 实现对应逻辑
        console.log(this.description, this.lnglat)
    }
    location.description = 44;
    location.lnglat = 127;
    location.fun(); // 可正常执行
});

内容的提问来源于stack exchange，提问作者Wojciech Szlosek