欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 12:41:05
本文实例讲述了vue+node服务器查询mongo数据库及页面数据传递操作。分享给大家供大家参考,具体如下: 1、利用mongoose查询mongodb 通过mongoose依赖可...

本文实例讲述了vue+node服务器查询mongo数据库及页面数据传递操作。分享给大家供大家参考,具体如下:

1、利用mongoose查询mongodb

通过mongoose依赖可以简捷地操作mondodb数据库,首先安装mongoose:

cnpm install mongoose --save

使用mongoose需要一个模式schema,它用于定义你从mongodb中查询的每个文档条目的内容,然后通过mongoose.model()生成一个模板model,模板像一个架子,将数据库取到的每个条目中的内容按架子的结构填充,这样就形成了一个便于操作、结构条理的数据对象。通过这个对象就可以访问模板的相关属性,甚至为其定义函数方法。

例如mongodb中的数据库mall中的商品条目如图:

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

(php storm中有简单的mongo可视化插件。通过搜索mongo plugin安装该插件,之后在phpstorm主菜单的view/tool windows中找到mongo explore开启mongo侧边栏工具,并连接到mongo数据库后就能可视化查看其中数据)

针对其定义schema,生成并导出商品模板goods:

//在服务端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);

注意:schema中字段的名称要与数据库中一致,否则会因为字段不匹配而造成无法操作数据库。例如我在数据库中是productimage,而schema中是productimg,导致插入时丢失字段。

然后通过goods模板执行数据库查询操作,如果有错返回err,否则返回查询结果doc:

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

2、node服务端查询数据库并返回结果

①、通过express框架进行数据库连接:

//服务端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断开连接");
});

②、对来自前端的get请求进行响应:查询数据库mall集合并将结果放在result.list中,再加上status、msg,以json形式返回res。

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
    }
   })
  }
 })
});

最后记得暴露路由router

module.exports = router;

注:接收请求中的参数一般有三种方式,

  • req.query多用于get请求发送来的数据,参数以?加在请求路径的尾部,用req.query.keyname可以获取到其中的数据。
  • req.body用于接收post请求,post请求将数据放在request正文中,因此req.body.keyname可以得到其请求数据。
  • req.params的参数包含在路径当中,例如请求路径为http://localhost:3000/test/myparam,在服务端读取其中的参数;
router.get('/testparams/:param', function (req, res) {
  console.log('参数为: ' + req.params.param);  //控制台输出路径中的参数:myparam
})

3、跨域请求数据

由于本地vue运行在localhost:8080,而node在localhost:3000,若要在vue中利用axios实现数据请求,则需要执行跨域代理操作。在vue中的config/index.js文件的dev中配置一个转发代理,当请求"/goods"时,转发到localhost:3000下的/goods:

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

node服务器对get请求的解析过程:当请求到达localhost:3000端时,node服务器的app.js文件对请求路径进行解析,通过app.use()将/goods定位到routes/goods.js文件,在该文件中查询数据库的操作并返回结果:

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

4、vue进行数据请求并渲染到页面

在views/goodslist.vue文件中利用axios对数据进行请求,定义getgoodslist()方法并在挂载后调用:

 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 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内看到结果如图:

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

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