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

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

1、利用Mongoose查询MongoDB

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

cnpm install mongoose --save

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

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

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

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

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

(0)

相关推荐

  • node.js连接mongoDB数据库 快速搭建自己的web服务

    一.写在前面 人人都想成为全栈码农,作为一个web前端开发人员,通往全栈的简洁之路,貌似就是node.js了.前段时间学习了node.js,来谈谈新手如何快速的搭建自己的web服务,开启全栈之路. 二.安装node.js 接触过后端开发的人都知道,首先要安装服务.作为新手,肯定是选择最简单的可视化安装了(傻瓜式下一步,其它的方式等熟悉相关操作后自然就会了的),通过官网http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi 下载电脑适配的安装包(这个是windo

  • node.js操作mongoDB数据库示例分享

    连接数据库 复制代码 代码如下: var mongo=require("mongodb");  var host="localhost";  var port=mongo.Connection.DEFAULT_PORT;  var server=new mongo.Server(host,port,{auto_reconnect:true});//创建数据库所在的服务器服务器  var db=new mongo.Db("node-mongo-example

  • 利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)

    前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

  • Node.js中使用mongoskin操作mongoDB实例

    一.废话 从13年1月份接触mongodb进行开发,开发了旅游标签服务.微博标签检索系统.地图服务.web APP服务...使用MongoDB的场景从.NET.JAVA环境转到了node.js平台.越发觉Node.js和mongodb结合感觉的很好.感觉mongodb和node.js是天生的一对.的确,mongodb的客户端是JS的解析引擎.因此,选择mongodb和node.js做产品原型也是很nice的选择.网上,遇到网友询问mongodb的开发,选择哪个driver最好,以前一直是使用原生

  • nodejs+mongodb+vue前后台配置ueditor的示例代码

    笔者在做一个个人博客项目的时候需要一个富文本框输入组件与后台进行交互,但是官方配置里面没有关于nodejs的,于是自己查阅资料研究了一下,最后终于应用到了系统中. 一.后台配置 首先是找到了这个项目:https://github.com/netpi/ueditor,可以通过他开源的代码将ueditor应用的node上面,大概方法如下: 1.先安装依赖: npm install ueditor --save 2. 配置Node设置 //引入接口文件 const api = require('./a

  • AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

    一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n

  • nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word.excel.ppt的example,需要详细的可以看里面) https://www.jb51.net/article/144769.htm https://github.com/Ziv-Barber... 问题 node.js上面这两

  • Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页 商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架

  • nodejs连接mongodb数据库实现增删改查

    准备 1.通过npm命令安装mongodb 2.安装mongodb数据库,这里不详细介绍了,安装网址:http://www.jb51.net/article/82522.htm CRUD操作 在此之前应对MongoDB数据库有所了解,知道它的一些增删查改命令. 1.增加 var MongoClient = require("mongodb").MongoClient; var DB_URL = "mongodb://localhost:27017/chm"; fun

  • node和vue实现商城用户地址模块

    本文为大家分享了node和vue商城用户地址模块的实现,供大家参考,具体内容如下 server/models/user.js var mongoose = require('mongoose') var userSchema = mongoose.Schema({ "userId":String, // 用户Id "userName":String, // 用户名 "userPwd":String, // 用户密码 "orderList

  • Node.js对MongoDB数据库实现模糊查询的方法

    前言 模糊查询是数据库的基本操作之一,实现对给定的字符串是否与指定的模式进行匹配.如果字符完全匹配,可以用=等号表示,如果部分匹配可认为是一种模糊查询.在关系型数据中,通过SQL使用like '%fens%'的语法.那么在mongodb中我们应该如何实现模糊查询的效果呢. 目录 mongodb模糊查询 nodejs通过mongoose的模糊查询 1. mongodb模糊查询 我们打开mongodb,以name文字字段进行测试. 精确查询 当{'name':'未来警察'}时,精确匹配到一条记录.

随机推荐