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 easyui window 窗口关闭时的提示
Jun 22 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
Javascript Objects详解
Sep 04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
微信小程序8种数据通信的方式小结
Feb 03 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
ftp类(example.php)
2006/10/09 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
EsLint入门学习教程
2017/02/17 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python实现数据分析与建模
2019/07/11 Python
Python request操作步骤及代码实例
2020/04/13 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
保荐人的岗位职责
2013/11/19 职场文书
学校节能减排倡议书
2014/05/16 职场文书
质量月活动总结
2014/08/26 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
质检员岗位职责
2015/02/03 职场文书
神农溪导游词
2015/02/11 职场文书
财务人员个人工作总结
2015/02/27 职场文书
水电施工员岗位职责
2015/04/11 职场文书
中标通知书范本
2015/04/17 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
解决redis批量删除key值的问题
2022/03/23 Redis