vue+node+mongodb实现的功能

Z时代
2024-01-10
分类：综合

vue

用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" />
     </label>
</div>

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