我正在创建一个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 = Vueponent('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 = Vueponent('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('script.googleusercontent/a/macros/esi.dz/echo?user_content_key=ypoXRw1nVHj-h1VRDmh6TXSI1VpIPWW7Qo2n9El6RqoxAJ3v28nBI9bDY_4UAE0TQJ3pSozxpbTiRvFpmD8pvcTkGSnPAtgRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_nRPgeZU6HP_B2BW4qWwVPUuHIcJ3mEdrfLIfNZsYUQi0c--vxV_3BX606CngcowlqSfFH8SSiqMPrUuXDMsd72r-P39_jlVDMh0BMLnMwXU02UuEHWiuob4ULL2SJgrtyBAf43AAwP8&lib=MwxUjRcLr2qLlnVOLh12wSNkqcO1Ikdrk'); setInterval(() => { this.fetchTemp('script.googleusercontent/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="unpkg/vue@2.5.17/dist/vue.js"></script> <script src="unpkg/axios/dist/axios.min.js"></script> <script src="unpkg/vue-axios@2.1.4/dist/vue-axios.min.js"></script> </head> <body> <div id="app"> <h1> Now : {{now}} </h1> </div> </body> </html>
更多推荐
使用Vue.js和Node.js从MongoDB数据库读取数据
发布评论