如何将字符串从后端(java)传递到前端(typescript)并使其出现在UI上

Question

简单地说，我正试图将一个字符串从java后端传递到typescript前端，以便在UI中显示相同的字符串。整齐地放在紫色条下面，就像这样：图像

我认为在后端，我必须返回一个字符串，通过控制器发送它，并让前端从那里接收字符串，但到目前为止，我在这方面的成功有限。

与其调试我的代码，我想知道这里是否有人能给我指一个简单的教程或项目，它正是我想要做的：从后端获取一个字符串，返回它，让前端接收它，然后在UI上显示相同的字符串。这样我就可以镜像实现。我试过在谷歌上搜索这样的简单例子，但到目前为止我还是一无所获。

Answer 1

因为您只想了解如何实现需求的方向/建议。您需要考虑的几件事：

• 您必须做出决定，要求使用任何与前端相关的框架/库，还是希望使用纯JavaScript
• 要从Java后端获取数据，您必须从页面进行AJAX调用，并简单地将其绑定到UIDOM中

在纯JS中，您可以在元素ID的帮助下绑定字符串。

const str = 'This string is coming from API';
document.getElementById('resultDiv').innerHTML = str;

<div id="resultDiv"></div>

如果要使用任何library/framework，那么有一种方法one-way/two-way数据绑定。我只是为了演示的目的展示了一个基于Vue.js的示例。

new Vue({
el: '#app',
data: {
message: null
},
mounted() {
const str = 'This string is coming from API';
this.message = str;
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>