vue项目配置MongoDB的增删改查操作

在Vue中配置MongoDB的增删改查操作,需要先安装`mongoose`模块来连接MongoDB数据库。

1. 在Vue项目的根目录中,使用命令行安装`mongoose`模块:

        npm install mongoose --save

2. 找到启动node的app.js文件(我这里是在server文件中,就是第三步中说的server文件)

const express = require('express')
const app = express()
const mongoose = require('mongoose');
var config = require('./config');//引入config中mongoDB地址// 解析 url-encoded格式的表单数据
app.use(express.urlencoded({ extended: false }));// 解析json格式的表单数据
app.use(express.json());var article=require('./routes/article');
app.use('/article', article);var db=mongoose.connect(config.db.path, {useNewUrlParser: true,useUnifiedTopology: true
})
db.then(function (data) {console.log('--数据库连接成功--');}).catch(function (error) {console.log('数据库连接失败: ' + error);
});module.exports = app

在上面的代码中,`mongoose.connect`用于连接MongoDB数据库 

我这里的config.db.path,是地址配置的,也可以直接将地址写进去

const url = 'mongodb://localhost:27017/mydatabase';
var db=mongoose.connect(url, {useNewUrlParser: true,useUnifiedTopology: true
})

3. 在Vue项目的根目录中新建一个server文件,server文件下新建文件config,在config中新建db.js文件

