如何將結果從db查詢傳遞給Vue？

Question

我有一個調用函數內的SQL查詢的API請求。我試圖將結果傳遞給.vue頁面。 （使用快速-VUE）這裏是API請求

router.get('/search', (req, res, next) => { 

    var keyword = ("%" + req.query.keyword + "%") 
    var lat = req.query.lat 
    var lng = req.query.lng 

    console.log(keyword, lat, lng) 

    connection.query('SELECT *, (3959 * acos (cos (radians(?))* cos(radians(lat))* cos(radians(lng) - radians(?))+ sin (radians(?))* sin(radians(lat)))) AS distance FROM job_posting where job_title like ? HAVING distance < 25', [ 
     lat, lng, lat, keyword 
    ], function(err, rows) { 

    }) 
    res.render('main', { 
    // data: { 
    //   results 
    //   }, 
    vue: { 
     meta: { 
      title: 'Page Title', 
     }, 
     components: ['myheader', 'myfooter', 'searchform', , 'results'] 
    } 

}); 
}) 

和Main.vue頁

<template> 
<div id="wrap"> 
    <div class="col-md-1"></div> 
    <div id="main-container" class="container col-md-10"> 

     <myheader></myheader> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"> 
     <searchform></searchform> 
     <results></results> 


     </div> 
     <div class="col-md-4 text-center"> 

     </div> 
     <div class="col-md-1"></div> 


    </div> 
</div> 
</template> 

進出口試圖將數據傳遞到該組件results.vue

<template> 

<p>Display data</p> 

</template> 

<script> 
export default { 
    data: function() { 
     return { 
      // dogs: 3 
     } 
    } 
} 
</script> 

<style lang="css"> 
</style> 

如何將「行」數據傳遞到results.vue頁面？

這裏是如何將數據從DB

[ RowDataPacket { 
    id: 1, 
    job_title: 'Software Engineer', 
    job_desc: '<p>Ayo</p>', 
    location: 'Akron, OH', 
    job_type: 'Full-Time', 
    salary: '', 
    date_created: 2016-11-23T05:00:00.000Z, 
    short_desc: 'yyoyo@gmail.com', 
    apply_url: 'Ayo', 
    lat: '41.084821', 
    lng: '-81.515607', 
    distance: 0 }, 
    RowDataPacket { 
    id: 2, 
    job_title: 'Software Engineer', 
    job_desc: '<p>Ayo</p>', 
    location: 'Akron, OH', 
    job_type: 'Full-Time', 
    salary: '', 
    date_created: 2016-11-23T05:00:00.000Z, 
    short_desc: 'yyoyo@gmail.com', 
    apply_url: 'Ayo', 
    lat: '41.084821', 
    lng: '-81.515607', 
    distance: 0 }, 
    RowDataPacket { 
    id: 3, 
    job_title: 'Software Engineer', 
    job_desc: '<p>Ayo</p>', 
    location: 'Akron, OH', 
    job_type: 'Full-Time', 
    salary: '', 
    date_created: 2016-11-23T05:00:00.000Z, 
    short_desc: 'yyoyo@gmail.com', 
    apply_url: 'Ayo', 
    lat: '41.084821', 
    lng: '-81.515607', 
    distance: 0 } ] 

Answer 1

我不知道快遞-VUE到來，但我不認爲從路由定義進行API調用是一個好主意。

而是通過您的results部件通過lat和lng參數，並作出API調用在那裏，使用方法或created()鉤例如。這可以使它更容易一點改變API在未來實現：

res.render('main', { 
    data: { 
    lat, 
    lng, 
    }, 
    vue: { 
    meta: { 
    title: 'Page Title', 
    }, 
    components: ['myheader', 'myfooter', 'searchform', , ' 
} 

編輯

如果你真的需要從路由查詢數據，並假設rows是一個數組JavaScript對象，你可以查詢的回調中呈現您的組件：

connection.query('SELECT *, (3959 * acos (cos (radians(?))* cos(radians(lat))* cos(radians(lng) - radians(?))+ sin (radians(?))* sin(radians(lat)))) AS distance FROM job_posting where job_title like ? HAVING distance < 25', [ 
    lat, lng, lat, keyword 
], function(err, rows) { 
    res.render('main', { 
    data: { 
     results: rows 
    }, 
    vue: { 
     meta: { 
     title: 'Page Title', 
    }, 
    components: ['myheader', 'myfooter', 'searchform', 'results'] 
    } 
    next(); // You probably need to call this 
}) 

不要忘記調用next()。