如何使用 feather js 更新 html 文档？

Question

我有一个服务，我每 5 秒调用一次来自 postgres table 的 return 数据，现在我希望这些数据显示在 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 标签中在这方面帮助我。

Answer 1

这是一个工作示例，说明当您从远程调用取回数据时如何更改 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>

Answer 2

您需要在浏览器中调用羽毛服务。您可以通过多种不同的方式执行此操作（如 REST 调用、使用 feathers 客户端等）。

 <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 for REST 设置最小 feathersjs/client，无需身份验证，并调用您的服务（在端口 3000 上）并获取有效负载。

每 5 秒执行一次此操作超出了羽毛的范围，取决于您构建 Web 应用程序的方式。

如何使用 feather js 更新 html 文档？

How to update html document using feather js?

javascript

node.js

feathersjs