const mongoose = require('mongoose');
let Promise = require('bluebird');// 定义数据模型
const ArticleSchema = new mongoose.Schema({article_title:String, //标题article_desc:String,    //简介article_info:String,    //内容createdAt: { //创建日期type: Date,default: Date.now}});
//mongoose.model三个参数分别代表模型的名称、模型的Schema、模型的集合名称
const ArticleModel = mongoose.model('Article', ArticleSchema);
Promise.promisifyAll(ArticleModel);
Promise.promisifyAll(ArticleModel.prototype);
module.exports = ArticleModel

mongoose.connection`用于获取数据库连接对象。然后,使用`mongoose.Schema`定义Article的数据模型,并使用`mongoose.model`创建Article模型。(这里的数据模型就是你页面数据的字段)。

4. 在server>routes文件中新建article.js

var express = require('express');
var articleRouter = express.Router();
var ArticleModel = require('../db');
//查询
articleRouter.get('/:id', (req, res) => {const articleId = req.params.id;if (!articleId) {return {err_code: -2,err_msg: 'no id'};}ArticleModel.findOne({_id: articleId}).then(response => {res.send({err_code: 0,data: response});}).catch(err => {console.log(err);res.send({err_code: -1,err_msg: 'server error'});});
});
// 获取列表
articleRouter.get('/', (req, res) => {let page = req.query.page,size = req.query.size,store = req.query.store;page = parseInt(page, 10) || 1;size = parseInt(size, 10) || 100;let skip = (page - 1) * size;let sort = '-createAt';let data = {};Promise.all([//Articletype 集合的数据  find 指定的查询条件 sort 排序规则  skip跳过指定数量的记录,用于分页查询  limit 返回的数据为指定的size  exec查询操作并返回记录ArticleModel.find(data).sort(sort).skip(skip).limit(size).exec(),ArticleModel.count(data)]).then(([data, count]) => {res.send({data: data,total: count,err_code: 0});}).catch(err => {console.log(err);res.send({err_code: -2});});
});
// 新增列表
articleRouter.post('/', (req, res) => {var articleBody=req.bodylet data = {article_url: articleBody.article_url};//先检查是否有已经创建的数据ArticleModel.find(articleBody).then(datas => {'use strict';if (datas.length > 0) {res.send({err_code: -1,err_msg: '资源已存在'});return;}ArticleModel.create(articleBody).then(response => {res.send({err_code: 0,err_msg: '保存成功'});}).catch(res => {res.send({err_code: -2,err_msg: '保存失败'});});});
});
// 删除
articleRouter.delete('/:id', (req, res) => {const articleId = req.params.id;if (!articleId) {return res.send({err_code: -1,err_msg: '缺少ID'});}//mongoDB已经弃用remove使用deleteOne 删除单个文档或者deleteMany 删除多个文档ArticleModel.deleteOne({_id: articleId}).then(response => {res.send({err_code: 0});}).catch(err => {res.send({err_code: -2,err_msg: '删除失败'});});
});
// 修改
articleRouter.put('/', (req, res) => {const articleBody = req.body;const articleId = req.body.id;console.log(req.body)if (!articleId) {return res.send({err_code: -1,err_msg: '缺少id'});}ArticleModel.findOneAndUpdate({_id: articleId}, {$set: articleBody}).then(response => {res.send({err_code: 0,});}).catch(err => {console.log(err);res.send({err_code: -2,err_msg: '数据库错误'});});
});
module.exports = articleRouter

这里遇到最不好找的问题就是Mongoose更新会弃用一些方法,例如删除remove,就会报错ArticleModel.remove is not a function,网上找一下mongoose推荐使用的方法,这里remove更推荐使用`deleteOne`或`deleteMany`方法,取决于你想要删除单个文档还是多个文档。你可以替换`remove`方法为`deleteOne`或`deleteMany`来解决这个问题。 

5. 页面中调用

例子:

查询列表

import axios from 'axios'
dexport default{mounted():{axios.get('/article', {params}).then(res => {console.log(res)//查看是否调用成功});}
}

删除

axios.delete(`/article/${id}`).then(res=>{console.log(res.data)if(res.data.err_code==0){this.$message({message: '删除成功',type: 'success'})this.initList()}else{this.$message({type: 'error',message: res.data.err_msg});}})

6. 请求接口的时候可能会报这个错误

给MongoDB设置了数据库访问权限,所以无论是 打开mongodb和连接去掉账号密码 都是显示数据库报错   所以无论运行node app.js 都是需要权限 才能成功的运用

在数据库连接的前面加上用户名和密码root:root,后面加上 authSource=admin  通过admin库进行登录认证

mongodb://admin:123@localhost:27017/mydatabase?authSource=admin '

如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/67663.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

processflow流程图多人协作预热

前言 在线上办公如火如荼的今天,多人协作功能是每个应用绕不开的门槛。processflow在线流程图(前身基于drawio二次开发)沉寂两年之久,经过长时间设计开发,调整,最终完成了多人协作的核心模块设计。废话不多…

肖sir__设计测试用例方法之场景法04_(黑盒测试)

设计测试用例方法之场景法 1、场景法主要是针对测试场景类型的,顾也称场景流程分析法。 2、流程分析是将软件系统的某个流程看成路径,用路径分析的方法来设计测试用例。根据流程的顺序依次进行组合,使得流程的各个分支能走到。 举例说明&…

网易低代码引擎Tango正式开源

一、Tango简介 Tango 是一个用于快速构建低代码平台的低代码设计器框架,借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器直接读取前端项目的源代码,并以源代码为中心,执行和渲染前端视图,并为用户提供低代码可视化搭建能力,…

uniapp从零到一的学习商城实战

涵盖的功能: 安装开发工具HBuilder:HBuilderX-高效极客技巧 创建项目步骤: 1.右键-项目: 2.选择vue2和默认模板: 3.完整的项目目录: 微信开发者工具调试: 1.安装微信开发者工具 2.打开…

GeoServe Web 管理界面 实现远程访问

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现,利用GeoServer可以方便地发布地图数据,允许用户对要素数据进行更新、删除、插入…

Android Studio新版本New UI及相关设置丨遥遥领先版

1、前言 俗话说工欲善其事必先利其器嘛,工具用不好怎么行呢,借着Android Studio的更新,介绍一下新版本中的更新内容,以及日常开发中那些好用的设置。 2、关于新版本 2.1、最新正式版本 Android Studio Giraffe | 2022.3.1 Pat…

elementui el-table在有summary-method时,table数据行将合计行遮挡住了

前端使用框架:elementUI 使用组件:el-table 在表格内添加合计了合计行,根据业务多次调用数据渲染画面后,偶然导致画面变成如下图所示,table的数据行将合计行遮挡住了,且这个现象有时候好用,有…

Android图形-架构1

目录 引言 Android图形的关键组件: Android图形的pipeline数据流 BufferQueue是啥? 引言 Android提供用于2D和3D图形渲染的API,可与制造商的驱动程序实现代码交互,下面梳理一下Android图形的运作原理。 应用开发者通过三种方…

C++多态案例2----制作饮品

#include<iostream> using namespace std;//制作饮品的大致流程都为&#xff1a; //煮水-----冲泡-----倒入杯中----加入辅料//本案例利用多态技术&#xff0c;提供抽象类制作饮品基类&#xff0c;提供子类制作茶叶和咖啡class AbstractDrinking {public://煮水//冲水//倒…

视频监控/视频汇聚/视频云存储EasyCVR平台HLS流集成在小程序无法播放问题排查

安防视频/视频云存储/视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求&#xff0c;让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上&#xff0c;视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频…

字节前端实习的两道算法题,看看强度如何

最长严格递增子序列 题目描述 给你一个整数数组nums&#xff0c;找到其中最长严格递增子序列的长度。 子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7…

文件系统与inode编号

文件描述符fd 0&1&2 Linux 进程默认情况会有3个缺省打开的文件描述符&#xff0c;分别是标准输入0&#xff0c; 标准输出1&#xff0c; 标准错误2. 0,1,2对应的物理设备一般是&#xff1a;键盘&#xff0c;显示器&#xff0c;显示器 所以输入输出还可以采用如下方式 …

AVR128单片机 自动售水机

一、系统方案 1、设计使用两个按键分别为S1和S2及一个发光二极管LED。S1为出水控制按键&#xff0c;当S1按下&#xff0c;表示售水机持续出水&#xff0c;继电器&#xff08;库元件relay&#xff09;接通&#xff0c;指示灯LED亮。S2为停水控制键&#xff0c;当S2按下&#xff…

OSCS 安全周报第 58 期:VMware Aria Operations SSH 身份验证绕过漏洞 (CVE-2023-34039)

​ 本周安全态势综述 OSCS 社区共收录安全漏洞 3 个&#xff0c;公开漏洞值得关注的是 VMware Aria Operations SSH 身份验证绕过漏洞( CVE-2023-34039 )、Apache Airflow Spark Provider 反序列化漏洞( CVE-2023-40195 )。 针对 NPM 仓库&#xff0c;共监测到 324 个不同版本…

volatile 关键字 与 CPU cache line 的效率问题

分析&回答 Cache Line可以简单的理解为CPU Cache中的最小缓存单位。目前主流的CPU Cache的Cache Line大小都是64Bytes。假设我们有一个512字节的一级缓存&#xff0c;那么按照64B的缓存单位大小来算&#xff0c;这个一级缓存所能存放的缓存个数就是512/64 8个。具体参见下…

【跟小嘉学 Rust 编程】二十三、Cargo 使用指南

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…

百度低质量站点怎么办?解决百度低质量站点的方法和工具

百度低质量站点怎么恢复&#xff1f;这是许多网站主和运营人员在SEO优化过程中经常面临的一个问题。百度作为中国最大的搜索引擎&#xff0c;对于网站收录和排名具有至关重要的影响。然而&#xff0c;由于各种原因&#xff0c;有些网站可能面临被百度降权或收录减少的情况。那么…

Medium: Where to Define Qualified users in A/B testing?

1. Common AB Testing Setup Issue (Framework) 局限性: unqualified users will also be considered and mess up experimentation results.

SeaTunnel扩展Transform插件,自定义转换插件

代码结构 在seatunnel-transforms-v2中新建数据包名&#xff0c;新建XXXTransform&#xff0c;XXXTransformConfig&#xff0c;XXXTransformFactory三个类 自定义转换插件功能说明 这是个适配KafkaSource的转换插件&#xff0c;接收到的原文格式为&#xff1a; {"path&…

华为OD机试 - 找出经过特定点的路径长度 - 深度优先搜索(Java 2022 Q4 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…