用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.rowsfor(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.bodyconsole.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);
})

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

转载于:https://www.cnblogs.com/GainLoss/p/7605164.html

vue+node+mongodb实现的功能相关推荐

  1. vue+node+mongodb 搭建一个完整博客

    Vue + Node + Mongodb 开发一个完整博客流程 前言 前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统 服务端用的是 koa2框架 ...

  2. Vchat — 从头到脚,撸一个社交聊天系统(vue + node + mongodb)

    前言 项目开始是因为工作需要一个聊天室功能,但是因为某些原因最终选用的是基于xmpp协议的Strophe.js写的.于是就想用node自己写一套,本来只是想简单的写个聊天页面,但是写完了又不满意,所以 ...

  3. 一个 Vue + Node + MongoDB 博客系统

    源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...

  4. vue+node+mongoDB火车票H5(七)-- nodejs 爬12306查票接口

    菜鸟一枚,业余一直想做个火车票查票的H5,前端页面什么的已经写好了,node+mongoDB 也写了一个车站的接口,但 接下来的爬12306获取车次信息数据一直卡住,网上的爬12306的大部分是pyt ...

  5. 仿美团外卖的全栈项目(vue+node+mongodb)带支付-大三求实习

    关于 2019届大三学生,前段时间一直想一个人单独开发一个较为完整的项目,在众多应用中,考虑之后选择了美团外卖来模仿,这段时间就利用课余时间进行开发,前端用vue+vuex+vue-router+ax ...

  6. 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...

    以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...

  7. 【全栈项目上线(vue+node+mongodb)】04. 怎么在一台主机上面部署多个网站,详细操作指南...

    怎么在一台主机上面部署多个网站 使用Nginx的虚拟化配置 环境 使用一键安装lnmp环境 请参考 https://segmentfault.com/a/11... 第一步:执行 lnmp vhost ...

  8. 微信扫码关注登录(vue+node+express+mongodb)

    微信扫码关注登录(vue+node+express+mongodb) 文章目录 前言 一.微信扫码关注登录是什么? 二.为什么要使用微信扫码关注登录? 三.思路 前端部分 后端部分: 四.微信后台 授 ...

  9. 基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统

    目录 概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...

最新文章

  1. 问题1:程序员要做一辈子?
  2. ASP.NET MVC 传值方法ViewData与ViewBag的区别
  3. 编译内核,busybox,dropbear组装linux小系统
  4. markdown统一设置图片格式_Markdown教程
  5. html一边自动宽度,有2列,希望右侧固定宽度,左侧自动宽度。_html/css_WEB-ITnose...
  6. python百度关键词爬虫_python批量获取百度关键词相关结果数
  7. 2021-08-30
  8. 一班洽谈框架细化_细化结构图让文章结构更清晰 邱晓风
  9. Linux Capability探索试验
  10. 网站加速教程--提升性能的同时节约10倍成本
  11. device or resource busy问题处理
  12. 高级工程师职称计算机要求,高级工程师职称评定条件及流程
  13. 翻译连载 | JavaScript轻量级函数式编程-第 8 章:列表操作 |《你不知道的JS》姊妹篇
  14. 利用MATLAB画传递函数的奈奎斯特曲线
  15. 1北方更冷的城镇,是你想要的吗?
  16. CSS_01_样式结构及选择器
  17. 数据结构排序算法 内部排序(冒泡、鸡尾酒、选择、简单插入、二分插入、快排、希尔、归并、堆排)C语言实现
  18. [Python]:热血传奇-Wzl,Wzx的解析
  19. centos docker环境下如何清理磁盘空间
  20. 《花开半夏》--3 叶向荣(1)

热门文章

  1. pytorch torch.empty
  2. Flask 应用上下文
  3. opencv-api draw
  4. opencv Shi-Tomasi角检测
  5. 计算机组成中CM,基于TDN-CM++计算机组成原理课程设计.doc
  6. 拒绝无用的长篇大论!仅12张图片,最全的中台精华都在这里了
  7. 从北大高材生被华为辞退中我们需要学到什么?
  8. Java基础学习总结(58)——JAVA堆、栈详解
  9. 系统架构师成长之路(二)
  10. python r转义_Python快速入门系列之二:还学不会我直播跪搓衣板