用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);
})
=================还有很多小的细节，需要说明