Vue+Node+Mongodb开发小结

作者: 年少有van | 来源:发表于2017-11-05 16:21 被阅读138次

最近用Vue+Node+Mongodb写了一个日程管理备忘的一个WebAPP,写这篇文章的目的是为了记录一下开发过程中遇到的一些问题,留作以后参考。

项目地址:DogeLee/-project-aTodo

内容提要:

  • Vue中非父子组件的通信
  • 原生Node路由的实现
  • Mongoose的查询结果处理
  • Mongodb在windows和linux下的迁移

Vue中非父子组件的通信

因为这是第一次使用Vue开发前端,所以对Vue中组件的通信很不熟悉,加之官方教程中对非父子组件间的通信描述很模糊,感觉Vue中非父子组件的通信是这次遇到的最大的问题。

后来的解决方案是,在根Vue实例下创建一个名为Bus的Vue实例,用作事件总线,非父子组件间的通信靠Bus发射和监听事件,再调用组件自身的方法。

举个例子:

根Vue实例下的data中创建一个名为Bus的Vue实例

 var container = new Vue({         //根vue
    el: '#container',
    data: {
        Bus: new Vue()
    },
    components: {
        component1: component1,
        component2: component2
    }
});  

两个子组件分别靠Bus发射和监听事件

var component1 = {
    methods:{
        emitEvent:function(){
            this.$root.Bus.$emit('eventTest', newdate);           //发射eventTest事件
        }
    }
};

var component2 = {
    methods:{
        handleEvent:function(){
            //处理eventTest事件的逻辑
        }
    },
    created(){          //在组件的created周期中添加监听
        var component2 = this;
        this.$root.Bus.$on('eventTest',handleEvent);            //监听eventTest事件,转入handleEvent处理
    }
};  

原生Node路由的实现

暑假在公司实习的时候,用Node的Express开发后端,用Express的路由中间件就可以轻松实现路由。但是在过后去面试其他公司被问到原生Node的时候,就一脸懵逼,所以这次的后端坚持用原生Node来写。

不过最后发现原生Node实现很多东西确实很麻烦,比如session的管理。这个在这篇文章里不谈,这里只说我解决原生Node路由的方法。

第一步 用正则表达式判断是否为POST请求

var postReg = /\/post\/\.*/;

http.createServer(function(req,res,err){
    if(postReg.test(req.url)){              //转入post请求处理
       cbFunPost(req,res,err);
    }
}).listen(3000);

第二步 接收请求,转入处理请求

function cbFunPost(req,res,err){        
    var path = url.parse(req.url).pathname;        //提取出请求路径

    req.setEncoding('utf-8');                      //设置编码
    var postData = "";
    var params;

    req.on("data", function (postDataChunk) {      //接收请求
        postData += postDataChunk;
    });
    req.on("end",function(){                       //接收结束
        params = querystring.parse(postData);      //获取请求参数
        server_router(path,params);                //转入处理请求函数,获取结果
    })
}    

第三步 根据path转入处理函数

function server_router(path,params){
    switch(path){
        case '/post/fun1':{
            router_fun1(params);
            break;
        }
        case '/post/fun2':{
            router_fun2(params);
            break;
        }
        ......
    }
}

Mongoose的查询结果处理

Mongodb的查询结果其实是个小坑,不过让我弄了很久才解决。

我用了Node的Mongoose这个模块来连接数据库,但是Mongoose不同的方法返回的res的格式是不一样的。

  • find()方法的返回结果始终是一个数组,即使查询结果只有一条。
  • save()、update()方法的结果则是一个对象。

比如:

testModel.find(function(err,res){
    console.log(res[0]);      //find()方法的返回结果始终是一个数组
});

testModel.update(function(err,res){
    console.log(res);          //update()方法的返回结果是一个对象
});

Mongodb在windows和linux下的迁移

因为开发是在windows环境下开发,部署是在ubuntu服务器下,所以涉及到mongodb在两个系统下的迁移。

windows下的导出

C:\Program Files\MongoDB\Server\3.4\bin 是我windows下mongodb安装目录,同时在此目录下有mongoexport和mongoimport两个执行文件,这两个文件就是用以导入导出文件的。

导出时需要用管理员身份运行cmd,然后输入以下指令:

mongoexport --host 127.0.0.1 --port 27017 --db dbName --collection colName --out colName.json

然后就会在mongodb安装目录下生成colName.json的导出文件啦。

linux下的导入

ubuntu下我使用apt get命令安装的mongodb,执行文件的目录在/usr/bin下,同样的在该目录下也有执行文件mongoexport和mongoimport。

先将从windows导出的json文件放到该文件夹下,再执行导入命令:

./mongoimport --db dbName --collection colName colName.json

这样子数据的迁移就完成啦。

相关文章

  • Vue+Node+MongoDB从开发到正式部署

    Vue+Node+MongoDB从开发到正式部署

  • Vue+Node+Mongodb开发小结

    最近用Vue+Node+Mongodb写了一个日程管理备忘的一个WebAPP,写这篇文章的目的是为了记录一下开发过...

  • 0.1 Swift开发体验

    0.1.1 Playground开发体验 0.1.2 项目开发体验 }} 小结: 在 Swift 中没有了 mai...

  • 开发小结

    1、classpath:类路径,src目录下的文件最终要编译到类路径下1、studio中输入时:光标在引号内的,想...

  • iOS推送小结(证书的生成、客户端的开发、服务端的开发)

    看这里:iOS推送小结(证书的生成、客户端的开发、服务端的开发)

  • NIO服务

    本文开发语言基于Java 代码参考SocketServer 目录 OIOSyncAsync NIO 小结 OIO ...

  • 01-开启Flutter之旅

    1、Flutter的特点与核心概念 2、搭建开发环境 3、小结

  • PHP开发小结

    参考一些博主的经验和自己的开发经验进行总结-持续更新ing。 功能设计 功能尽量模块化; 类的设计尽量单一,函数功...

  • qqplay开发小结

    1.修改Global.js文件 2.修改Common.js文件 修改Networker.js文件 4.修改Shar...

  • php开发小结

    近来学校的实训课程结束了,很多同班同学赶上了校园招聘的晚班车,所以呢大家近来讨论的话题慢慢的也从游戏转移到了实习,...

网友评论

    本文标题:Vue+Node+Mongodb开发小结

    本文链接:https://www.haomeiwen.com/subject/nfncmxtx.html