如何将结果从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()。