如何使用feather js更新html文档？
如何使用feather js更新html文档？
提问于 2019-07-22 01:07:38
我有一个服务，我调用后，每5秒返回数据从postgres表，现在我希望这些数据显示在html文档
app.js
const stats=app.service('test_view');
// console.log(stats);
function getstats(){
stats.find().then(response=>{
console.log('data is ',response.data)});};
setInterval(function() {
getstats();
}, 5000);
// console.log(stats);stats.html
<!DOCTYPE html>
<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>一切都运行得很好，我在控制台中得到了结果，我现在正在使用feather.js，我希望这些结果显示在html.Please的div标签中，在这方面对我有帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-25 03:29:10
您需要从浏览器调用羽化服务。您可以通过许多不同的方法(作为REST调用、使用羽毛客户端等)来执行此操作。
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="//unpkg.com/@feathersjs/client@4.0.0-pre.3/dist/feathers.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script>
// @feathersjs/client is exposed as the `feathers` global.
const app = feathers();
app.configure(feathers.rest('http://localhost:3000').axios(axios));
app.service('test_view').find();
})
.then(data => {
// do something with data
});
</script>
</head>
<body></body>
</html>这在很大程度上取决于您的前端实现使用的是什么(如果有的话)。这将使用axios为REST设置一个最小的feathersjs/client，无需身份验证，并调用您的服务(在端口3000上)并获取有效负载。
每隔5秒做一次，这超出了羽毛的范围，也决定了你如何构建你的web应用。
Stack Overflow用户
发布于 2019-07-22 01:20:40
下面是一个有效的示例，演示如何在从远程调用中获取数据时更改该div的内容。
// Simulate your remote call... ignore this part.
const stats = {}
stats.find = () => new Promise((resolve, reject) => resolve({
data: 'here is some data ' + new Date().toLocaleTimeString('en-US')
}));
// Div you want to change.
const resultsDiv = document.getElementById('stats');
// Get the data
function getstats () {
stats.find().then(response => {
console.log('data is ', response.data);
// Update the contents of the div with your data.
resultsDiv.innerHTML = response.data;
});
}
setInterval(function() {
getstats();
}, 1000);<html>
<head>
<title>Stats</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id='stats'>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57135316
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号