使用 vuejs 和 nodejs 从 mongodb 数据库中读取数据

Posted 2023-02-23

技术标签:

【中文标题】使用 vuejs 和 nodejs 从 mongodb 数据库中读取数据【英文标题】：Read data from a mongodb database using vuejs and nodejs 【发布时间】：2019-04-14 10:04:26 【问题描述】：

我正在创建一个 Web 应用程序来实时显示我房间的温度。目前我用 raspberry 读取值，然后加载数据库 Mongodb。现在要在我的浏览器上实时显示它，我该怎么做？我将 Node.js 和 vue.js 与 express 一起使用。如何将值实时传递给 Vue.js？

var App = Vue.component('App',
    template: "<h1> title </h1>",
    data() 
    
        let test= "hello";
        return title: test;
    
);

new Vue(
    el:"#app"
);

<div id="app">
   <App></App>
</div>

【问题讨论】：

【参考方案1】：

你在后台的代码应该是这样的：

//get the value from db
//create a variable tmp that will receives temperature from db
let tmp;


var router = express.Router();
router.get('/temperature', function(req, res) 
  res.json(
    temperature: tmp
  );
);


app.use('/api', router);

在前面，您可以访问该 api：

localhost:8080/api/温度

使用axios，您可以调用后端并实时获取温度

var App = Vue.component('App', 
  template: "<h1> temperature </h1>",
  data() 


    return 
      temperature: 0
    ;
  ,
  created: function() 

    this.fetchTemp('api/temperature');

    setInterval(()=> 
      this.fetchItems('api/temperature');
    , 500);
  ,

  methods: 

    fetchTemp(uri) 

      axios.get(uri).then((res) => 
        this.temperature = res.data.temperature;
      );
    ,
  
);

I tried to simulate your use case by getting the current time from REST API and show it every second

new Vue(
  el: '#app',
  data() 
    return 
      now: 0
    ;
  ,
  created: function() 

    this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    setInterval(() => 
      this.fetchTemp('https://script.googleusercontent.com/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk');

    , 1000);
  ,

  methods: 

    fetchTemp(uri) 

      axios.get(uri).then((res) => 
        this.now = new Date(res.data.fulldate).toLocaleString();


      ).catch(err => );
    
  
)

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h1> Now : now </h1>
  </div>
</body>

</html>

【讨论】：

以上是关于使用 vuejs 和 nodejs 从 mongodb 数据库中读取数据的主要内容，如果未能解决你的问题，请参考以下文章

如果请求来自 VueJS，NodeJs Passport 执行 CORS 飞行前

axios GET 请求不返回任何数据（VueJS 和 NodeJS）

如何从 mongo db 获取详细信息并在 nodejs Fork 方法中发送或存储在对象中

vuejs从安装开始一起飞~

nodejs , mongo find 没有返回数据