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

=================還有不少小的細節，須要說明