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


Posted in Javascript onDecember 20, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
node使用request请求的方法
Dec 20 #Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 #Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
js正则匹配多个全部数据问题
Dec 20 #Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 #Javascript
Vuex实现数据共享的方法
Dec 20 #Javascript
React 实现车牌键盘的示例代码
Dec 20 #Javascript
You might like
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
详解jQuery中的事件
2016/12/14 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
详解React 在服务端渲染的实现
2017/11/16 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python实现二维插值的三维显示
2018/12/17 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python logging添加filter教程
2019/12/24 Python
python时间日期操作方法实例小结
2020/02/06 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
安全技术说明书
2014/05/09 职场文书
运动会口号大全
2014/06/07 职场文书
生产车间标语
2014/06/11 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
SQL注入详解及防范方法
2021/12/06 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android