最近用Vue+Node+Mongodb写了一个日程管理备忘的一个WebAPP,写这篇文章的目的是为了记录一下开发过程中遇到的一些问题,留作以后参考。
内容提要:
- 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
这样子数据的迁移就完成啦。