Как передать результаты запроса db в Vue?

Question

У меня есть запрос API, который вызывает SQL-запрос внутри функции. Я пытаюсь передать результаты на страницу .vue. (С помощью экспресс-Vue) Вот запрос апи

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> 

Im пытается передать данные этого компонента results.vue

<template> 

<p>Display data</p> 

</template> 

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

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

Как передать данные «строк» ​​на страницу results.vue?

вот как данные поступают из БД

[ 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

Я не знаю, о экспресс-вю, однако я не думаю, что делать вызовы API из определения маршрута является хорошей идеей.

скорее передать lat и lng параметры на ваш results компонент, и сделать вызов API там, используя метод, или created() крюк, например. Это может сделать это немного проще изменить реализацию API в будущем:

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

EDIT

Если вам действительно нужно запрашивать данные из маршрута, и предполагая, что rows массив из яваскрипта объектов, вы можете сделать свой компонент в функции обратного вызова запроса:

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().