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); })

=================還有很多小的細節，需要說明