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

news2024/12/30 3:12:13

在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.body
    let 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 都是需要权限才能成功的运用