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

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

vue+node+mongodb实现的功能的更多相关文章

  1. 后台管理系统:vue&node&MongoDB(一)

    后台管理系统 使用工具: Vue    Node     Mongodb   Element-ui 一.后台(Node+Mongodb) 前期准备: 需要下载的包: mongooes -------- ...

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

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

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

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

  4. vue+node+mongodb前后端分离博客系统

    感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...

  5. vue+node+mongoDB前后端分离个人博客(入门向)

    最近学习了VUE,自己为了学习做了个小小的博客,功能很简单,不过开发过程中也遇到了很多坑,所以记录下来方便以后使用.欢迎大家交流学习. 功能 实现了用户注册.登录.token检测登录.用户留言.个人中 ...

  6. 学习笔记:Vue+Node+Mongodb构建简单商城系统(一)

    所需前置知识: HTML.CSS.JS.Vue.ES6.Npm.Webpack.Node.Express.Mongodb 项目整体架构: IDE:webstorm: 项目建立过程(cmd常用命令行指令 ...

  7. vue+node+mongoDB 火车票H5(六)---城市列表保存到MongoDB数据库并且启用node.js服务

    把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境 全局安装express-gengerator cnpm install -g ...

  8. vue+node+mongodb实现的页面

    源代码地址:https://github.com/GainLoss/vue-node-mongodb 目前这个项目实现的是: 1.利用vue-cli实现前台页面的编写 (1)页面的跳转利用的是vue- ...

  9. 学习笔记:Vue+Node+Mongodb 构建简单商城系统(二)

    前面几个月工作有点忙,导致构建简单商城系统的计划搁置近三个月.现在终于有时间重新回过头来继续本计划.本篇主要记录自己在阿里云服务器上搭建node运行环境的整个过程,以及对其中遇到的一些问题的思考. 一 ...

随机推荐

  1. [转] 如何批量删除Docker中已经停止的容器

    [From]https://blog.csdn.net/csdn_duomaomao/article/details/78587103 方法一: #显示所有的容器,过滤出Exited状态的容器,取出这 ...

  2. Linux中断分层--工作队列

    1. 工作队列是一种将任务推后执行的方式,它把推后的任务交由一个内核线程去执行.这样中断的下半部会在进程上下文执行,他允许重新调度甚至睡眠.每个被推后的任务叫做“工作”,由这些工作组成的队列称为工作队 ...

  3. PIE SDK地图显示范围截图

    1.1. 功能简介 地图显示范围截图是将当前地图显示的范围进行输出.输出的 格式是png.bmp,主要思路就是通过IActiveView接口下的Output()方法进行输出 1.2. 功能实现说明 2 ...

  4. C/S架构与B/S架构的区别

    什么是C/S结构和B/S结构? C/S结构 C/S结构是指Client/Server (客户机/服务器) 结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了 ...

  5. esper(4-3)-Non-Overlapping Context

    语法 create context context_name start start_condition end end_condition 如: // 9点到17点此context才可用(以引擎的时 ...

  6. RabbitMQ原理——exchange、route、queue的关系

    从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心,下面我们就围绕这三个主要组件    从应用使用的角度全面的介绍如何利用Rabbit MQ构建 ...

  7. Java中forEach, 用来遍历数组

    这里的for是Java中forEach, 用来遍历数组的.for(int i : d) 就是遍历int型数组d的 每一次访问数组d的时候读取的数据放入int型的i中.和for(int i=0;i< ...

  8. FileZilla的使用(包括Server和Client两个程序)

    1.安装 FileZillaServer和FileZillaClient,到官网去下载 https://filezilla-project.org/ 2.启动 FileZillaServer 它会提示 ...

  9. HDU 1800——Flying to the Mars——————【字符串哈希】

    Flying to the Mars Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  10. dpkg: error: dpkg status database is locked by another process 解决方法

    使用dpkg -i/apt命令安装,报错: ------------------------------------------------------------- dpkg: error: dpk ...