array map data populate 처리

client/nuxt.config.js

@@ -1,3 +1,4 @@
+const URL = 'http://localhost:3000'
 
 export default {
   mode: 'universal',
@@ -52,6 +53,8 @@ export default {
   ** See https://axios.nuxtjs.org/options
   */
   axios: {
+    proxy:  true,
+    baseURL: URL
   },
   /*
   ** Build configuration

client/pages/index.vue

@@ -11,7 +11,7 @@
 
           <div class="mainResuts">
             <div class="s-result-list">
-              <div class="s-result-item celwidget">
+              <div v-for="product in products" :key="product._id" class="s-result-item celwidget">
                 <div class="s-item-container">
                   <div class="a-spacing-micro">
                     <div class="bestSeller">
@@ -24,7 +24,7 @@
                       <!--image-->
                       <div class="col-sm-3 text-center">
                         <a href="">
-                          <img src="/img/amazonImg.jpg" alt="" class="img-fluid" style="width: 200px">
+                          <img :src="product.photo" alt="" class="img-fluid" style="width: 150px">
                         </a>
                       </div>
 
@@ -33,7 +33,7 @@
                           <!-- Title and date -->
                           <a href="" class="a-link-normal">
                             <h2 class="a-size-medium">
-                              Herryu Ppoert
+                              {{ product.title }}
                               <span class="a-letter-space"></span>
                               <span class="a-letter-space"></span>
                               <span class="a-size-small a-color-secondary">Sep 3, 2019</span>
@@ -45,7 +45,7 @@
                         <div class="a-row a-spacing-small">
                           <span class="a-size-small a-color-secondary">by</span>
                           <span class="a-size-small a-color-secondary">
-                            <a href="#" class="a-link-normal a-text-normal">waiter isancon</a>
+                            <a href="#" class="a-link-normal a-text-normal">{{ product.owner.name }}</a>
                           </span>
                         </div>
 
@@ -63,11 +63,11 @@
                             <!-- price-->
                             <div class="a-row a-spacing-none">
                               <a href="" class="a-link-normal a-text-normal">
-                                <span class="a-offscreen"></span>
+                                <span class="a-offscreen">{{ product.price }}</span>
                                 <span class="a-color-base sx-zero-spacing">
                                   <span class="sx-price sx-price-large">
                                     <sup class="sx-price-currency">$</sup>
-                                    <span class="sx-price-wholsup">99</span>
+                                    <span class="sx-price-wholsup">{{ product.price }}</span>
                                     <sup class="sx-price-fractional">00</sup>
                                   </span>
                                 </span>
@@ -118,6 +118,18 @@ import FeatureProduct from '~/components/FeatureProduct'
 export default {
   components: {
     FeatureProduct
+  },
+
+  async asyncData ({ $axios }) {
+    try {
+      let response = await $axios.$get('/api/products')
+      console.log(response)
+      return {
+        products: response.products
+      }
+    } catch (err) {
+      console.log(err)
+    }
   }
 }
 </script>

server/routes/products.js

@@ -29,7 +29,7 @@ router.post('/products', upload.single('photo'), async (req, res)=> {
 
 router.get('/products', async (req, res) => {
   try {
-    let products = await Product.find()
+    let products = await Product.find().populate('owner category').exec()
     res.json({
       success: true,
       products