vue+node+mongodb实现的功能

用vue+node +mongodb实现前后台交互的页面代码，已经上传到github上，

地址是：

https://github.com/GainLoss/vue-node-mongodb

https://github.com/GainLoss/vue-manger

实现一个基本交互功能：http://www.cnblogs.com/GainLoss/p/6927626.html

踩过的坑：http://www.cnblogs.com/GainLoss/p/6929299.html

 

这次说的是在写这个页面的时候实现的功能：

一：增删改查

增加：使用的是save，因为使用的是post,所以是req.body.参数。如果是get方法的话，就是req.query.参数，res.send(你需要传给前台的数据)

router.post('/api/list/addlist', (req, res) => { let newAccount = new models.home({ title: req.body.title, time: new Date(), sort: req.body.sort, user: req.body.user, con: req.body.con, file:req.body.file, }); newAccount.save((err, data) => { if (err) { res.send(err) } else { res.send('成功添加列表') } }) });

 删除：一般删除的都是一个数据，并且这个数据自己有一个id参数，是唯一的，所以我们一般依据id利用remove进行删除

router.post('/api/seek/remove', (req, res) => { models.seek.remove({ _id: { $in: req.body.id } }, (err, data) => { if (err) { res.send(err) } else { res.send(data) } }); })

修改（更新）：更新用的是update，我们先根据id找到特定的数据，然后更新需要更新的参数

router.post('/api/data/detail/watch',(req,res)=>{ let id=req.body.id; let cate=req.body.cate; let watch=req.body.watch; console.log(watch) //添加查看的次数
    models[cate].find({"_id":ObjectID(id)}).update({watch:watch},function(err,data){ if(err){ res.send(err) }else{ res.send(data) } }) })

查：这个就比较简单了 想全部查询的话，我就只在对应的模型上进行find,当然需要具体情况具体分析

router.post('/api/data/detail',(req,res)=>{ let id=req.body.id; let cate=req.body.cate; //获取电影的详情
    models[cate].find({"_id":ObjectID(id)},function(err,data){ if(err){ res.send(err) }else{ res.send(data) } }) })

综合：对数据进行排序查找 并且有分页效果 limit：限制个数； skip:从第几个开始找；sort:-1逆序 1正序 并且有搜索的功能

//获取每个模块的列表信息
router.post('/api/model/query',(req,res)=>{ let offset=parseInt(req.body.offset); let limit=parseInt(req.body.limit); let name=req.body.name; let model=req.body.model; let sort=req.body.sort; let obj={}; obj[sort]=-1; if(name==''||name=="all"){ models[model].find().sort(obj).skip(offset).limit(limit).find((err,data)=>{ if(err){ res.send(err) }else{ models[model].count((err,result)=>{ if(err){ res.send(err) }else{ res.send({ body:{ rows:data, size:limit, total:result } }) } }) } }) }else{ models[model].find({name:name}).skip(offset).limit(limit).find((err,data)=>{ if(err){ res.send(err) }else{ models[model].count((err,result)=>{ if(err){ res.send(err) }else{ res.send({ body:{ rows:data, size:limit, total:result } }) } }) } }) } })

至此，完成对数据的增删改查，对数据的操作基本就是增删改查

二：实现前台的一些功能

1.点击某个列表中的数据进入详情页面

我设计的是详情页面是一个公共的组件，我们进入详情页面需要知道当前这个数据是哪个集合中，而且需要知道对应数据的id.在列表页面，我们需要将每个数据对应的id放在数据中的自定义属性中，点击进入详情页面的时候地址栏有当前数据属于的集合和对应的id

//列表页中每个数据加一个点击函数
onClickRow: function(row, $element) { _this.$router.push({ name: 'Detail', query: { id: row._id, cate: 'news' } }) }

进入详情页面之后，执行这个函数，这个函数获取到当前地址栏上传过来的参数，然后调取后台数据

//获取详情页面
        getData: function() { var params = { id: this.$route.query.id, cate: this.$route.query.cate }; this.$http.post("/api/data/detail", params).then((response) => { if (response && response.status == 200) { var result = response.body; this.items = result; this.watchNum = result[0].watch;  } }) }, 

2.从后台调取数据之后，在前台显示的例子。前台用的是vue-resource获取到result之后，将result中的数据传给在data中设置的一个数组，然后再html中将数组v-for

        getData:function(sort){ var _this=this; var params={ limit:8, offset:0, name:'', model:this.message, sort:sort } this.$http.post('/api/model/query',params).then((response)=>{ if(response){ var result=response.body.body.rows for(var i=0;i<result.length;i++){ _this.data.push(result[i]) } } }) this.imgSrc='static/image/qt_sort/'+this.message+'.png' },

 3.对文件进行上传和展示 上传用的是multer 我的思路是在file的input改变的时候，调取后台文件上传的接口，然后存储文件，将文件的路径放在input上，在最终全部的数据提交的时候，一并将文件的路径提交上去，最后显示文件的时候，就那平常的参数那样写，但是需要注意的是img的src需要这样写<img :src="item.src"/>

html

<div>
      <label class="custom-file-upload">
      <input type="file" accept="image/png,image/jpg,image/jpeg,image/gif" name="myupload" id="uploadInput" v-on:change="uploadImage()"/>
     </label>
</div>

js

 uploadImage(){ var formData = new FormData(); var myfile = document.getElementById('uploadInput').files[0]; formData.append('fabricImage', myfile); this.$http.post('/api/news/files/upload', formData).then(response=>{ console.log('succeed'); if(response&&response.status==200){ console.log(response.body) this.fileName=response.body console.log(result) } }).catch(err=>{ console.log(err) }); }, 

后台api.js

// 引入处理路径的模块
const path = require('path'); const fs = require('fs'); var multer  = require('multer'); var upload=multer({dest:'upload/'}); //文件上传
router.post('/api/movies/files/upload', upload.single('fabricImage'), function (req, res, next) { var file = req.file; //以下代码得到文件后缀
    name = file.originalname; nameArray = name.split(''); var nameMime = []; l = nameArray.pop(); nameMime.unshift(l); while (nameArray.length != 0 && l != '.') { l = nameArray.pop(); nameMime.unshift(l); } //Mime是文件的后缀
    Mime = nameMime.join(''); //重命名文件 加上文件后缀
    //fs.renameSync('./upload/' + file.filename, './upload/' + file.filename + Mime);
    fs.renameSync('./upload/' + file.filename, '../static/upload/' + file.filename + Mime); var path='/static/upload/' + file.filename + Mime; res.send(path); })

=================还有很多小的细节，需要说明