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.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实现的功能相关推荐
- vue+node+mongodb 搭建一个完整博客
Vue + Node + Mongodb 开发一个完整博客流程 前言 前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统 服务端用的是 koa2框架 ...
- Vchat — 从头到脚,撸一个社交聊天系统(vue + node + mongodb)
前言 项目开始是因为工作需要一个聊天室功能,但是因为某些原因最终选用的是基于xmpp协议的Strophe.js写的.于是就想用node自己写一套,本来只是想简单的写个聊天页面,但是写完了又不满意,所以 ...
- 一个 Vue + Node + MongoDB 博客系统
源码 耗时半载(半个月)的大项目终于完成了.这是一个博客系统,使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的 ...
- vue+node+mongoDB火车票H5(七)-- nodejs 爬12306查票接口
菜鸟一枚,业余一直想做个火车票查票的H5,前端页面什么的已经写好了,node+mongoDB 也写了一个车站的接口,但 接下来的爬12306获取车次信息数据一直卡住,网上的爬12306的大部分是pyt ...
- 仿美团外卖的全栈项目(vue+node+mongodb)带支付-大三求实习
关于 2019届大三学生,前段时间一直想一个人单独开发一个较为完整的项目,在众多应用中,考虑之后选择了美团外卖来模仿,这段时间就利用课余时间进行开发,前端用vue+vuex+vue-router+ax ...
- 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
- 【全栈项目上线(vue+node+mongodb)】04. 怎么在一台主机上面部署多个网站,详细操作指南...
怎么在一台主机上面部署多个网站 使用Nginx的虚拟化配置 环境 使用一键安装lnmp环境 请参考 https://segmentfault.com/a/11... 第一步:执行 lnmp vhost ...
- 微信扫码关注登录(vue+node+express+mongodb)
微信扫码关注登录(vue+node+express+mongodb) 文章目录 前言 一.微信扫码关注登录是什么? 二.为什么要使用微信扫码关注登录? 三.思路 前端部分 后端部分: 四.微信后台 授 ...
- 基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录 概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
最新文章
- 问题1:程序员要做一辈子?
- ASP.NET MVC 传值方法ViewData与ViewBag的区别
- 编译内核,busybox,dropbear组装linux小系统
- markdown统一设置图片格式_Markdown教程
- html一边自动宽度,有2列,希望右侧固定宽度,左侧自动宽度。_html/css_WEB-ITnose...
- python百度关键词爬虫_python批量获取百度关键词相关结果数
- 2021-08-30
- 一班洽谈框架细化_细化结构图让文章结构更清晰 邱晓风
- Linux Capability探索试验
- 网站加速教程--提升性能的同时节约10倍成本
- device or resource busy问题处理
- 高级工程师职称计算机要求,高级工程师职称评定条件及流程
- 翻译连载 | JavaScript轻量级函数式编程-第 8 章:列表操作 |《你不知道的JS》姊妹篇
- 利用MATLAB画传递函数的奈奎斯特曲线
- 1北方更冷的城镇,是你想要的吗?
- CSS_01_样式结构及选择器
- 数据结构排序算法 内部排序(冒泡、鸡尾酒、选择、简单插入、二分插入、快排、希尔、归并、堆排)C语言实现
- [Python]:热血传奇-Wzl,Wzx的解析
- centos docker环境下如何清理磁盘空间
- 《花开半夏》--3 叶向荣(1)