Vue+Node+Mongodb开发小结

2017-11-05 本文已影响138人年少有van

最近用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

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