Vue에서 MongoDB의 추가, 삭제, 수정 및 쿼리 작업을 구성하려면 먼저 'mongoose' 모듈을 설치하여 MongoDB 데이터베이스에 연결해야 합니다.
1. Vue 프로젝트의 루트 디렉터리에서 명령줄을 사용하여 'mongoose' 모듈을 설치합니다.
npm 설치 몽구스 --저장
2. 노드를 시작하는 app.js 파일을 찾습니다. (저는 세 번째 단계에서 언급한 서버 파일인 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 프로젝트의 루트 디렉터리에 새 서버 파일을 생성하고, 서버 파일 아래에 새 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 = ArticleModelmongoose.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 업데이트가 일부 메서드를 더 이상 사용하지 않는다는 것입니다. 예를 들어 제거를 삭제하면 ArticleModel.remove is not a function 오류가 보고됩니다. mongoose가 권장하는 방법을 온라인에서 검색하세요. 더 권장됩니다. 여기서는 삭제를 위해 `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을 추가하면 관리 라이브러리를 통해 로그인 인증을 수행할 수 있습니다.
mongodb://admin:123@localhost:27017/mydatabase?authSource=admin '
아래 그림과 같이:
