Spring Boot技术问询：如何在首页输入框绑定Controller的GetMapping返回值，以及创建随机手机号接口并在HTML的value属性中展示结果

嘿，我来帮你一步步搞定这两个Spring相关的问题～

问题1：将Controller的GetMapping返回值作为index页面输入框的value #

这里有两种常用的实现方式，你可以根据项目情况选：

方式1：服务端渲染（以Thymeleaf为例，Spring Boot标配模板引擎） #

如果你的项目用了Thymeleaf这类服务端模板，直接在后端把数据传到页面就行，非常适合页面加载时就需要展示初始值的场景：

1. 修改Controller代码：

@Controller
public class HomeController {
    @GetMapping("/") // 访问首页的接口
    public String index(Model model) {
        // 这里替换成你实际要返回的内容，比如从数据库查询、业务计算的结果
        String inputDefaultValue = "来自Controller的初始值";
        // 把数据放到Model里，前端模板能直接读取
        model.addAttribute("inputValue", inputDefaultValue);
        return "index"; // 返回index.html模板页面
    }
}

2. 修改index.html的输入框：
   用Thymeleaf的表达式绑定value属性，页面渲染时会自动替换成后端传过来的值：

<input type="text" th:value="${inputValue}" />

方式2：前端异步请求（纯静态HTML场景） #

如果你的index是纯静态页面，不想用模板引擎，就用JS异步调用接口拿数据：

1. 写一个返回值的接口：

@RestController
public class DataApiController {
    @GetMapping("/get-input-value")
    public String getInputValue() {
        return "异步请求拿到的输入框初始值";
    }
}

2. 在index.html里加JS代码：
   页面加载完成后自动调用接口，把值赋值给输入框：

<input type="text" id="myInput" />

<script>
// 页面加载完成后执行
window.onload = function() {
    // 调用后端接口
    fetch('/get-input-value')
        .then(response => response.text()) // 解析返回的文本
        .then(data => {
            // 把值设置到输入框的value里
            document.getElementById('myInput').value = data;
        })
        .catch(error => console.error('请求出错啦：', error));
}
</script>

问题2：创建随机手机号接口并展示到HTML元素的value中 #

完全可行！分两步就能搞定：

第一步：编写生成随机手机号的Controller接口 #

@RestController
public class RandomPhoneController {
    @GetMapping("/random-phone")
    public String generateRandomPhone() {
        // 国内手机号常见前缀，你可以按需扩展
        String[] phonePrefixes = {"138", "139", "150", "186", "199", "177"};
        // 随机选一个前缀
        String prefix = phonePrefixes[(int)(Math.random() * phonePrefixes.length)];
        // 生成后8位随机数字
        StringBuilder suffix = new StringBuilder();
        for (int i = 0; i < 8; i++) {
            suffix.append((int)(Math.random() * 10));
        }
        // 返回完整手机号
        return prefix + suffix.toString();
    }
}

第二步：在index.html中调用接口并赋值 #

比如做个按钮，点击后获取手机号放到输入框里，用原生JS实现：

<input type="text" id="phoneInput" placeholder="点击按钮获取随机手机号" />
<button onclick="getRandomPhone()">获取随机手机号</button>

<script>
function getRandomPhone() {
    fetch('/random-phone')
        .then(response => response.text())
        .then(phoneNumber => {
            // 把接口返回的手机号设置到输入框的value属性中
            document.getElementById('phoneInput').value = phoneNumber;
        })
        .catch(error => alert('获取手机号失败：' + error));
}

// 如果想要页面一加载就自动获取，取消下面这行的注释
// window.onload = getRandomPhone;
</script>

点击按钮就能触发请求，随机手机号会自动填充到输入框里啦～

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