使用vuejs从mongodb数据库读取数据 [英] Read data from a mongodb database using vuejs
问题描述
我正在创建一个Web应用程序以实时可视化我房间的温度.目前，我使用树莓派读取值，然后加载数据库mongodb.现在要在浏览器上实时显示它，我该怎么做?我正在将node.js和vue.js与express一起使用.如何将值实时传递给vue.js?
I'm creating a web application to visualize in real time the temperature of my room. Currently I read the value with raspberry and then load the database mongodb. Now to display it in real time on my browser how do I do it? I'm using node.js and vue.js together with express. How do I pass the value to vue.js in real time?
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>
推荐答案
您在后端的代码应如下所示:
Your code in backend should be like this :
//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:
in the front you have access to that api :
localhost:8080/api/temperature
localhost:8080/api/temperature
并使用 axios ，您可以致电后端并恢复温度实时
And using axios you could make call to your backend and get back the temperature in real time
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从mongodb数据库读取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
