Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析

}else{
console.log("从服务器请求数据失败！");
}
})
},

通过axios的get请求/goods，由于上面做了跨域代理，可以向Node服务端发送请求，在回调函数中，response的data是响应返回的实际内容，我们在服务端定义了返回状态status，为0代表正常，并且将数据放在了result.list中，在页面中对list数组进行遍历即可将数据渲染到页面：

注意在遍历每个数据对象时，其键名要与在mongoDB中的定义一致，如item.salePrice可以访问到条目的价格

<li v-for="(item,index) in goodsList">
  <div class="pic">
    <a href="#" rel="external nofollow" ><img v-lazy="`static/${item.productImage}`" alt=""></a>
  </div>
  <div class="main">
    <div class="name">{{item.productName}}</div>
    <div class="price">{{item.salePrice}}</div>
    <div class="btn-area">
      <a href="javascript:;" rel="external nofollow" class="btn btn--m">加入购物车</a>
    </div>
  </div>
</li>

启动mongoDB、Node服务端、运行vue-cli框架后即可在localhost:8080内看到结果如图：

希望本文所述对大家node.js程序设计有所帮助。