mounted:function (){ this.getGoodsList(); }, methods:{ getGoodsList(){ axios.get("/goods").then(response =>{ let res=response.data; if(res.status==0){ this.goodsList=res.result.list; }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> <a href="#" ><img v-lazy="`static/${item.productImage}`" alt=""></a> </div> <div> <div>{{item.productName}}</div> <div>{{item.salePrice}}</div> <div> <a href="javascript:;">加入购物车</a> </div> </div> </li>
启动mongoDB、Node服务端、运行vue-cli框架后即可在localhost:8080内看到结果如图：
