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

cnpm install mongoose --save

//在服务端server/modules文件夹下新建goods.js文件
const mongoose=require('mongoose');  
let Schema=mongoose.Schema;      
let productSchema=new Schema({     //通过mongoose的Schema定义模板
 "productId":String,
 "productName":String,
 "salePrice":Number,
 "productImage":String
});
//导出模板goods
module.exports=mongoose.model('goods',productSchema);

goods.find({},(err,doc)=>{callback()});

//服务端server/routes/goods.js文件
//引入相关模块
const express=require('express');
const router=express.Router();
const mongoose=require('mongoose');
const goods=require('../modules/goods')  //引入goods模板
//连接本地mongodb数据库的mall集合
mongoose.connect('mongodb://localhost:27017/mall');
mongoose.connection.on('connected',()=>{
 console.log("mongoDB连接成功");
});
mongoose.connection.on('erroe',()=>{
 console.log("mongoDB连接出错");
});
mongoose.connection.on('disconnected',()=>{
 console.log("mongoDB断开连接");
});

router.get('/',(req,res,next)=>{
 //利用goods模板调用mongooseAPI进行数据库查询
 goods.find({},(err,doc)=>{    //查询的回调函数
  "use strict";
  if (err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   res.json({//利用res将数据返回给get请求
    status:0,
    msg:'',
    result:{
     count:doc.length,
     list:doc
    }
   })
  }
 })
});

module.exports = router;

router.get('/testparams/:param', function (req, res) {
  console.log('参数为： ' + req.params.param);  //控制台输出路径中的参数：myparam
})

var goods=require('./routes/goods');  //包含文件routes/goods.js
app.use('/goods',goods);        //将访问路径定位到文件

 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("从服务器请求数据失败！");
    }
   })
  },

<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>